Jest Mock 在 React 中编写单元测试时不返回模拟数据

如何解决Jest Mock 在 React 中编写单元测试时不返回模拟数据

我正在使用 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
      })
    })

解决方法

这是评论，遗憾的是我没有足够的声誉。

您是否按照文档 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();