如何在Jasmine中测试含Observable回调的async Promise方法？

我明白你遇到的问题——在测试依赖Observable异步操作的方法时，直接写断言会因为异步没完成而失败对吧？下面给你几个可行的解决方案，还会顺便优化一下你的代码写法，让测试更顺畅：

先优化你的updateData方法（可选但推荐） #

你现在用回调的方式处理异步结果，其实可以改成返回Promise，这样不管是组件调用还是测试都会更符合现代异步代码的风格：

import { firstValueFrom } from 'rxjs';

public async updateData(): Promise<any> {
  // 把Observable转换成Promise，等待请求完成
  const data = await firstValueFrom(this.httpClient.get('你的API地址'));
  // 在这里处理获取到的数据...
  return data; // 可以返回处理后的结果供调用方使用
}

组件里的调用也可以改成更清晰的异步写法：

// 组件中调用
async someMethod() {
  await this.myService.updateData();
  // 在这里执行后续操作...
}

方案1：用Angular的fakeAsync + tick（最常用） #

如果不想改动原方法，或者需要保持回调逻辑，Angular测试工具提供的fakeAsync和tick可以帮你同步模拟异步操作：

import { fakeAsync, tick, TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { MyService } from './my.service';

describe('MyService', () => {
  let service: MyService;
  let httpTestingController: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [MyService]
    });
    service = TestBed.inject(MyService);
    httpTestingController = TestBed.inject(HttpTestingController);
  });

  it('应该在Observable完成后调用回调', fakeAsync(() => {
    // 创建一个间谍函数来跟踪回调是否被调用
    const mockCallback = jasmine.createSpy('updateCallback');

    // 调用服务的方法
    service.updateData(mockCallback);

    // 匹配HTTP请求并返回模拟数据
    const req = httpTestingController.expectOne('你的API地址');
    req.flush({ mockData: '测试数据' });

    // tick()会触发所有待处理的异步操作，包括Observable的订阅回调
    tick();

    // 现在可以安全断言回调被调用了
    expect(mockCallback).toHaveBeenCalled();
  }));
});

方案2：用Jasmine的done回调 #

如果你不想用fakeAsync，可以用Jasmine自带的done参数来通知测试什么时候完成：

it('应该在Observable完成后调用回调', (done) => {
  const mockCallback = jasmine.createSpy('updateCallback').and.callFake(() => {
    // 在回调内部执行断言
    expect(mockCallback).toHaveBeenCalled();
    // 调用done()告诉Jasmine测试已经完成
    done();
  });

  service.updateData(mockCallback);

  // 响应HTTP请求
  const req = httpTestingController.expectOne('你的API地址');
  req.flush({ mockData: '测试数据' });
});

方案3：配合优化后的Promise方法测试 #

如果已经把updateData改成返回Promise，测试会更简洁，直接用async/await即可：

it('应该成功完成数据更新', async () => {
  const mockData = { mockData: '测试数据' };

  // 先匹配HTTP请求
  const req = httpTestingController.expectOne('你的API地址');

  // 等待服务方法完成
  await service.updateData();

  // 返回模拟响应
  req.flush(mockData);

  // 在这里执行你的断言，比如检查数据是否被正确处理
  // expect(...)...
});

为什么原测试会失败？ #

因为Observable的订阅是异步执行的，Jasmine默认会同步跑完测试代码，不会等待异步操作完成。上面的方法都是用来让测试“等待”异步操作结束后再执行断言的。

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