Angular 2 - testing component with router-outlet

Question

I have created angular 2 project with angular-cli. I created separate AppRoutingModule which exports RouterModule and is added to AppModule imports array.

I have also appComponent created by 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);
  });
});

When I try to run tests with ng test I have error:

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

Do I miss something to import in test?

Alireza · Answer 1 · 2017-06-14T22:33:52.000

<router-outlet> is a component in Angular2+, so need to be recognised.

So you need RouterTestingModule to test the route, otherwise, you get the error, import it from router/testing like this in your spec:

import { RouterTestingModule } from '@angular/router/testing';

and then use it in import[] section like this:

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports:[
        RouterTestingModule //<<< import it here also
      ],
      declarations: [
        AppComponent
      ],
      providers: [{ provide: APP_BASE_HREF, useValue: '/' }]

    }).compileComponents();
  }));

score 25 · Accepted Answer · edited May 23 '17 at 12:17

FYI, The TestBed is used to create a module from scratch for the testing environment. So the AppModule doesn't give you any help.

In your case, if you don't want to test any routing at all though, you can ignore this error by using the NO_ERRORS_SCHEMA instead of the CUSTOM_ELEMENTS_SCHEMA. The latter will avoid errors related to HTML elements, but the former will ignore all errors, including unknown binding attributes.

If you actually do want to do some testing on some routing stuff, then you need to configure some routing. You can do that with the RouterTestingModule, which is a replacement for the RouterModule. Rather than posting some arbitrary example, you can find some good ones in the following links

Angular 2 - testing component with router-outlet

2 Answers2