Angular 单元测试错误 : No component factory found for Component. Did you add it to @NgModule.entryComponents

Question

我正在尝试自学如何使用 Angular 编码，但我遇到了问题。我正在为自己创建一个应用程序，并且刚刚实现了 Angular Material Dialog。我把它放在包装服务中，一切看起来都很好。所以在一个组件中，我调用 Wrapper Service 来引发这样的模态......

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);
  });
});

这个测试失败了!出现错误“错误:未找到 ChangeAssignmentComponent 的组件工厂。您是否将其添加到 @NgModule.entryComponents” - 这看起来很奇怪，因为在我的 app.module 文件中我在 entryComponents 和声明数组中声明了“ChangeAssignmentComponent”？我很困惑 - 有谁知道我可能做错了什么？

Answer 1

测试就是怀疑。

严肃一点，我来回答你。

在 Angular 中，您的组件由模块处理。当你使用 Material dialogs 和 snackers 时，你实际上使用了 CDK 的一个特性，它被称为 Portal .这允许您动态创建组件。

但是当您这样做时，您必须将它们添加到模块的 entryComponents 中。你在你的模块中做了它，所以你也应该在你的测试中这样做。

语法是

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