10 specs, 10 failures - Can't bind to 'routerLink' since it isn't a known property of 'button' [duplicate]

This question already has an answer here:

I decided to experiment the testing features of Angular. I have an app already so I just ran ng test and instantly it has errors that I don't understand. This is my first time running Angular testing.

ng test

Here is the output:

AppComponent should create the app
Failed: Template parse errors:
Can't bind to 'routerLink' since it isn't a known property of 'button'. ("<mat-toolbar color="primary">
<mat-toolbar-row>
<button mat-button [ERROR ->][routerLink]="'/'">{{title}}</button>
<button mat-button (click)="login()" *ngIf="!user">Logi"): ng:///DynamicTestModule/AppComponent.html@2:27
'mat-toolbar-row' is not a known element:
1. If 'mat-toolbar-row' is an Angular component, then verify that it is part of this module.
2. If 'mat-toolbar-row' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<mat-toolbar color="primary">


Here is the HTML snippet in app.component.html:

app.component.html

<button mat-button [routerLink]="[ ... ]">{{title}}</button>


And I definitely imported RouterModule into app.module.ts:

RouterModule

app.module.ts

@NgModule({
declarations: [
...
],
imports: [
RouterModule.forRoot(routes),
...
],
...
})
export class AppModule {}


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

app.module.ts

app.component.spec.ts

RouterTestingModule

1 Answer
1

You need to import the RouterTestingModule in your test's module declaration. The same with all material components you are using. Either also import the MatButtonModule in your test or mock all used components and directives as described in this SO answer. Unit tests have their own module declaration, so that they can be tested in isolation. This means, that you need to import all dependencies again or mock them.

RouterTestingModule

MatButtonModule

Another option is to use NO_ERRORS_SCHEMA but I would not recommend this. This will only work in cases where you do not use any logic from your imports.

NO_ERRORS_SCHEMA

describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
schemas: [NO_ERRORS_SCHEMA]
}).compileComponents();
}));