使用 Jest 模拟 API 错误响应时在组件中未定义提取

Question

我正在测试一个组件，该组件使用 useEffect 挂钩从 API 获取数据，更新状态，然后构建组件。我已经使用作为示例成功模拟了 API 响应以进行多次测试。我现在正在尝试编写一个测试，我模拟从 API 返回的错误。我收到一条错误消息，指出 TypeError: Cannot read property 'then' of undefined 对应 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 })
}

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

Answer 1

我发现的不同之处在于，您成功获取的模拟实际上是 returns Promise。

但是失败的提取模拟没有返回——请注意在 Promise 周围微妙地添加了大括号。你能在没有大括号的情况下检查这个吗？

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

使用 Jest 模拟 API 错误响应时在组件中未定义提取

Fetch is Undefined in Component when Mocking API Error Response with Jest

unit-testing

reactjs

jestjs

react-testing-library