Angular 2.0.0 Testing a component with router

Question

Given the following component:

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

I am trying to write a unit test:

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

});

Here is the error message:

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)

Any help would be appreciated!!

Answer 1

I guess the RouterModule expects for an app component to be bootstrapped with the platform bootstrap. That's probably the reason (among other things) they have the RouterTestingModule. Use it to configure your routes

imports: [
  RouterTestingModule.withRoutes(rootRouterConfig)
]

You can also see a complete example in this post