使用 Jest 模拟 API 错误响应时，组件中未定义 Fetch

Question

我正在测试一个使用 useEffect 挂钩的组件，该挂钩从 API 获取数据、更新状态然后构建组件。我以this Stack Overflow answer 为例成功地模拟了几个测试的API 响应。我现在正在尝试编写一个测试，在其中模拟从 API 返回的错误。我收到一条错误消息，指出 TypeError: Cannot read property 'then' of undefined 对应于 fetch。我正在尝试使用相同的示例，但没有运气。

我成功的 fetch 模拟测试数据如下所示：

global.fetch = jest.fn().mockImplementationOnce(() =>
  Promise.resolve({
    json: () => Promise.resolve(successMockData),
  })
)

我尝试的模拟错误响应当前如下所示：

global.fetch = jest.fn().mockImplementationOnce(() => {
  Promise.resolve({
    status: 400,
    json: () => Promise.resolve({ success: false, error: 'Something bad happened' }),
  })
})

我在运行测试时遇到的错误是：

如果我拒绝承诺，我仍然会收到相同的错误，但也会收到抛出的异常：

global.fetch = jest.fn().mockImplementationOnce(() => {
  Promise.reject({
    status: 400,
    json: () => Promise.resolve({ success: false, error: 'Something bad happened' }),
  })
})

API 使用 NextApiResponse，如下所示：

try {
  // Query data from database
  const data = methodThatGetsDataFromDatabase()

  return res.status(200).json({ success: true, data: data })
} catch (error) {
  return res.status(400).json({ success: false, error: error.message })
}

我已经在这方面工作了很长时间，并且已经厌倦了谷歌寻找答案。我只是不明白为什么 fetch 未定义而不是返回承诺。非常感谢任何帮助！

Answer 1

我发现的不同之处在于，您成功的 fetch 模拟实际上返回了 Promise。

但是失败的 fetch 模拟并没有返回——注意在 Promise 周围微妙地添加了花括号。不用大括号你能检查一下吗？

global.fetch = jest.fn().mockImplementationOnce(() => 
  Promise.resolve({
    status: 400,
    json: () => Promise.resolve({ success: false, error: 'Something bad happened' }),
  })
)