Mocking and testing fetch with Jest

Here’s a quick note about mocking and testing fetch
calls with Jest.
Let’s take an example React component, ExampleComponent
:
Let’s write a test for it using Jest and Enzyme, ExampleComponent.test.js
:
Some points to note here are:
- By passing the
done
function here, we’re telling Jest to wait until thedone
callback is called before finishing the test. See Testing Asynchronous Code docs for more details. - Since we
await
the call toresponse.json()
inExampleComponent.js
, wePromise.resolve
it in the test to amockSuccessResponse
object. - Since we are
await
ing the call tofetch(https://url-of-your-server.com/example/json)
, inExampleComponent.js
, and expecting the returned object to contain ajson
function, which returns anotherPromise
, wePromise.resolve
to an object containing such ajson
function. - We spy on
window.fetch
and mock it’s implementation to return thePromise
object described in 3. - We invoke Enzyme to shallow render, which also invokes the React lifecycle methods *.
- Wrapping our assertion code inside a
process.nextTick()
ensures that the functions queued in the current event loop are completed, thus also ensuring that ourPromise
s and other code insideExampleComponent
is done executing. - Optionally, we clear the mock.
- We invoke
done
to tell Jest that this test case is complete.