如何在单元测试中验证订阅回调触发后的变量值变更？

• 你的spy配置错误，使用callThrough()会调用apiService.postStuff的真实实现，如果该方法是真实发起HTTP请求的逻辑，测试环境中没有后端响应，Observable永远不会触发next回调，subscribe内的赋值逻辑自然不会执行，variable始终为false。
• 即使你添加了tick()，也只是清空了当前的异步任务队列，但没有后端返回的前提下根本没有需要执行的赋值回调，所以没有任何效果。

单元测试不需要依赖真实接口能力，直接模拟postStuff返回一个立即发射值的Observable即可：

import { of } from 'rxjs';

it('should call postStuff and update variable correctly', fakeAsync(() => {
  // 替换callThrough，模拟返回成功的Observable，自定义你需要的返回结果
  spyOn(apiService, 'postStuff').and.returnValue(of({ /* 模拟接口返回的res数据 */ }));
  component.postStuff();
  expect(apiService.postStuff).toHaveBeenCalled();
  tick(); // 触发Observable的回调执行
  expect(component.variable).toBeTrue();
}));

提示：of()创建的是同步发射值的Observable，部分场景下即使不加tick()也能通过断言，但建议保留tick()统一处理异步逻辑，避免测试用例出现偶现失败的情况。

如果你需要验证真实的HTTP请求逻辑，使用Angular提供的HttpTestingController捕获请求并手动返回响应：

import { HttpTestingController } from '@angular/common/http/testing';

it('should call postStuff and update variable correctly', fakeAsync(() => {
  const httpTestingController = TestBed.inject(HttpTestingController);
  spyOn(apiService, 'postStuff').and.callThrough();
  
  component.postStuff();
  expect(apiService.postStuff).toHaveBeenCalled();

  // 捕获发出去的POST请求，手动返回响应
  const req = httpTestingController.expectOne('你的接口请求地址');
  expect(req.request.method).toBe('POST');
  req.flush({ /* 模拟接口返回的res数据 */ });

  tick();
  expect(component.variable).toBeTrue();
  httpTestingController.verify();
}));

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