親ユニットが角単位テストに存在することをアサートする

Question

私はトップレベルのコンポーネントAppComponentを持っていて、それはtemplateプロパティで、ページ上に<child>要素をレンダリングします。 （<child>は別の角度成分である）。

ユニットテストに<child>要素を無視するか、何らかの方法でテスト用に宣言する必要がありますか？

私はこのテストファイルで実際に<child>をテストしようとしていません。その機能を検証するために、別のユニットテストファイルを作成します。

app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { ChildComponent } from './child.component'; 

@NgModule({ 
    bootstrap: [AppComponent], 
    declarations: [AppComponent, ChildComponent], 
    imports: [BrowserModule] 
}) 
export class AppModule { } 

app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app', 
    template: '<child></child>' 
}) 
export class AppComponent { } 

child.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'child', 
    templateUrl: './child.component.html' 
}) 
export class ChildComponent { } 

app.component.spec.ts

import { async, TestBed } from '@angular/core/testing'; 
import { AppComponent } from './app.component'; 
import { ChildComponent } from './child.component'; 

describe('App', (() => { 
    beforeEach(async() => { 
    TestBed.configureTestingModule({ declarations: [AppComponent, ChildComponent] }).compileComponents(); 
    })); 
    it('should work',() => { 
    let fixture = TestBed.createComponent(AppComponent); 
    // assert app.component exists 
    }); 
}); 

私はユニットテストを実行すると、私はこのエラーを取得しています：

Error: This test module uses the component ChildComponent which is using a "templateUrl" or "styleUrls", but they were never compiled. Please call "TestBed.compileComponents" before your test. in /tmp/karma-typescript-bundle-3142O76A6m7KjQOD.js (line 3929) 

Answer 1

エラーが他のユニット（ChildComponent）があることを示していますテストに関わった。このエラーは、ChildComponentがtemplateUrlを使用しており、そのようなコンポーネントをコンパイルするためにcompileComponentsを呼び出す必要がある可能性があります。

AppComponentがtemplateないtemplateUrlを持っているので、これはテストの同期を行い、asyncヘルパーが不要になり、またcompileComponentsを使用する必要がなくなります。

としてはthe guideで説明した他のユニットは、無視スタブまたはモックされている間、

The TestBed.compileComponents method asynchronously compiles all the components configured in the testing module. In this example, the BannerComponent is the only component to compile. When compileComponents completes, the external templates and css files have been "inlined" and TestBed.createComponent can create new instances of BannerComponent synchronously.

ユニットテストは、唯一のユニットがテストされていることを前提。これにより、テストを分離した状態に保つことができます。

宣言されていないコンポーネントがエラーになりますので、それらがスタブしなければならない。

beforeEach(() => { 
    @Component({ selector: 'child', template: '' }) 
    class DummyChildComponent {} 

    TestBed.configureTestingModule({ declarations: [AppComponent, DummyChildComponent] }); 
    }); 

ダミー部品の代わりに、任意の可能なエラー出力が貴重であってもよいので、テストに適していないれ、CUSTOM_ELEMENTS_SCHEMA又はNO_ERRORS_SCHEMAあります。そしてcustom schemaはより重い解決策です。

Answer 2

あなたのモジュールにChildComponentを追加する必要があります。

beforeEach(() => { 
    TestBed.configureTestingModule({ declarations: [AppComponent, ChildComponent] }); 
    });