Jasmineテストでテンプレート解析エラーが発生しましたが、実際のアプリケーションではありません

Question

角度2のコンポーネントMiddleRowComponentをテストするためのJasmine仕様を開発しました。私はジャスミンのテストを実行すると、それはこのエラーを与える：私は普通のようなブラウザで私のWebアプリケーションを実行する場合

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: 

ただし、エラーは発生しません。 circlesは確かにモジュールの一部です。 custom-buttonは、インポートされる共有モジュールの一部です。ここにthe module.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 { } 

すべてが読み込まれていると宣言され、テストしないでアプリを実行しているときに動作します。私はdoneを使用してbeforeEachの作業を行います。それは、コンポーネントテンプレートを別々のテンプレートファイルから取得することが非同期的であるためです。私はジャスミン仕様のランナーhtmlファイルを使ってテストを行った。 MiddleRowComponentが使用するコンポーネントは、ジャスミンテストの既知の要素ではありませんが、アプリケーションを正常に実行するにはどうしたらよいですか？

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'); 
    }); 
}); 

フルエラー：ここ

は、ジャスミンの仕様である

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

さて、あなたのテストのモジュールが唯一MiddleRowComponentを宣言しました。だから、CircleComponent知らない：

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

は、テストモジュールの宣言で必要なすべてのコンポーネントを追加、またはテストモジュールの輸入にLandingPageModuleを追加します。

Answer 2

私は同様の問題があり、このページを見つけましたが、JB Nizetの答えが私の解決策につながったのに対し、それはそのまま私のためには機能しませんでした。私は元の質問への彼の強固な答えを取り除こうとしているだけではなく、来ている次の人を助けようとしています。

私の問題は、私のカスタムコンポーネント（この例ではMiddleRowComponent）がサードパーティのコンポーネントを使用していたことを除いて、OPとまったく同じでした。実際のアプリでうまく動作したにもかかわらず、私のテンプレートで使用されているサードパーティのタグについては、単体テストエラーが発生しました。私のためのソリューションには、私のテストモジュールで、サードパーティのためのimportsを含むようにした

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

はその後、私のユニットテストはエラーなしで走りました。希望が助けてくれる！