如何使用jest- fetch -模拟模拟获取响应

Question

我在react函数组件中调用api。我正在编写组件的单元测试用例。我嘲弄过使用玩笑-假的。

global.fetch = require('jest-fetch-mock');

Component.ts

const Component = () => {

    useEffect(() => {
      return fetch(
          'url',
        )
          .then(response => response.json())
          .then(json => {
            setApiResult(json);
            setFilterResult(json?.videos);
          })
          .catch(error => {
            console.error(error);
          });
    }, []);

}

有人知道如何在jest中模拟这个组件的fetch响应吗？

Answer 1

这个是直接来自jest-fetch-mock文档的

• 在项目的根目录中创建一个文件setupJest.js文件，内容如下.

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

• 将setupJest.js文件添加到jest.config.js所在的jest.config.js或package.json中。

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

现在可以在全局范围内使用fetch和fetchMock。

describe('testing Component', () => {
  beforeEach(() => {
    fetch.resetMocks()
  })
 
  it('testing something...', () => {
    fetch.mockResponseOnce(JSON.stringify({ data: '12345' }))
    const container = render (<Component/>)
    // expect statement can be wrong.
    expect(container.getByText(/12345/).toBeDefined())
  })
});

Answer 2

下面是相同使用axios的小示例

jest.mock("axios");
 it('mock data', async () => {
        render(<Abc />);
        axios.get.mockResolvedValueOnce(data); // data is your static object
        // rest code goes here
        
    });