Jest Mock 在反应中编写单元测试时未返回模拟数据

Question

我正在使用 fetch 调用 API 并为此编写测试用例。在进行 Fetch 调用时，我预计会模拟数据，但会收到 API 错误消息。

请帮助我了解它为什么不模拟数据。

使用 Jest、jest-fetch-mock 模块。代码如下

      const login = (username, password) => {
      return fetch('endpoint/login', () => {
        method: 'POST',
        body: JSON.stringify({
          data :{
            username,
            password
          }
        })
      })
      .then (res => res.json())
      .then (data => {
        if(data.response){
          return {
            response: "accessToken",
            error: null
          }
        }else{
          return {
            response: null,
            error: "Something went wrong"
          }
        }
      })
    }

现在我正在编写单元测试来测试这个 api，如下所示：-

     test("Auth Success Scenario", async () => {
      const onResponse = jest.fn();
      const onError = jest.fn();
      fetchMock.mockResponseONce(JSON.stringify({
        data: {
          response: "accessToken",
          error: null
        }
      }));

      return await AuthService.login("andy","password")
      .then(onResponse)
      .catch(onError)
      .finally( () => {
        console.log(onResponse.mock.calls[0][0]) // its return API error not mocked data
      })
    })

Answer 1

本来是要评论的，可惜我没有足够的声望。

您是否启用了文档 link 中指定的玩笑模拟

Create a setupJest file to setup the mock or add this to an existing setupFile. :
To setup for all tests


require('jest-fetch-mock').enableMocks()

Add the setupFile to your jest config in package.json:

"jest": {
  "automock": false,
  "setupFiles": [
    "./setupJest.js"
  ]
}

因为这似乎是唯一的情况，其中 fetch 将尝试对 API 进行实际调用，而不是给出模拟响应，从而导致失败。

您甚至可以为特定的测试文件启用模拟

import fetchMock from "jest-fetch-mock";
require('jest-fetch-mock').enableMocks();