角2 - ルータの出口付きのテストコンポーネント

Question

私はangle-cliで角度2のプロジェクトを作成しました。私はRouterModuleをエクスポートするAppRoutingModuleを別途作成し、AppModule imports配列に追加しました。

私はangle-cliによって作成されたappComponentも持っています。

app.component.html

<nav> 
    <a *ngFor="let view of views" routerLink="{{ view.address }}" routerLinkActive="active">{{ view.text }}</a> 
</nav> 
<router-outlet></router-outlet> 

app.component.spec.ts

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


describe('App: AquaparkFrontend',() => { 
    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ 
     AppComponent 
     ], 
     schemas: [ CUSTOM_ELEMENTS_SCHEMA ] 
    }); 
    }); 

    it('should create the app', async(() => { 
    let fixture = TestBed.createComponent(AppComponent); 
    let app = fixture.debugElement.componentInstance; 
    expect(app).toBeTruthy(); 
    })); 

    it(`should have 3 views`,() => { 
    let fixture = TestBed.createComponent(AppComponent); 
    let app = fixture.debugElement.componentInstance; 
    expect(app.views.length).toEqual(3); 
    }); 
}); 

私はNGテストでテストを実行しようとすると、私はエラーを持っている：

Can't bind to 'routerLink' since it isn't a known property of 'a'. ("<nav> 
     <a *ngFor="let view of views" [ERROR ->]routerLink="{{ view.address }}" routerLinkActive="active">{{ view.text }}</a> 
    </nav> 
    <router-outlet><" 

テストでインポートするものがありませんか？

Answer 1

FYIのTestBedは、テスト環境用にモジュールを最初から作成するために使用されます。したがって、AppModuleはあなたに何の助けも与えません。

ルーティングをテストしたくない場合は、CUSTOM_ELEMENTS_SCHEMAの代わりにNO_ERRORS_SCHEMAを使用してこのエラーを無視できます。後者はHTML要素に関連するエラーを回避しますが、前者は未知のバインディング属性を含むすべてのエラーを無視します。

いくつかのルーティングに関するテストを実際に行いたい場合は、ルーティングをいくつか設定する必要があります。あなたはでそれを行うことができます。これはRouterModuleの代わりです。むしろ、いくつかの任意の例を掲示するよりも、あなたはAngular2 +のコンポーネントですので、認識する必要があり、以下のリンク

• Angular 2 unit testing components with routerLink
• Angular 2 Final Release Router Unit Test

Answer 2

<router-outlet>にいくつかの良いものを見つけることができます。

だから、あなたはあなたの仕様で、このようなルータ/テストからそれをインポートし、そうでない場合は、あなたがエラーを取得し、ルートをテストするRouterTestingModuleが必要：

import { RouterTestingModule } from '@angular/router/testing'; 

してから、このようimport[]セクションにそれを使用します：

describe('AppComponent',() => { 
    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     imports:[ 
     RouterTestingModule //<<< import it here also 
     ], 
     declarations: [ 
     AppComponent 
     ], 
     providers: [{ provide: APP_BASE_HREF, useValue: '/' }] 

    }).compileComponents(); 
    }));