单元测试中如何先设置输入值再触发afterNextRender执行？

问题分析 #

测试阻塞失败的核心原因是：组件构造函数中注册的afterNextRender回调，会在第一次组件渲染完成后执行。如果测试中在触发渲染前没有设置disabled输入值，回调执行时disabled()仍为默认的false，导致myStream不会发出值，await firstValueFrom就会一直等待直到超时。

解决方案 #

调整测试流程，确保先设置输入值，再触发组件渲染，让afterNextRender回调在输入值生效后执行：

修改后的测试代码 #

it('should emit "hello" when disabled is true', async () => {
  // 1. 先设置disabled输入为true（此时组件尚未渲染）
  fixture.componentRef.setInput('disabled', true);

  // 2. 触发组件渲染，渲染完成后自动执行afterNextRender的write回调
  fixture.detectChanges();

  // 3. 等待myStream发出第一个值
  const emittedValue = await firstValueFrom(component.myStream);

  // 验证结果
  expect(emittedValue).toBe('hello');
  expect(component.disabled()).toBe(true);
});

关键说明 #

• 避免在beforeEach中提前调用fixture.detectChanges()，否则会在设置输入前触发渲染和afterNextRender回调。
• fixture.detectChanges()会触发组件的变更检测和渲染流程，Angular会在这次渲染完成后执行构造函数中注册的afterNextRender回调，此时disabled已经被设置为true，符合预期逻辑。

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