如何在Jest测试中Mock多个API调用（React+TypeScript场景）

针对你需要按顺序调用两个API的测试场景，有两种实用方案可以实现不同请求返回不同Mock响应：

方案一：按调用顺序返回固定响应 #

利用Jest的mockResolvedValueOnce方法，链式定义每次调用的返回结果，第一次调用返回第一个API的Mock响应，第二次返回第二个的：

// 定义两个API的Mock响应
const firstApiResMock = { Response: { data: 'first result' } };
const secondApiResMock = { Response: { data: 'second result' } };

// 重置fetch的mock，避免之前的测试影响
global.fetch = jest.fn();

// 按顺序设置两次调用的返回值
global.fetch
  .mockResolvedValueOnce(getMockPromise(firstApiResMock))
  .mockResolvedValueOnce(getMockPromise(secondApiResMock));

测试时，第一次调用fetch会返回firstApiResMock，第二次返回secondApiResMock。如果后续还有更多调用，可以继续链式添加mockResolvedValueOnce，超出定义次数的调用会返回undefined，也可以用mockResolvedValue设置默认返回值。

方案二：根据请求信息动态返回响应 #

如果第二个API的请求依赖第一个API的响应结果（比如请求URL包含第一个返回的ID），可以在mockImplementation里判断请求参数，返回对应的响应：

global.fetch = jest.fn().mockImplementation(async (url: string) => {
  if (url.includes('/first-api')) {
    return getMockPromise({ Response: { id: '123' } });
  } else if (url.includes('/second-api/123')) {
    return getMockPromise({ Response: { detail: 'user detail' } });
  }
  // 其他请求的默认返回
  return getMockPromise({ Response: {} });
});

这种方式更灵活，能根据实际请求的URL、请求体等信息返回对应Mock数据，适配依赖前序请求结果的场景。

注意事项 #

• 每次测试前记得用jest.clearAllMocks()或者global.fetch.mockClear()重置mock，避免不同测试用例之间的干扰。
• 之前多次使用mockImplementation无效的原因是：后续的mockImplementation会完全替换之前的定义，而非追加，因此必须用mockImplementationOnce或链式的mockResolvedValueOnce来实现多顺序响应。

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