Angular 2 Jasmine Can't bind to 'routerLink' since it isn't a known property of 'a' Angular 2 Jasmine Can't bind to 'routerLink' since it isn't a known property of 'a' angular angular

Angular 2 Jasmine Can't bind to 'routerLink' since it isn't a known property of 'a'


Just import RouterTestingModule in TestBed.configureTestingModule of your components spec.ts file

Eg:

import { RouterTestingModule } from '@angular/router/testing';TestBed.configureTestingModule({  imports: [RouterTestingModule],  declarations: [ ComponentHeaderComponent ]})


The Angular Testing docs address this by using RouterLinkDirectiveStub and RouterOutletStubComponent so that routerLink is a known property of <a>.

Basically it says that using RouterOutletStubComponent is a safe way to test routerLinks without all the complications and errors of using the real RouterOutlet. Your project needs to know it exists so it doesn't throw errors but it doesn't need to actually do anything in this case.

The RouterLinkDirectiveStub enables you to click on <a> links with routerLink directive and get just enough information to test that it is being clicked (navigatedTo) and going to the correct route (linkParams). Any more functionality than that and you really aren't testing your component in isolation any more.

Take a look at their Tests Demo in app/app.component.spec.ts. Grab the testing/router-link-directive-stub.ts and add to your project. Then you will inject the 2 stubbed items into your TestBed declarations.


If you want only isolated test and DO NOT CARE about template,you can add NO_ERRORS_SCHEMA. This tells Angular not to show error if it encounters any unknown attribute or element in HTML

Eg:

TestBed.configureTestingModule({  declarations: [ ComponentHeaderComponent ],  schemas: [ NO_ERRORS_SCHEMA ]})