Angular2 unit testing error: Can't bind to 'routerLink' since it isn't a known property of 'a'

Zurab-D

I'm trying to manage with unit testing (karma, jasmine) and I'm getting an error:

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

I have not even changed *.spec.ts file that was created by angular-cli...

Here are my files:

user-list.component.html

<ul>
  <li *ngFor="let user of users">
    <a [routerLink]="user._id" (click)="userClicked(user)">{{user.fullName}}</a>
  </li>
</ul>

<router-outlet></router-outlet>

user-list.component.ts

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

import { IUser, User } from '../../../interfaces/user';
import { UsersService } from '../../../services/users.service';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UsersListComponent implements OnInit {

  users: IUser[] = [];

  constructor(private usersService: UsersService, private router: Router) { }

  ngOnInit() {
    this.usersService.getAll()
      .subscribe(users => {
        this.users = users.sort(...).map(...);
      });

  }

  userClicked(user) {
    this.usersService.setCurrentUser(user);
  }

  clickXBtn(user) {
    this.usersService
        .deleteUser(user)
        .subscribe(...);
  }

}

user-list.component.spec.ts

/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

import { UsersListComponent } from './user-list.component';

describe('UsersListComponent', () => {
  let component: UsersListComponent;
  let fixture: ComponentFixture<UsersListComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ UsersListComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(UsersListComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

What should I change? How to make it work?

mickdev

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

To resolve your problem, try to stub the RouterLink https://angular.io/docs/ts/latest/guide/testing.html#!#router-link-stub

@Directive({
  selector: '[routerLink]',
  host: {
    '(click)': 'onClick()'
  }
})
export class RouterLinkStubDirective {
  @Input('routerLink') linkParams: any;
  navigatedTo: any = null;

  onClick() {
    this.navigatedTo = this.linkParams;
  }
}

And use the stubbed RouterLink in your test

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Unit test Angular with Jasmine and Karma, Error:Can't bind to 'xxx' since it isn't a known property of 'xxxxxx'.

Can't bind to 'formControl' since it isn't a known property of 'input' - Angular2 Material Autocomplete issue

Can't bind to 'routerLink' since it isn't a known property

angular2 testing: Can't bind to 'ngModel' since it isn't a known property of 'input'

Angular2 Can't bind to DIRECTIVE since it isn't a known property of element

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

Angular2 : Can't bind to 'formGroup' since it isn't a known property of 'form'

Can't bind to 'for' since it isn't a known native property angular2

Angular2 Exception: Can't bind to 'routerLink' since it isn't a known native property

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

Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'

Angular2 Testing - Failed: Uncaught (in promise): Error: Template parse errors: Can't bind to 'message' since it isn't a known property of

Can't bind to 'routerLink' since it isn't a known property of 'a'. ("<header id="header">

Getting Can't bind to 'routerLink' since it isn't a known property of 'a'. error in spite of referencing router moudule

Angular 6: Failed: Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'. (

Angular 7 and can't bind to 'routerlink' since it isn't a known property of 'a'

Error: Can't bind to 'ngModel' since it isn't a known property of

Angular 7 testing: "Can't bind to formGroup since it isn't a known property of form"

Angular2 : Can't bind to 'ngPluralCase' since it isn't a known property of 'x'

Angular 2 *ngFor error: Can't bind to 'menuitemtype' since it isn't a known property of 'div'

Angular Can't bind to 'dirUnless' since it isn't a known property

Can't bind to '(ngModel' since it isn't a known property of 'input' in angular unit test case

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

Can't bind to 'routerlink' since it isn't a known property of 'a' despite declaring RouterModule in app.module

Angular Kendo Grid Unit tests, Can't bind to 'data' since it isn't a known property of

Can't bind to 'routerlink' since it isn't a known property of 'a' when doing the tutorial

Angular unit test error - Can't bind to 'formGroup' since it isn't a known property of 'form'

Can't bind to 'routerLink' since it isn't a known property even after importing RouterModule

Error: Can't bind to 'routerLink' since it isn't a known property of 'a'. with standalone component in Angular 15