Angular2單元測試錯誤：由於它不是'a'的已知屬性，因此無法綁定到'routerLink'

Question

我試圖用單元測試（karma，jasmine）來管理，並且出現錯誤：

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

我還沒有改變，是由角CLI創建的* .spec.ts文件...

這裏是我的文件：

用戶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> 

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

} 

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

我應該怎麼改？如何使它工作？

Answer 1

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

可能的複製解決您的問題，嘗試存根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; 
    } 
} 

並在測試使用存根RouterLink