Angular 8测试：如何强制刷新EventEmitter以通过断言？

你的测试失败的核心原因很明确：你在订阅EventEmitter之前就调用了emit('B')。Angular的EventEmitter本质是RxJS Subject的子类，而Subject属于"hot" Observable——它不会回溯之前发出的值，只有在订阅之后发出的内容才会被观察者接收到。对比之下，of('A')是"cold" Observable，订阅时会同步把所有值推送给观察者，所以a能拿到值。

下面给你两种针对性的解决方案，分别对应简化测试场景和实际使用async pipe的组件测试场景：

1. 简化测试场景：调整emit与订阅的顺序 #

直接把subscribe调用移到emit之前，确保订阅先于值的发送：

it('should pass', fakeAsync(() => { 
  let a; 
  const eventEmitter1 = of('A'); 
  eventEmitter1.subscribe(v => a = v); 
  let b; 
  const eventEmitter2 = new EventEmitter(); 
  // 先订阅，再发送值
  eventEmitter2.subscribe(v => b = v); 
  eventEmitter2.emit('B'); 
  tick(); 
  flush(); 
  console.log(a); // 输出A 
  console.log(b); // 输出B
  expect(a).toBe('A'); 
  expect(b).toBe('B'); // 测试通过
}));

这里tick()和flush()其实可以去掉，因为EventEmitter的emit是同步操作，不需要等待异步队列。

2. 实际组件测试（结合async pipe） #

在使用async pipe的场景中，async pipe会在组件变更检测时自动订阅目标Observable/EventEmitter。所以你需要确保：

• 先触发变更检测，让async pipe完成订阅
• 再调用emit发送值
• 最后再次触发变更检测，让async pipe更新视图

示例代码如下：

it('should display the emitted value from async pipe', fakeAsync(() => {
  const fixture = TestBed.createComponent(YourComponent);
  const component = fixture.componentInstance;
  
  // 第一次变更检测：初始化组件，async pipe完成对EventEmitter的订阅
  fixture.detectChanges();
  
  // 此时发送值，async pipe已经订阅，能捕获到
  component.yourOutputEmitter.emit('B');
  
  // 第二次变更检测：让async pipe更新视图内容
  fixture.detectChanges();
  
  // 验证视图是否正确显示值
  const targetElement = fixture.nativeElement.querySelector('.your-element-class');
  expect(targetElement.textContent.trim()).toBe('B');
}));

额外技巧：需要回溯值的场景 #

如果你的业务场景需要让晚订阅的观察者（比如延迟初始化的async pipe）也能拿到之前发出的值，可以用ReplaySubject(1)替代EventEmitter（测试中临时替换即可）。ReplaySubject会缓存最近的1个值，新订阅的观察者会立刻收到缓存值：

it('should catch emitted value even with delayed subscription', fakeAsync(() => {
  const fixture = TestBed.createComponent(YourComponent);
  const component = fixture.componentInstance;
  
  // 用ReplaySubject替换原EventEmitter，缓存1个值
  component.yourOutputEmitter = new ReplaySubject(1) as unknown as EventEmitter<string>;
  
  // 先发送值
  component.yourOutputEmitter.emit('B');
  
  // 触发变更检测，async pipe订阅后会拿到缓存的'B'
  fixture.detectChanges();
  
  const targetElement = fixture.nativeElement.querySelector('.your-element-class');
  expect(targetElement.textContent.trim()).toBe('B');
}));

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