ng-mocks调用MockComponent模拟独立组件仍加载真实组件报错如何解决

在单元测试中，通过@ngneat/spectator编写了如下测试配置：

const createComponent = createComponentFactory({
    component: AppComponent,
    detectChanges: false,
    declarations: MockComponents(IgxToastComponent, NgxUiLoaderComponent),
    imports: [
        CommonModule, IgxToastModule, RouterTestingModule, NgxUiLoaderModule,
        MockComponent(HeaderComponent)
    ],
    mocks: [ToasterService]
})

其中HeaderComponent为独立组件，按照ng-mocks官方文档指引将MockComponent(HeaderComponent)加入了imports数组。但运行测试时，仍然触发了HeaderComponent的真实实例化流程：由于该组件依赖的其他未被当前测试使用/模拟的服务存在，测试抛出组件构造相关错误。
按照预期，使用MockComponent后应该会生成对应组件的模拟替身，即使组件模板中仍然存在<app-header>标签，也不会实际加载真实的HeaderComponent。
当前使用的ng-mocks版本为14.0.1，需要确认配置写法是否存在问题、如何调整。

当被测试的AppComponent本身为独立组件（standalone: true）时，Angular测试框架默认会优先使用组件装饰器中声明的原始imports依赖，测试模块根级别imports中声明的MockComponent(HeaderComponent)不会自动替换组件自身引入的真实HeaderComponent，因此会触发真实组件的实例化流程。
另外需要先排查一个基础问题：确认代码中导入的MockComponent/MockComponents方法来自ng-mocks包，而非@ngneat/spectator自带的mock工具——spectator自带的mock方法对Angular 14+独立组件的适配存在缺陷，无法正确生成独立组件的替身。

二选一即可：

方案1：使用ng-mocks的MockBuilder生成测试配置（推荐） #

直接用MockBuilder替换手动声明的测试模块配置，它会自动处理独立组件的依赖替换逻辑，避免依赖优先级问题：

const createComponent = createComponentFactory({
  component: AppComponent,
  detectChanges: false,
  ...MockBuilder(AppComponent)
    // 声明需要mock的组件、服务
    .mock(HeaderComponent)
    .mock(IgxToastComponent)
    .mock(NgxUiLoaderComponent)
    .mock(ToasterService)
    // 声明需要保留真实实现的依赖
    .keep(CommonModule)
    .keep(IgxToastModule)
    .keep(NgxUiLoaderModule)
    .keep(RouterTestingModule.withRoutes([]))
    .build()
});

方案2：手动override独立组件的原始依赖 #

如果不想引入MockBuilder，可以在测试初始化前通过TestBed.overrideComponent显式移除AppComponent原始依赖中的真实HeaderComponent，替换为mock版本：

const createComponent = createComponentFactory({
  component: AppComponent,
  detectChanges: false,
  declarations: MockComponents(IgxToastComponent, NgxUiLoaderComponent),
  imports: [
    CommonModule, IgxToastModule, RouterTestingModule, NgxUiLoaderModule,
    MockComponent(HeaderComponent)
  ],
  mocks: [ToasterService]
});

beforeEach(() => {
  TestBed.overrideComponent(AppComponent, {
    remove: {
      imports: [HeaderComponent]
    },
    add: {
      imports: [MockComponent(HeaderComponent)]
    }
  });
});

• 独立组件的mock版本只能放在imports数组中，不能放在declarations数组里，否则会触发Angular编译错误
• 如果HeaderComponent同时被其他导入的模块（如共享模块）导出，需要将对应模块中的HeaderComponent也做mock处理，否则真实组件的加载优先级会高于mock替身

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