我刚开始在 Angular 6 应用程序中使用 Karma/Jasmine 进行测试,并且需要一些帮助来解决我最常见的故障之一。
就是我的模板中“RouterLink”的使用和配置。我运行应用程序没有错误,但在运行测试时,我收到错误:
Can't bind to 'routerLink' since it isn't a known property of 'a'.
我无法正确配置我的规范文件。关于如何修复配置以在运行测试时修复该错误有什么想法吗?我不确定这是否是我的 app.module 文件、组件或测试文件的问题。
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();
});
});
这是它捕获的 html 中的行:
<a [routerLink]="['/sites', current_mp.siteId]" ><i class='fa fa-ban'></i> Cancel</a>
我的组件看起来像:
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!
您应该将 RouterTestingModule 添加到规范文件中的导入中。 这应该允许 Angular 识别你的 routerLink 指令。 同时清除提供者数组。
更多信息请参考本教程: https://codecraft.tv/courses/angular/unit-testing/routing/
此外,如果对“测试”组件内的路由不感兴趣,您可以简单地将 NO_ERROR_SCHEMA 添加到您的configureTestingModule 方法中。
schemas: [NO_ERRORS_SCHEMA]
对于像我一样偶然发现这个问题的人: 虽然 RouterTestingModule 仍然有效,但自从最近的 Angular 更新以来,它现在被标记为已弃用。 新的解决方案似乎是:
对于非独立组件,请将以下“RouterModule.forRoot([])”添加到规范文件中的导入中,即
await TestBed.configureTestingModule({
imports: [RouterModule.forRoot([])],
declarations: [MyNewNonStandaloneComponent]
})
.compileComponents();
或者对于独立组件,在规范文件中添加“provideRouter([])”作为提供程序,即
await TestBed.configureTestingModule({
providers: [provideRouter([])],
declarations: [MyNewStandaloneComponent]
})
.compileComponents();