Angular 2 - компонент тестирования с маршрутизатором-выходом

Я создал проект angular 2 с angular -cli. Я создал отдельный модуль AppRoutingModule, который экспортирует RouterModule и добавляется в массив импорта AppModule.

У меня также есть appComponent, созданный angular -cli.

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

Я пропустил что-то для импорта в тесте?

Ответ 1

FYI, TestBed используется для создания модуля с нуля для тестовой среды. Поэтому AppModule не дает вам никакой помощи.

В вашем случае, если вы вообще не хотите тестировать какую-либо маршрутизацию, вы можете проигнорировать эту ошибку, используя NO_ERRORS_SCHEMA вместо CUSTOM_ELEMENTS_SCHEMA. Последний избежит ошибок, связанных с элементами HTML, но первый будет игнорировать все ошибки, включая неизвестные атрибуты привязки.

Если вы действительно хотите провести некоторое тестирование на некоторых материалах маршрутизации, вам нужно настроить некоторую маршрутизацию. Вы можете сделать это с помощью RouterTestingModule, который является заменой для RouterModule. Вместо публикации какого-либо произвольного примера вы можете найти несколько хороших в следующих ссылках

Ответ 2

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