无法测试Observable订阅内的组件行为？求解决方法

无法测试调用API服务并订阅返回结果的方法行为，方法代码如下：

verify(): void {
  this.state = VerifyState.VERIFYING;
  this.apiService.verify(this.formGroup.get('code').value).subscribe({
    next: () => {
      this.state = VerifyState.SUCCESS;
    },
    error: (err) => {
      if (err.status === 'some_error') {
        this.state = VerifyState.INVALID_OTP;
      }
    },
  });
}

调用verify方法时state会变为VERIFYING，API调用成功后应变为SUCCESS。测试代码如下：

it('should set state to VERIFYING and then SUCCESS on successful verification', () => {
  const apiService = spectator.inject(ApiService);
  jest.spyOn(apiService, 'verify').mockReturnValue(of(null));

  spectator.component.verify();

  expect(spectator.component.state).toBe(VerifyState.VERIFYING);

  spectator.detectChanges();

  expect(spectator.component.state).toBe(VerifyState.SUCCESS);
});

理论上代码应该可行，但订阅回调中的逻辑未执行（如console.log无输出），尝试过fakeAsync+tick、fixture.whenStable及多种服务提供方式（mocks: [ApiService]或自定义providers配置）均无效，询问遗漏的关键点。

• 手动触发RxJS订阅回调执行：即使of(null)是同步Observable，Angular测试环境中可能需要显式触发微任务队列完成。用fakeAsync包裹测试，并在调用verify后执行tick()，确保订阅回调执行：

  it('should set state to VERIFYING and then SUCCESS on successful verification', fakeAsync(() => {
    const apiService = spectator.inject(ApiService);
    jest.spyOn(apiService, 'verify').mockReturnValue(of(null));
  
    spectator.component.verify();
    expect(spectator.component.state).toBe(VerifyState.VERIFYING);
  
    tick(); // 触发所有待处理的RxJS订阅回调
    spectator.detectChanges();
  
    expect(spectator.component.state).toBe(VerifyState.SUCCESS);
  }));
  

• 验证ApiService的mock是否生效：添加断言确认verify方法被正确调用，避免mock未替换原方法：

  expect(apiService.verify).toHaveBeenCalled();
  

• 确保FormGroup的code值可用：测试中this.formGroup.get('code').value可能为undefined，导致逻辑异常。提前mockformGroup.get('code')返回有效值：

  jest.spyOn(spectator.component.formGroup, 'get')
    .mockReturnValue({ value: 'valid-code' } as AbstractControl);
  

• 使用Spectator的mockProvider简化配置：如果用@ngneat/spectator，直接用mockProvider配置ApiService的mock，避免手动spyOn可能的问题：

  const spectator = createComponent({
    component: YourComponent,
    providers: [
      mockProvider(ApiService, {
        verify: jest.fn().mockReturnValue(of(null))
      })
    ]
  });
  

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