Fetch do not work on Jest #2071
Comments
|
You will need to polyfill the behaviour if you want to make actual http calls, or mock |
|
Exactly! Check out whatwg-fetch. |
|
@atkinchris where should I add the polyfill? inside setupTestFrameworkScriptFile? |
|
I think my problem is that react-native uses a different XMLHttpRequest I've tried add a polyfill inside I also getting this error in XMLHttpRequest if I don't unmock TypeError: this.dispatchEvent is not a function
at XMLHttpRequest.setReadyState (node_modules/react-native/Libraries/Network/XMLHttpRequest.js:470:6)
at XMLHttpRequest.open (node_modules/react-native/Libraries/Network/XMLHttpRequest.js:381:6)
at node_modules/whatwg-fetch/fetch.js:415:11
at Object.<anonymous>.self.fetch (node_modules/whatwg-fetch/fetch.js:373:12)
at Object._callee$ (app/__tests__/myRelay.js:52:1)
at tryCatch (node_modules/regenerator-runtime/runtime.js:62:40)
at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:336:22)
at Generator.prototype.(anonymous function) [as next] (node_modules/regenerator-runtime/runtime.js:95:21)
at tryCatch (node_modules/regenerator-runtime/runtime.js:62:40)
at invoke (node_modules/regenerator-runtime/runtime.js:138:20) |
|
it works on tks |
|
@sibelius How exactly did you get it to work? I tried adding |
|
Figured it out. |
|
@connected-mgosbee I have a working example here: https://github.com/sibelius/relay-integration-test/blob/master/RelayApp/test/env.js |
|
This might help too: https://github.com/jefflau/jest-fetch-mock |
|
Weirdly, neither of the polyfills repacing XMLHttpResponse in the fixes above seemed to work -- I had to replace fetch entirely, by including |
|
I didn't really wanted to mock on a specific test and node-fetch came through brilliantly for me. |
|
For people passing by, simplest working solution: function mockFetch(data) {
return jest.fn().mockImplementation(() =>
Promise.resolve({
ok: true,
json: () => data
})
);
}
test('fetchPerson()', async () => {
fetch = mockFetch(someJson); // or window.fetch
const person = await fetchPerson('whatever id');
expect(person).toEqual(someJson);
// Make sure fetch has been called exactly once
expect(fetch).toHaveBeenCalledTimes(1);
});when testing this simple function: function fetchPerson(id) {
const response = await fetch(`${BASE_URL}/people/${id}`);
if (!response.ok) throw new Error(response.statusText);
const data = await response.json();
// Some operations on data if needed...
return person;
}Jest configuration: // File jest.setup.js
import 'whatwg-fetch';// File jest.config.js
module.exports = {
setupFiles: ['./jest.setup.js'],
};(because Jest uses Node.js and Node.js does not come with fetch => specific to web browsers) Real life simple example: https://github.com/tkrotoff/MarvelHeroes |
|
@tkrotoff Sorry, how |
|
@tkrotoff |
|
Is |
|
seems that for react-native will be solved with this pr facebook/react-native#30488 |
|
This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
Do you want to request a feature or report a bug?
bug
What is the current behavior?
fetchdo not make the request to the servertest example:
This test is inside a react native project, I have a very long timeout
jasmine.DEFAULT_TIMEOUT_INTERVAL = 30000;.I'm trying to implement integration tests using a real GraphQL backend (following the ideas of facebook/relay#1281)
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal repository on GitHub that we can
npm installandnpm test.What is the expected behavior?
fetchshould make the request to the serverRun Jest again with
--debugand provide the full configuration it prints. Please mention your node and npm version and operating system.node 6.9.1
mac os x sierra
The text was updated successfully, but these errors were encountered: