Lỗi phân tích cú pháp mẫu trong thử nghiệm Jasmine nhưng không phải ứng dụng thực tế

Question

Tôi đã phát triển thông số kỹ thuật của Jasmine để kiểm tra thành phần 2 góc MiddleRowComponent. Khi tôi chạy thử nghiệm hoa nhài, nó cho lỗi này:

zone.js:388 Unhandled Promise rejection: Template parse errors: 
'circles' is not a known element: 
1. If 'circles' is an Angular component, then verify that it is part of this module. 
2. If 'circles' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("</div> 
     <div class="col-md-10 col-sm-12 offset-md-1 flex-xs-middle" id="circles-div"> 
     [ERROR ->]<circles (onWordChanged)="onWordChanged($event)"></circles> 
     </div> 
     <div class="col-md-10 "): MiddleRowComponent@9:9 
'custom-button' is not a known element: 

Tuy nhiên nếu tôi chỉ chạy ứng dụng web của tôi trong trình duyệt như bình thường, lỗi này không xảy ra. circles thực sự là một phần của mô-đun. Và custom-button là một phần của mô-đun được chia sẻ được nhập. Đây là mô-đun.ts:

import { NgModule }   from '@angular/core'; 
import { CommonModule }  from '@angular/common'; 
import { SharedModule } from '../shared/shared.module'; 
import * as LandingPage from './index'; 

@NgModule({ 
    imports: [ CommonModule, SharedModule ], 
    declarations: [ 
     LandingPage.MiddleRowComponent, 
     LandingPage.LandingPageComponent, 
     LandingPage.CirclesComponent 
    ], 
    exports: [ LandingPage.LandingPageComponent ], 
}) 
export class LandingPageModule { } 

Mọi thứ được nhập và tuyên bố là cần thiết và hoạt động khi chạy ứng dụng mà không kiểm tra. Tôi sử dụng một done để làm cho công việc beforeEach đưa ra bản chất không đồng bộ của việc lấy mẫu thành phần từ một tệp khuôn mẫu riêng biệt. Tôi ru thử nghiệm với một tập tin html jasmine spec runner. Làm thế nào đến các thành phần của tôi mà sử dụng MiddleRowComponent không phải là yếu tố được biết đến trong bài kiểm tra hoa nhài nhưng là khi chạy các ứng dụng bình thường?

Dưới đây là spec hoa nhài:

import 'zone.js/dist/long-stack-trace-zone.js'; 
import 'zone.js/dist/async-test.js'; 
import 'zone.js/dist/fake-async-test.js'; 
import 'zone.js/dist/sync-test.js'; 
import 'zone.js/dist/proxy.js'; 
import 'zone.js/dist/jasmine-patch.js'; 

import { ComponentFixture, TestBed } from '@angular/core/testing'; 
import { 
    BrowserDynamicTestingModule, 
    platformBrowserDynamicTesting 
} from '@angular/platform-browser-dynamic/testing'; 
import { By } from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 

import { MiddleRowComponent } from './middle-row.component'; 

let comp: MiddleRowComponent; 
let fixture: ComponentFixture<MiddleRowComponent>; 
let de: DebugElement; 
let el: HTMLElement; 

describe('MiddleRowComponent',() => { 
    var fixture: any; 
    var comp: any; 
    beforeAll(() => { 
     TestBed.resetTestEnvironment(); 
     TestBed.initTestEnvironment(BrowserDynamicTestingModule, 
      platformBrowserDynamicTesting()); 
    }); 

    beforeEach((done) => { 
     TestBed.configureTestingModule({ 
      declarations: [MiddleRowComponent], // declare the test component 
     }).compileComponents().then(() => { 
      fixture = TestBed.createComponent(MiddleRowComponent); 
      comp = fixture.componentInstance; // MiddleRowComponent test instance 
      // query for the title <h1> by CSS element selector 
      de = fixture.debugElement.query(By.css('h1')); 
      el = de.nativeElement; 
      done(); 
     }); 
    }); 

    it('should display original title',() => { 
     fixture.detectChanges(); 
     expect(el.textContent).toContain(comp.word); 
    }); 

    it('should display a different test title',() => { 
     comp.word = 'Test Title'; 
     fixture.detectChanges(); 
     expect(el.textContent).toContain('Test Title'); 
    }); 
}); 

đầy đủ lỗi:

zone.js:388 Unhandled Promise rejection: Template parse errors: 
'circles' is not a known element: 
1. If 'circles' is an Angular component, then verify that it is part of this module. 
2. If 'circles' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("</div> 
     <div class="col-md-10 col-sm-12 offset-md-1 flex-xs-middle" id="circles-div"> 
     [ERROR ->]<circles (onWordChanged)="onWordChanged($event)"></circles> 
     </div> 
     <div class="col-md-10 "): MiddleRowComponent@9:9 
'custom-button' is not a known element: 
1. If 'custom-button' is an Angular component, then verify that it is part of this module. 
2. If 'custom-button' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" 
     </div> 
     <div class="col-md-10 offset-md-1 flex-xs-middle" id="try-now-div"> 
     [ERROR ->]<custom-button buttonName="try now" (click)="tryNowClick()"></custom-button> 
     </div> 
    </div> 
"): MiddleRowComponent@12:9 ; Zone: ProxyZone ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: 
'circles' is not a known element: 
1. If 'circles' is an Angular component, then verify that it is part of this module. 
2. If 'circles' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("</div> 
     <div class="col-md-10 col-sm-12 offset-md-1 flex-xs-middle" id="circles-div"> 
     [ERROR ->]<circles (onWordChanged)="onWordChanged($event)"></circles> 
     </div> 
     <div class="col-md-10 "): MiddleRowComponent@9:9 
'custom-button' is not a known element: 
1. If 'custom-button' is an Angular component, then verify that it is part of this module. 
2. If 'custom-button' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" 
     </div> 
     <div class="col-md-10 offset-md-1 flex-xs-middle" id="try-now-div"> 
     [ERROR ->]<custom-button buttonName="try now" (click)="tryNowClick()"></custom-button> 
     </div> 
    </div> 
"): MiddleRowComponent@12:9 
    at TemplateParser.parse (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:7730:21) 
    at RuntimeCompiler._compileTemplate (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:17573:53) 
    at eval (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:17493:64) 
    at Set.forEach (native) 
    at RuntimeCompiler._compileComponents (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:17493:21) 
    at createResult (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:17404:21) 
    at ZoneDelegate.invoke (http://localhost:3002/node_modules/zone.js/dist/zone.js:232:26) 
    at ProxyZoneSpec.onInvoke (http://localhost:3002/node_modules/zone.js/dist/proxy.js:79:39) 
    at ZoneDelegate.invoke (http://localhost:3002/node_modules/zone.js/dist/zone.js:231:32) 
    at Zone.run (http://localhost:3002/node_modules/zone.js/dist/zone.js:114:43)consoleError @ zone.js:388_loop_1 @ zone.js:417drainMicroTaskQueue @ zone.js:421ZoneTask.invoke @ zone.js:339 
zone.js:390 Error: Uncaught (in promise): Error: Template parse errors:(…) 

Answer 1

Vâng, mô-đun thử nghiệm của bạn chỉ có MiddleRowComponent tuyên bố. Vì vậy, nó không biết về CircleComponent:

TestBed.configureTestingModule({ 
    declarations: [MiddleRowComponent], // declare the test component 
}) 

Thêm tất cả các thành phần cần thiết trong tờ khai của các mô-đun thử nghiệm, hoặc thêm LandingPageModule đối với hàng hoá của các mô-đun thử nghiệm.

Answer 2

Tôi đã gặp sự cố tương tự và tìm thấy trang này và trong khi câu trả lời của JB Nizet dẫn đến giải pháp cho tôi, nó không hoạt động với tôi. Tôi không cố gắng lấy đi câu trả lời chắc chắn của anh ấy cho câu hỏi ban đầu, chỉ cố gắng giúp người tiếp theo đi cùng.

Sự cố của tôi giống hệt như OP, ngoại trừ thành phần tùy chỉnh của tôi (MiddleRowComponent trong ví dụ này) đã sử dụng thành phần của bên thứ ba. Lỗi kiểm tra đơn vị được cung cấp về thẻ của bên thứ ba được sử dụng trong mẫu của tôi, mặc dù nó hoạt động tốt trong ứng dụng thực tế. Các giải pháp đối với tôi là cũng bao gồm một imports cho bên thứ ba trong mô-đun thử nghiệm của tôi:

TestBed.configureTestingModule({ 
    declarations: [MiddleRowComponent], 
    imports: [TheThirdPartyModule] 
}) 

Sau đó, kiểm tra đơn vị của tôi chạy mà không có lỗi. Hy vọng rằng sẽ giúp!