angular - Kiểm tra với Karma - Không thể liên kết với 'routerLink' vì nó không phải là một thuộc tính đã biết của

Tôi mới bắt đầu thử nghiệm với Karma/Jasmine trong ứng dụng Angular 6 của mình và có thể cần sự giúp đỡ với một trong những lỗi phổ biến nhất của mình.

Đó là việc sử dụng và cấu hình 'RouterLink' trong template của tôi. Tôi không gặp lỗi khi chạy ứng dụng, nhưng khi chạy kiểm thử, tôi nhận được lỗi:

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

Tôi không thể cấu hình đúng file spec của mình. Có ý tưởng gì về cách tôi có thể chỉnh sửa cấu hình để khắc phục lỗi đó khi tôi chạy các bài kiểm tra không? Tôi không chắc liệu đó là vấn đề với file app.module của tôi, component hay file kiểm tra.

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

Đây là dòng trong HTML mà nó đang bắt:

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

Thành phần của tôi trông như sau:

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!

Câu trả lời #1

Bạn nên thêm RouterTestingModule vào các imports trong file spec của bạn. Điều đó sẽ cho phép Angular nhận biết directive routerLink của bạn. Cũng hãy xóa mảng providers.

Vui lòng tham khảo hướng dẫn này để biết thêm thông tin: https://codecraft.tv/courses/angular/unit-testing/routing/

Ngoài ra, nếu bạn không quan tâm đến việc "Kiểm thử" định tuyến bên trong component, bạn chỉ cần thêm NO_ERROR_SCHEMA vào phương thức configureTestingModule của bạn.

schemas: [NO_ERRORS_SCHEMA]

Câu trả lời #2

Đối với bất kỳ ai tình cờ gặp câu hỏi này như tôi: Mặc dù RouterTestingModule vẫn còn hoạt động, nhưng kể từ bản cập nhật Angular gần đây nó đã được đánh dấu là lỗi thời. Giải pháp mới dường như là:

Đối với các thành phần không độc lập, thêm 'RouterModule.forRoot([])' vào phần imports trong tệp spec của bạn, tức là

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

hoặc đối với các thành phần độc lập, thêm 'provideRouter([])' làm một provider trong tệp spec, tức là

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