自动模拟 Angular 个组件

Question

问题

在测试 Angular 组件时，我经常偶然发现以下错误消息：

'NG0304: 'app-chip' is not a known element:
1. If 'app-chip' is an Angular component, then verify that it is part of this module.
2. If 'app-chip' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'

原因

一般是因为我在模板中使用了一个组件（这里：<app-chip>）：

<div class="asanas-filter">
  <app-filter-sticky-header [optionIds]="['asanas']"> Asanas </app-filter-sticky-header>

  <div class="chips" *ngIf="asanas">
    <app-chip
      *ngFor="let asana of asanas"
      [label]="asana.label"
      [(model)]="model[asana.id]"
    ></app-chip>
  </div>
  <app-filter-footer [optionIds]="['asanas']" [groupOption]="true"></app-filter-footer>
</div>

忘记将模拟组件添加到规范文件中：

TestBed.configureTestingModule({
  declarations: [
    AsanasFilterComponent,
    MockComponent(FilterStickyHeaderComponent),
    MockComponent(FilterFooterComponent),
    // MockComponent(AppChipComponent) is missing here
  ],
}).compileComponents();

我正在使用 ng-mocks 模拟组件。

期望的解决方案

我认为，必须手动将模板中使用的组件添加到测试配置中对开发过程没有好处：如果我忘记将正在使用的组件导入当前模块（或者在打字错误），构建无论如何都会失败。（因此我不想使用 CUSTOM_ELEMENTS_SCHEMA）

有没有办法自动将我在模板中使用的所有组件作为 Mocks 添加到 declarations-Array 中？

或者有什么理由不这样做（并继续手动添加它们）？

Answer 1

您要找的是 MockBuilder.

有了它的帮助，你只需要一个组件和它的模块，其余的将默认自动模拟。

beforeEach(() => MockBuilder(AsanasFilterComponent, AsanasFilterModule));

如果 AsanasFilterModule 导入/声明 FilterStickyHeaderComponent、FilterFooterComponent 和 AppChipComponent，那么它们将被模拟。

这里的目标与避免 CUSTOM_ELEMENTS_SCHEMA 相同：如果开发人员从 AsanasFilterModule 中删除了声明或导入，则相关测试将因 [=11] 中缺少 mock 而失败=].

自动模拟 Angular 个组件

Auto-Mock Angular Components

angular

unit-testing

ng-mocks

问题

原因

期望的解决方案