Question

我决定尝试Angular的测试功能。我已经有一个应用程序，因此我只运行了ng test，并立即出现了我不理解的错误。这是我第一次运行Angular测试。

以下是输出：

AppComponent should create the app
Failed: Template parse errors:
Can't bind to 'routerLink' since it isn't a known property of 'button'. ("<mat-toolbar color="primary">
    <mat-toolbar-row>
        <button mat-button [ERROR ->][routerLink]="'/'">{{title}}</button>
        <button mat-button (click)="login()" *ngIf="!user">Logi"): ng:///DynamicTestModule/AppComponent.html@2:27
'mat-toolbar-row' is not a known element:
1. If 'mat-toolbar-row' is an Angular component, then verify that it is part of this module.
2. If 'mat-toolbar-row' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<mat-toolbar color="primary">

这是app.component.html中的HTML代码段：

<button mat-button [routerLink]="[ ... ]">{{title}}</button>

我肯定将RouterModule导入了app.module.ts：

@NgModule({
    declarations: [
        ...
    ],
    imports: [
        RouterModule.forRoot(routes),
        ...
    ],
    ...
})
export class AppModule {}

Answer 1

您需要在测试的模块声明中导入RouterTestingModule。与您正在使用的所有材料组件相同。也可以在测试中导入MatButtonModule或模拟SO answer中所述的所有使用的组件和指令。单元测试有其自己的模块声明，因此可以单独进行测试。这意味着，您需要再次导入所有依赖项或模拟它们。

另一种选择是使用NO_ERRORS_SCHEMA，但我不建议这样做。只有在您不使用导入中的任何逻辑的情况下，这才起作用。

describe('AppComponent', () => {
beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [
      AppComponent
    ],
    schemas: [NO_ERRORS_SCHEMA]
  }).compileComponents();
}));

10个规格，10个失败-无法绑定到“ routerLink”，因为它不是“按钮”的已知属性

1 个答案: