如何在Jest中mock response.json().then()？报错：response.json(...).then不是函数

嘿，这个问题我帮不少开发者排查过，核心原因几乎都是同一个：你mock的json()方法没有返回Promise对象。毕竟.then()是Promise的专属方法，如果json()返回的是普通对象、字面量或者非Promise值，JS自然会抛出"then is not a function"的错误。

先看错误的常见写法（你可能踩了这个坑） #

很多人会误以为json()直接返回数据就行，但实际上浏览器原生的Response.json()本身就会返回一个Promise：

// ❌ 错误示例：json()直接返回普通对象，不是Promise
global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => { data: '测试数据' } // 这里返回的是普通对象，不是Promise
  })
);

正确的Mock写法 #

你只需要让json()方法返回一个已resolve的Promise就行，分两种场景：

1. 固定返回值的基础写法 #

如果你的测试用例只需要固定的返回数据，直接让json()返回Promise.resolve(你的数据)：

// ✅ 正确写法：json()返回Promise
global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve({ data: '测试数据' })
  })
);

2. 动态修改返回值的灵活写法 #

如果不同测试用例需要不同的返回数据，可以用jest.fn()单独mockjson()方法，方便在测试中动态设置返回值：

// 先定义可复用的mock函数
const mockResponseJson = jest.fn();

// mock fetch，让它返回包含mock json方法的response
global.fetch = jest.fn(() =>
  Promise.resolve({
    json: mockResponseJson
  })
);

// 在具体测试用例中设置返回值
test('测试接口请求成功场景', async () => {
  // 设置json()返回成功数据
  mockResponseJson.mockResolvedValue({ code: 200, data: '成功数据' });
  
  // 执行你的请求逻辑（比如调用封装的fetch函数）
  const result = await yourFetchFunction();
  
  // 断言结果符合预期
  expect(result).toEqual({ code: 200, data: '成功数据' });
});

test('测试接口请求失败场景', async () => {
  // 设置json()返回错误数据
  mockResponseJson.mockResolvedValue({ code: 500, msg: '服务器错误' });
  
  const result = await yourFetchFunction();
  expect(result.code).toBe(500);
});

额外排查点 #

• 检查是否在其他测试用例中覆盖了fetch或response.json的mock，导致当前用例的mock失效；
• 如果是使用axios等HTTP库，原理类似：要确保mock的响应对象中，对应返回数据的方法（比如data或者自定义的解析方法）符合Promise链式调用的要求；
• 确认你的请求逻辑中，是否正确处理了fetch返回的Promise（比如有没有遗漏await或者.then()）。

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