使用jest-fetch-mock模拟fetch返回null及后续报错问题求助

问题根因 #

你遇到的Cannot read property 'json' of undefined报错，本质是业务代码中调用的全局fetch没有被正确mock，调用后返回了undefined，执行undefined.json触发报错进入catch分支，最终返回null。

分步解决方案 #

1. 确认jest配置加载了初始化文件

检查你的jest配置（jest.config.js 或 package.json 中的jest字段）是否正确配置了初始化文件路径：

// jest.config.js 示例
module.exports = {
  // 其余原有配置保持不变
  setupFilesAfterEnv: ['<rootDir>/src/setupTest.js'],
}

如果是CRA（Create React App）生成的项目，默认会自动加载src/setupTest.js，如果修改了文件存放位置需要手动更新配置。

2. 修正setupTest.js配置

修改初始化文件，显式将mock的fetch挂载到全局对象，避免环境差异导致的挂载失败：

import fetchMock from 'jest-fetch-mock'
global.fetch = fetchMock
fetchMock.enableMocks()

3. 修正测试文件代码

不要在测试文件中单独导入jest-fetch-mock，直接使用已经挂载到全局的mock fetch实例即可。你之前单独导入的局部fetch和业务代码使用的全局fetch不是同一个实例，导致mock配置不生效：

import { random } from "./random";

test("collects data", async () => {
  fetch.mockResponseOnce(JSON.stringify([{ test: "data" }]))
  const data = await random()
  // 可选：新增fetch调用校验，确认请求地址符合预期
  expect(fetch).toHaveBeenCalledWith("https://api.punkapi.com/v2/beers/random")
  expect(data).toEqual([{ test: "data" }])
})

完成以上修改后重新运行测试即可正常通过。

内容的提问来源于stack exchange，提问作者fluffy-lionz