Question

我有一个组件可以在其componentDidMount函数中获取一些数据。获取数据的函数位于fetch-data.js。我正在尝试测试此组件，并希望模拟获取的数据。我试图在模拟测试的fetch函数时遵循此链接：http://facebook.github.io/jest/docs/en/manual-mocks.html

我的__mocks__文件夹与node_modules文件夹相邻：

...
node_modules
__mocks__
└── whatwg-fetch.js
...

我的whatwg-fetch.js模拟看起来像这样：

const whatwgFetch = jest.genMockFromModule('whatwg-fetch');
whatwgFetch.fetch = (url) => jest.fn().mockImplementation(() => Promise.resolve({ ok: true }));

module.exports = whatwgFetch;

但是，当我运行测试时，我仍然会收到此错误：

 RUNS  src/scenes/Home/Home.spec.js
 myproject/node_modules/react-scripts/scripts/test.js:20
  throw err;
  ^

TypeError: Network request failed
    at XMLHttpRequest.xhr.onerror (/Local/Users/john/Documents/js/react/haiku/node_modules/whatwg-fetch/fetch.js:436:16)

有问题的XHR请求不是第三方，而是本地网址（fetch('/my/local/file')），如果这有任何区别的话。

编辑：似乎即使组件测试中没有任何内容，我也会得到同样的错误。所有内容都在MyComponent.spec.js中注释掉，似乎仍然尝试发出网络请求。谁知道为什么？

Answer 1

所以，我安装了jest-fetch-mock并将这些行添加到我的src/setupTests.js：

global.fetch = require('jest-fetch-mock'); 
fetch.mockResponse(JSON.stringify({ testing: true }));

现在测试运行了。

Answer 2

如果我们只想在一个文件中模拟提取，那么我们可以通过监视窗口提取来测试它并给出我们的实现（模拟一个）并测试它。

//needs fetch polyfill to be loaded in ths test file
import 'whatwg-fetch';

let windowFetchSpy;
beforeEach(() => {
  //spyon read only window fetch
  windowFetchSpy = jest.spyOn(window, 'fetch');
});

afterEach(() => {
  // store back the original implementation of window fetch
  windowFetchSpy = jest.mockRestore();
})

test('window fetch',() => {
 // set the behavior of mock fetch (either resolve or reject)
  windowFetchSpy.mockResolvedValueOnce({
    ok: true,
    json: async () => ({success: true}),
  });
  

  expect(windowFetchFetch).toHaveBeenCalledTimes(1);
});

如何在Jest中模拟whatwg-fetch进行测试？

2 个答案: