如何在Angular单元测试中模拟动态导入返回的独立组件？

核心思路 #

要让动态import()返回ng-mocks生成的模拟组件，关键是在测试环境中拦截并替换动态导入的模块，让它返回包含MockComponent的对象，而非真实组件。

具体实现步骤 #

1. 生成HelpComponent的模拟类 #

用ng-mocks的MockComponent创建模拟组件，自动屏蔽原组件的@ViewChild、Router等依赖：

const MockHelpComponent = MockComponent(HelpComponent);

2. 拦截动态导入 #

根据你使用的测试框架，替换动态导入的返回值：

Jest环境写法

// 在测试文件顶部或beforeAll中执行
jest.mock('@myorg/shared-feature-help', () => ({
  HelpComponent: MockHelpComponent,
}));

Jasmine+Karma环境写法

beforeEach(() => {
  // 覆盖模块导出，确保动态import返回模拟组件
  (window as any).require('@myorg/shared-feature-help') = {
    HelpComponent: MockHelpComponent,
  };

  TestBed.configureTestingModule({
    declarations: [YourButtonComponent],
    providers: [
      {
        provide: DrawerEventsService,
        useValue: jasmine.createSpyObj('DrawerEventsService', ['openDrawer', 'closeDrawer']),
      },
    ],
  });
});

3. 编写测试用例 #

此时动态导入会返回模拟组件，可正常测试按钮逻辑：

it('点击按钮时，若抽屉未打开则调用openDrawer传入模拟组件', async () => {
  const fixture = TestBed.createComponent(YourButtonComponent);
  const component = fixture.componentInstance;
  const drawerService = TestBed.inject(DrawerEventsService) as jasmine.SpyObj<DrawerEventsService>;
  
  // 设置抽屉初始状态为关闭
  drawerService.drawerOpen = false;

  await component.toggleHelpDrawer();
  await fixture.whenStable();

  expect(drawerService.openDrawer).toHaveBeenCalledWith(MockHelpComponent, component.drawerType);
  expect(drawerService.closeDrawer).not.toHaveBeenCalled();
});

it('点击按钮时，若抽屉已打开且类型匹配则调用closeDrawer', async () => {
  const fixture = TestBed.createComponent(YourButtonComponent);
  const component = fixture.componentInstance;
  const drawerService = TestBed.inject(DrawerEventsService) as jasmine.SpyObj<DrawerEventsService>;
  
  drawerService.drawerOpen = true;
  drawerService.drawerType = component.drawerType;

  await component.toggleHelpDrawer();
  await fixture.whenStable();

  expect(drawerService.closeDrawer).toHaveBeenCalled();
  expect(drawerService.openDrawer).not.toHaveBeenCalled();
});

关键注意事项 #

• 拦截动态导入的操作必须在组件实例化前执行，避免真实组件被加载。
• ng-mocks生成的模拟组件会自动忽略原组件的依赖逻辑，不会出现@ViewChild或Router相关的未定义错误。

内容的提问来源于stack exchange，提问作者Cody Pritchard