web-dev-qa-db-ja.com

Angularユニットテストエラー：コンポーネントのコンポーネントファクトリが見つかりません。@ NgModule.entryComponentsに追加しましたか？

Angularでコーディングする方法を自分に教えようとしています。問題があります。自分用のアプリを作成していて、Angular Material Dialog。これをラッパーサービスに配置すると、すべてが正常に見えるので、コンポーネントでWrapperサービスを呼び出して、次のようなモーダルを発生させます...

public assignInstrument(instrument: any): void {
    this.modalDialogWrapperService.openAssignmentWindow({
        product: 'instrument',
        type: instrument.type,
        serial: instrument.serial,
        id: instrument.id
  });
}

サービスメソッドは次のようになります。モーダルウィンドウで発生させたいコンポーネントの名前を渡していることに注意してください。

openAssignmentWindow(instrument) {
    const dialogRef = this.dialog.open(ChangeAssignmentComponent, {
        data: instrument,
        width: '693px',
        height: '498px'
        });
    dialogRef.afterClosed().subscribe(() => {});
    });
}

すべてがうまくいきます！しかし、優れた開発者としてユニットテストを作成する必要があります...コンポーネントをテストするには、次のテストを行います（テストファイルの印象を与えるために、サービスと他のコードをモックする方法を含めました）。

let modalDialogWrapperServiceSpy: jasmine.SpyObj<ModalDialogWrapperService>;
    const mockModalDialogWrapperService = jasmine.createSpyObj('ModalDialogWrapperService', ['openAssignmentWindow']);
    mockModalDialogWrapperService.openAssignmentWindow.and.returnValue({});

TestBed.configureTestingModule({
    imports: [...],
    declarations: [...],
    providers: [{
      provide: ModalDialogWrapperService,
      useValue: mockModalDialogWrapperService
    }]
}).compileComponents();

beforeEach(() => {
    fixture = TestBed.createComponent(InstrumentsPageComponent);
    modalDialogWrapperServiceSpy = TestBed.get(ModalDialogWrapperService);
    component = fixture.componentInstance;
    fixture.detectChanges();
 })

describe('assignInstrument', () => {
  it('should call the Modal Dialog Service', () => {
    component.assignInstrument({});
    expect(modalDialogWrapperServiceSpy.openAssignmentWindow).toHaveBeenCalledTimes(1);
  });
});

この1つのテストは失敗します。 「エラー：ChangeAssignmentComponentのコンポーネントファクトリが見つかりません。@ NgModule.entryComponentsに追加しましたか？」というエラーが表示されます。これは私のapp.moduleファイルのように奇妙に見えますが、entryComponentsと宣言配列で「ChangeAssignmentComponent」を宣言していますか？私は混乱しています-私が間違っている可能性があることを誰かが知っていますか？

angularunit-testingjasmine
14
NewToAngular

Testintgは疑っています。

もっと真剣に、お答えしましょう。

Angularでは、コンポーネントはモジュールによって処理されます。 Materialダイアログとスナッカーを使用するとき、実際には Portal と呼ばれるCDKの機能を使用します。これにより、コンポーネントを動的に作成できます。

しかしそうするときは、それらをモジュールのentryComponentsに追加する必要があります。これはモジュールで行ったので、テストでも行う必要があります。

構文は

TestBed
  .configureTestingModule(...)
  .overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [YourComponent] } });
28
user4676340

これが行われるはずの場所が2つあります。..エントリコンポーネントと宣言（テストモジュールの構成中）.

  TestBed
  .configureTestingModule({
              declarations: [YourComponent],
   })
  .overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [YourComponent] } });
7
Ajay Reddy

誰かがBrowserDynamicTestingModuleを見つけるのに苦労している場合は、代わりにBrowserModuleを使用してください。

   TestBed
  .configureTestingModule(...)
  .overrideModule(BrowserModule, { set: { entryComponents: [YourComponent] } });
0
Adam Ostapkiewicz