[解決済み] Error.を修正する方法 No value accessor for form control with name' in Angular Unit Test?

質問内容

ngModelを使用したカスタムコンポーネントを使用するコンポーネントのテストに失敗しました。

HTMLコードは以下のようになります（詳しくは下のリプロダクトをご覧ください）。

<custom-control name="formCode" [(ngModel)]="testValue"></custom-control>

このコードは私のアプリでは動作していますが、私のテストでは以下のエラーで失敗しています。

Uncaught Error: Uncaught (in promise)。Error: 名前: 'formCode' を持つフォームコントロールの値アクセサがありません。

エラーです。名前: 'formCode' を持つフォームコントロールの値アクセッサはありません。

テストはjasmineで実行されます

様々なインポートを試しましたが、どれも私の問題を解決していないようです。

再現コードはこちらです。 https://stackblitz.com/edit/angular-test-ng-model

解決方法は？

CustomControlComponentをテストでモック化していることが原因です。package.jsonに@angular/materialとその依存関係をインストールし、以下のspecファイルを使用してください。テストは成功します。

https://stackblitz.com/edit/angular-test-ng-model-vsk5re

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, DefaultValueAccessor, ControlValueAccessor } from '@angular/forms';
// import { MockComponent } from 'ng2-mock-component';
import{MatFormFieldModule, MatInputModule} from '@angular/material';

import { ParentControlComponent } from './parent-control';
import {CustomControlComponent} from '../custom-control/custom-control';

describe('ParentControlComponent', () => {
    let component: ParentControlComponent;
    let fixture: ComponentFixture<ParentControlComponent>;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [
              CustomControlComponent,
              ParentControlComponent,
                // MockComponent({ selector: 'custom-control' }),
            ],
            imports: [
                BrowserAnimationsModule,
                FormsModule,
                ReactiveFormsModule,
                MatFormFieldModule,
                MatInputModule
            ],
            providers: [
            ]
        })
            .compileComponents();

        fixture = TestBed.createComponent(ParentControlComponent);

        component = fixture.componentInstance;

        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});