独立组件单元测试：如何模拟非独立依赖组件？

我有一个Angular独立组件，它通过imports数组导入了LoaderModule、SharedModule等非独立模块来引入依赖。现在要为这个组件写单元测试，已经准备好所有需要的桩组件（stub components），但不清楚如何添加这些模拟依赖——目前测试里只能导入模块。请问是否需要创建包含所有桩依赖的模块，再加入独立组件的imports数组中？

不需要局限于创建桩模块，有两种更灵活的方案可选：

方案1：直接导入桩组件（Angular 14+ 适用） #

Angular 14及以上版本支持在独立组件的测试配置中，直接将桩组件加入imports数组，无需包裹成模块。这种方式更轻量化，适合依赖不多的场景：

TestBed.configureTestingModule({
  imports: [
    // 你的目标独立组件
    YourStandaloneComponent,
    // 直接导入所有需要的桩组件
    LoaderStubComponent,
    ButtonStubComponent,
    IconStubComponent
  ]
}).compileComponents();

方案2：创建统一的桩模块（适合依赖较多的场景） #

如果需要模拟的组件数量多，或者多个测试用例都需要复用这些桩依赖，可以创建一个桩模块，把所有桩组件声明并导出，之后在测试中导入这个模块即可：

第一步：创建桩模块 #

@NgModule({
  declarations: [
    LoaderStubComponent,
    ButtonStubComponent,
    IconStubComponent
  ],
  exports: [
    LoaderStubComponent,
    ButtonStubComponent,
    IconStubComponent
  ]
})
export class StubbedSharedModule {}

第二步：在测试中导入桩模块 #

TestBed.configureTestingModule({
  imports: [
    YourStandaloneComponent,
    StubbedSharedModule
  ]
}).compileComponents();

两种方案都能解决你的问题，根据依赖数量和复用需求选择即可。

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