Jasmine中如何测试Promise的.then代码块？

嗨，我之前也遇到过一模一样的问题！核心原因是Promise是异步执行的，而Jasmine默认会同步跑完测试代码，根本等不及.then里的逻辑执行就去断言了，所以你的expect自然会失败。下面给你几个实用的解决方案，都是日常测试里常用的：

方法一：用async/await（最直观的方式） #

把测试函数改成async，调用组件方法时用await等待Promise完成，这样测试代码就会等.then里的逻辑都执行完再去断言。

示例代码：

it('应该执行.then块中的逻辑', async () => {
  // 准备你的mock响应数据
  const RESPONSE_MOCK = { /* 这里填你的测试数据 */ };
  
  // 模拟service的serviceFunction返回成功的Promise
  spyOn(myService, 'serviceFunction').and.returnValue(Promise.resolve(RESPONSE_MOCK));
  // 如果你想验证transformData的调用，记得先spy它
  spyOn(component, 'transformData').and.callThrough();

  // 调用组件方法并等待Promise完成
  await component.myFunction(/* 传入你的测试param，比如true或false */);

  // 现在断言就会生效了
  expect(component.transformData).toHaveBeenCalledWith(RESPONSE_MOCK);
  expect(component.anotherFunction).toHaveBeenCalled();
  // 根据param的不同，还可以加if/else分支的断言
});

方法二：用fakeAsync + tick（Angular项目首选） #

如果是Angular项目，TestBed提供了fakeAsync和tick工具，可以把异步代码“同步化”执行。fakeAsync会包裹测试逻辑，tick()会触发所有待处理的微任务（比如Promise的.then回调）。

示例代码：

import { fakeAsync, tick } from '@angular/core/testing';

it('应该执行.then块中的逻辑', fakeAsync(() => {
  const RESPONSE_MOCK = { /* 你的mock数据 */ };
  
  spyOn(myService, 'serviceFunction').and.returnValue(Promise.resolve(RESPONSE_MOCK));
  spyOn(component, 'transformData').and.callThrough();

  // 调用组件方法
  component.myFunction(/* 测试param */);
  // 触发所有微任务，让.then里的代码立刻执行
  tick();

  // 现在可以正常断言了
  expect(component.transformData).toHaveBeenCalledWith(RESPONSE_MOCK);
  expect(component.anotherFunction).toHaveBeenCalled();
}));

方法三：用done回调（传统异步测试方式） #

这是最基础的异步测试写法，通过Jasmine的done回调告诉测试：“等我调用done()再结束”。你可以在Promise的.then里执行断言，然后调用done()，如果出错就用done.fail()标记失败。

示例代码：

it('应该执行.then块中的逻辑', (done) => {
  const RESPONSE_MOCK = { /* 你的mock数据 */ };
  
  spyOn(myService, 'serviceFunction').and.returnValue(Promise.resolve(RESPONSE_MOCK));
  spyOn(component, 'transformData').and.callThrough();

  component.myFunction(/* 测试param */)
    .then(() => {
      // 在.then里执行断言
      expect(component.transformData).toHaveBeenCalledWith(RESPONSE_MOCK);
      expect(component.anotherFunction).toHaveBeenCalled();
      done(); // 通知Jasmine测试完成
    })
    .catch((err) => {
      done.fail(err); // 如果Promise出错，标记测试失败
    });
});

额外注意点 #

• 确保你spy的myService是组件实际注入的实例！比如在Angular中，要通过TestBed.inject(MyService)获取，而不是自己new一个。
• 如果你的serviceFunction返回的是Observable（Angular中更常见），可以先转成Promise（.toPromise()），或者用async/await配合fixture.whenStable()，不过你这里是Promise，上面的方法完全适用。

备注：内容来源于stack exchange，提问作者user46488787