問題
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>
モック化されたコンポーネントを Spec-File に追加するのを忘れていました:
TestBed.configureTestingModule({
declarations: [
AsanasFilterComponent,
MockComponent(FilterStickyHeaderComponent),
MockComponent(FilterFooterComponent),
// MockComponent(AppChipComponent) is missing here
],
}).compileComponents();
コンポーネントのモックにng-mocksを使用しています。
望ましい解決策
テンプレートで使用されているコンポーネントを Test Config に手動で追加しなければならないことは、開発プロセスにメリットがないと思います: 使用しているコンポーネントを現在のモジュールにインポートするのを忘れた場合 (またはタイプミスの場合)、ビルドとにかく失敗します。(だから使いたくないCUSTOM_ELEMENTS_SCHEMA)
テンプレートで使用するすべてのコンポーネントを宣言配列にモックとして自動的に追加する方法はありますか?
または、それを行わない (そして手動で追加し続ける) 理由はありますか?