自动模拟角度组件

Question

问题

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

'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(

有没有一种方法可以自动将我在Template中使用的所有组件添加到声明Array作为Mocks

还是有理由不这样做(并继续手动添加(？

Answer 1

您要查找的是MockBuilder。

在它的帮助下，您只需要一个组件及其模块，其余部分将在默认情况下自动模拟。

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

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

这里的目标与避免CUSTOM_ELEMENTS_SCHEMA相同：如果开发人员从AsanasFilterModule中删除了声明或导入，那么由于MockBuilder中缺少mock，相关测试将失败。