使用 Karma 进行测试-无法绑定到“routerLink”，因为它不是

Question

I am new to testing with Karma/Jasmine in my Angular 6 app and could use some help with one of my most common failures.

It's the use and configuration of 'RouterLink' in my template. I have no error running the app, but upon running tests, I receive the error:

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

I can't quite configure my spec file correctly. Any thoughts on how I can fix my configurations to fix that error when I run my tests? I'm not sure if it's an issue with my app.module file, my component, or test file.

import { NavigationComponent } from '../navigation/navigation.component';
import { EditMonitoringPointComponent } from './edit-monitoring-point.component';
import { FormsModule, NgModel } from '@angular/forms';
import { RouterLink, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ FormsModule],
      declarations: [ EditMonitoringPointComponent, NavigationComponent],
      providers: [ RouterModule, RouterLink],
      // directives: [ROUTER_DIRECTIVES]

    })
    .compileComponents();
  }));

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

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

This is the line in the html that it's catching:

<a [routerLink]="['/sites', current_mp.siteId]" ><i class='fa fa-ban'></i> Cancel</a>

My component looks like:

import { ActivatedRoute, ParamMap, Router, RouterModule, RouterLink } from '@angular/router';
import { SiteService } from '../../services/site.service'
import { MonitoringPointService } from '../../services/monitoring-point.service'
import { AuthService } from '../../services/auth.service'
import { DeviceService } from '../../services/device.service';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-edit-monitoring-point',
  templateUrl: './edit-monitoring-point.component.html',
  styleUrls: ['./edit-monitoring-point.component.css']
})

export class EditMonitoringPointComponent implements OnInit {
//declare variables
}

constructor(private router: Router, private monitoringPointService: MonitoringPointService, public dialog: MatDialog, private deviceService: DeviceService, public siteService: SiteService, private route: ActivatedRoute, private SiteService: SiteService, private authService: AuthService) { }

ngOnInit() {
...
}

app.module.ts

import { NgModule } from '@angular/core';
import { 
RouterModule}  from '@angular/router';
import { AppRoutingModule, routingComponents } from './app-routing.module';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    routingComponents],
  imports: [
    RouterModule,
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,],
  providers: [
      {provide: HTTP_INTERCEPTORS,
      useClass: UnauthorizedResponseInterceptor,
      multi: true}]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);

Thank you so much!

Answer 1

You should add RouterTestingModule to your imports in your spec file. That should allow Angular to recognize your routerLink directive. Also clear the providers array.

Please refer to this tutorial for more information: https://codecraft.tv/courses/angular/unit-testing/routing/

Also if are not interested in "Testing" the routing inside the component you can simply add NO_ERROR_SCHEMA to your configureTestingModule method.

schemas: [NO_ERRORS_SCHEMA]