angular - Testaus Karmalla - Ei voi sitoa 'routerLink'-ominaisuuteen, koska se ei ole tunnettu ominaisuus

Olen uusi testaamisessa Karma/Jasminen kanssa Angular 6 -sovelluksessani ja tarvitsisin apua yhden yleisimmän epäonnistumiseni kanssa.

Kyse on 'RouterLinkin' käytöstä ja konfiguroinnista mallissani. Sovellusta ajettaessa minulla ei ole virheitä, mutta testien suorittamisen yhteydessä saan virheen:

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

En pysty aivan oikein määrittämään spec-tiedostoani. Onko sinulla ajatuksia siitä, miten voisin korjata määritykseni, jotta tuo virhe ei ilmene testieni suorittamisen yhteydessä? En ole varma, onko ongelma app.module-tiedostossani, komponentissani vai testitiedostossani.

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

Tämä on rivi HTML:ssä, jonka se tarttuu:

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

Komponenttini näyttää tältä:

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!

Vastaus #1

Sinun tulisi lisätä RouterTestingModule importteihisi spec-tiedostossasi. Sen pitäisi sallia Angularin tunnistaa routerLink-direktiivisi. Tyhjennä myös providers-taulukko.

Viittaa tähän opetusohjelmaan saadaksesi lisätietoja: https://codecraft.tv/courses/angular/unit-testing/routing/

Myös jos et ole kiinnostunut "testaamaan" komponentin sisäistä reititystä, voit yksinkertaisesti lisätä NO_ERROR_SCHEMA configureTestingModule-metodiisi.

schemas: [NO_ERRORS_SCHEMA]

Vastaus #2

Kaikille, jotka kompastuvat tähän kysymykseen kuten minä: Vaikka RouterTestingModule toimii edelleen, se on viimeisimmän Angular-päivityksen myötä nyt merkitty vanhentuneeksi. Uusi ratkaisu näyttää olevan:

Ei-itsenäisille komponenteille lisää 'RouterModule.forRoot([])' seuraavasti tuontilistallesi testitiedostossa, eli

await TestBed.configureTestingModule({
      imports: [RouterModule.forRoot([])],
      declarations: [MyNewNonStandaloneComponent]
})
.compileComponents();

tai erillisiä komponentteja varten lisää 'provideRouter([])' tarjoajana spesifikaatiotiedostossa, eli

await TestBed.configureTestingModule({
      providers: [provideRouter([])],
      declarations: [MyNewStandaloneComponent]      
})
.compileComponents();