Angular 2.0.0 使用路由器测试组件

Question

给定以下组件：

import {Component, OnInit} from '@angular/core';
import {Route, Router} from '@angular/router';

@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.css']
})
export class IndexComponent {

  constructor(private router: Router) { }

  hasRoute(controllerName: string): boolean {
    return this.router.config.some((route: Route) => {
      if (route.path === controllerName) {
        return true;
      }
    });
  }
}

我正在尝试编写单元测试：

import { TestBed, async } from '@angular/core/testing';
import { IndexComponent } from './index.component';
import { rootRouterConfig } from '../app.routes';
import { RouterModule } from '@angular/router';
import {APP_BASE_HREF} from "@angular/common";

describe('Component: Index', () => {

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        IndexComponent
      ],
      imports: [
        RouterModule.forRoot(rootRouterConfig)
      ],
      providers: [
        {provide: APP_BASE_HREF, useValue: '/'},
      ],
    });
  });

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

});

错误信息如下：

Chrome 52.0.2743 (Windows 10 0.0.0) Component: Index should create the component FAILED
    Failed: Error in ./IndexComponent class IndexComponent_Host - inline template:0:0 caused by: Bootstrap at least one component before injecting Router.
    Error: Bootstrap at least one component before injecting Router.
        at setupRouter (webpack:///C:/Users/Jim/Documents/IdeaProjects/ng2-test/client/~/@angular/router/src/router_module.js:190:0 <- src/test.ts:32672:15)
        at NgModuleInjector.get (DynamicTestModule.ngfactory.js:173:57)
        at NgModuleInjector.DynamicTestModuleInjector.getInternal (DynamicTestModule.ngfactory.js:257:46)
        at NgModuleInjector.get (webpack:///C:/Users/Jim/Documents/IdeaProjects/ng2-test/client/~/@angular/core/src/linker/ng_module_factory.js:94:0 <- src/test.ts:28153:27)
        at TestBed.get (webpack:///C:/Users/Jim/Documents/IdeaProjects/ng2-test/client/~/@angular/core/bundles/core-testing.umd.js:1114:0 <- src/test.ts:9246:51)
        at DebugAppView._View_IndexComponent_Host0.createInternal (IndexComponent_Host.ngfactory.js:16:115)
        at DebugAppView.AppView.create (webpack:///C:/Users/Jim/Documents/IdeaProjects/ng2-test/client/~/@angular/core/src/linker/view.js:125:0 <- src/test.ts:42466:21)
        at DebugAppView.create (webpack:///C:/Users/Jim/Documents/IdeaProjects/ng2-test/client/~/@angular/core/src/linker/view.js:337:0 <- src/test.ts:42678:44)
        at ComponentFactory.create (webpack:///C:/Users/Jim/Documents/IdeaProjects/ng2-test/client/~/@angular/core/src/linker/component_factory.js:153:0 <- src/test.ts:27771:36)
        at initComponent (webpack:///C:/Users/Jim/Documents/IdeaProjects/ng2-test/client/~/@angular/core/bundles/core-testing.umd.js:1153:0 <- src/test.ts:9285:53)

如有任何帮助，我们将不胜感激！

Answer 1

我猜 RouterModule 期望应用程序组件 bootstrap 与平台 bootstrap 同步。这可能是（除其他外）他们拥有 RouterTestingModule 的原因。用它来配置你的路线

imports: [
  RouterTestingModule.withRoutes(rootRouterConfig)
]

您还可以在

中查看完整示例

Angular 2.0.0 使用路由器测试组件

Angular 2.0.0 Testing a component with router

angular

angular2-routing

angular2-testing