独立组件中提供的服务在Jest单元测试中的Mock问题

问题背景 #

服务NavbarFacadeService未在根级提供，而是声明在独立组件NavbarDrawerComponent的providers数组中，目的是组件销毁时自动清理服务。但单元测试中，即使在TestBed的providers里配置了Mock实例，组件依然使用真实服务。

组件与服务代码：

@Injectable()
export class NavbarFacadeService extends AbstractStateFacade<IDrawerState, DrawerStateActions> implements OnDestroy {
   // ... 服务逻辑
}

@Component({
  selector: 'navbar-drawer',
  standalone: true,
  imports: [],
  providers: [NavbarFacadeService], // 组件级提供服务
  template: `
     <!-- 组件模板 -->
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NavbarDrawerComponent implements AfterViewInit {
   // ... 组件逻辑
}

测试中尝试的Mock代码（无效）：

const mockNavbarFacadeService = MockService(NavbarFacadeService, {
  // Mock方法/属性
});

beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [NavbarDrawerComponent],
      providers: [
        { provide: NavbarFacadeService, useValue: mockNavbarFacadeService },
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(NavbarDrawerComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
});

原因分析 #

独立组件的providers属于组件级注入器，优先级高于TestBed根注入器的配置。直接在TestBed.providers中声明Mock，不会覆盖组件自身注入器中的服务实例。

正确解决方案 #

使用TestBed.overrideComponent()方法，显式覆盖NavbarDrawerComponent的providers配置，替换为Mock实例：

const mockNavbarFacadeService = MockService(NavbarFacadeService, {
  // 配置Mock的方法或属性
});

beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [NavbarDrawerComponent]
      // 无需在根providers中声明
    })
    // 关键：覆盖组件的providers配置
    .overrideComponent(NavbarDrawerComponent, {
      set: {
        providers: [
          { provide: NavbarFacadeService, useValue: mockNavbarFacadeService }
        ]
      }
    })
    .compileComponents();

    fixture = TestBed.createComponent(NavbarDrawerComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
});

这样配置后，组件会使用Mock的服务实例，而非真实实现。

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