web-dev-qa-db-ja.com

Angular 2-ルーターアウトレットでコンポーネントをテスト

Angle-cliでangular 2プロジェクトを作成しました。RouterModuleをエクスポートし、AppModule imports配列に追加される個別のAppRoutingModuleを作成しました。

Angular-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 testでテストを実行しようとすると、エラーが発生します。

 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><"

テストでインポートするものを見逃していますか？

javascriptangulartestingangular2-routingkarma-runner
19
Mossar

参考までに、TestBedは、テスト環境用のモジュールをゼロから作成するために使用されます。したがって、AppModuleは何も助けになりません。

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

実際にルーティングに関するテストを行いたい場合は、ルーティングを構成する必要があります。 RouterTestingModuleを使用すると、RouterModuleの代わりに使用できます。任意の例を投稿するのではなく、次のリンクでいくつかの良い例を見つけることができます

21
Paul Samsotha

<router-outlet>はAngular2 +のコンポーネントなので、認識される必要があります。

したがって、ルートをテストするには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();
  }));
30
Alireza