Angular OnPush组件单元测试：如何确保测试真实可靠？

问题背景 #

我在自己的应用里有个组件，通过服务异步拉取数据然后展示给用户。一开始用ChangeDetectionStrategy.Default策略时，测试里调用fixture.detectChanges()就能正常验证数据展示。

改成OnPush策略后，组件实际运行时因为没触发变更检测，数据更不了新，但测试居然还能过——因为测试里的fixture.detectChanges()帮组件触发了变更检测，导致测试和实际行为完全脱节。

修复组件的办法是在订阅回调里手动调用changeDetectorRef.detectChanges()，但把测试里的fixture.detectChanges()删掉后，测试又失败了。目前找到的办法是手动调用component.ngOnInit()，但感觉太生硬，不够优雅。

想请教：不用手动调用component.ngOnInit()，怎么让单元测试真实反映OnPush策略下组件的实际行为，只有组件正确处理了变更检测时测试才通过？

解决方法 #

要让测试真实反映OnPush的实际行为，核心就是别让测试主动帮组件触发变更检测，得让组件自己来做这件事——这样只有组件代码里正确处理了变更检测逻辑，测试才能通过，完全匹配真实运行时的情况。

1. 初始化测试时禁用自动变更检测 #

在测试的beforeEach里，创建组件后别立刻调用fixture.detectChanges()，手动把控初始化流程：

beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [你的组件类],
    providers: [你的数据服务类]
  })
  .overrideComponent(你的组件类, {
    set: { changeDetection: ChangeDetectionStrategy.OnPush }
  })
  .compileComponents();

  fixture = TestBed.createComponent(你的组件类);
  component = fixture.componentInstance;
  // 这里不要调用 fixture.detectChanges()
});

2. 用Angular生命周期机制触发初始化（替代直接调用ngOnInit） #

别直接调用component.ngOnInit()，而是通过组件的变更检测引用触发初始化流程，更贴近真实场景：

it('异步获取数据后应该正确展示', () => {
  const mockData = { id: 1, name: '测试数据' };
  const dataService = TestBed.inject(你的数据服务类);
  
  // 模拟服务异步返回数据
  spyOn(dataService, 'fetchData').and.returnValue(of(mockData).pipe(delay(10)));

  // 手动触发组件初始化流程
  fixture.componentRef.changeDetectorRef.markForCheck();
  fixture.componentRef.instance.ngOnInit();

  // 等待异步操作完成
  fixture.whenStable().then(() => {
    // 绝对不要调用 fixture.detectChanges()，完全靠组件自己触发变更检测
    const displayElement = fixture.nativeElement.querySelector('.数据展示元素选择器');
    expect(displayElement.textContent).toContain(mockData.name);
  });
});

3. 用fakeAsync/tick简化异步测试 #

可以用Angular的fakeAsync和tick替代whenStable()，让测试代码更简洁直观：

it('异步获取数据后应该正确展示', fakeAsync(() => {
  const mockData = { id: 1, name: '测试数据' };
  const dataService = TestBed.inject(你的数据服务类);
  
  spyOn(dataService, 'fetchData').and.returnValue(of(mockData).pipe(delay(10)));

  fixture.componentRef.changeDetectorRef.markForCheck();
  fixture.componentRef.instance.ngOnInit();

  tick(10); // 快进时间到异步操作完成

  // 同样不调用 fixture.detectChanges()
  const displayElement = fixture.nativeElement.querySelector('.数据展示元素选择器');
  expect(displayElement.textContent).toContain(mockData.name);
}));

4. 验证逻辑 #

如果组件在订阅回调里正确调用了changeDetectorRef.detectChanges()或者markForCheck()，异步数据返回后组件会自动更新视图，测试就能通过；如果组件没处理这部分逻辑，视图不会更新，测试就会失败——完美匹配实际运行时的行为。

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