Angular 2 - 使用路由器插座测试组件

Question

我用 angular-cli 创建了 angular 2 个项目。我创建了单独的 AppRoutingModule，它导出 RouterModule 并添加到 AppModule 导入数组。

我还有 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><"

我是否遗漏了要在测试中导入的内容？

Answer 1

仅供参考，TestBed 用于从头开始为测试环境创建模块。所以 AppModule 没有给你任何帮助。

在您的情况下，如果您根本不想测试任何路由，则可以使用 NO_ERRORS_SCHEMA 而不是 CUSTOM_ELEMENTS_SCHEMA 来忽略此错误。后者将避免与 HTML 元素相关的错误，但前者将忽略所有错误，包括未知的绑定属性。

如果您确实想对某些路由进行一些测试，那么您需要配置一些路由。您可以使用 RouterTestingModule 来做到这一点，它是 RouterModule 的替代品。您可以在以下链接中找到一些好的示例，而不是随意发布一些示例

Answer 2

<router-outlet>是Angular2+中的一个组件，需要识别。

所以你需要 RouterTestingModule 来测试路由，否则，你会得到错误，在你的规范中像这样从 router/testing 导入它：

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

Angular 2 - 使用路由器插座测试组件

Angular 2 - testing component with router-outlet

javascript

testing

karma-runner

angular2-routing

angular