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

Posted 2023-03-07

【中文标题】10 个规范，10 个失败 - 无法绑定到“routerLink”，因为它不是“按钮”的已知属性 [重复]

【英文标题】：10 specs, 10 failures - Can't bind to 'routerLink' since it isn't a known property of 'button' [duplicate]

【发布时间】：2019-01-02 18:41:14

【问题描述】：

我决定尝试 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 sn-p：

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

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

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

【问题讨论】：

看看这个答案：***.com/a/44508549/4694994

@KimKern，我必须将app.module.ts 中的所有模块也导入app.component.spec.ts 吗？

不，只有那些被测试组件使用的。比导入更好的是嘲笑它们。您想单独测试您的组件。一些模块提供测试实现，例如RouterTestingModule。

【参考方案1】：

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

另一种选择是使用NO_ERRORS_SCHEMA，但我不建议这样做。这仅适用于您不使用导入中的任何逻辑的情况。

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