Hackernoon logoA Beginners Guide to Learn Mock Fetching in jest by@rindra josia

A Beginners Guide to Learn Mock Fetching in jest

image
Rakotonarivo Rindra Josia Hacker Noon profile picture

@rindra josiaRakotonarivo Rindra Josia

I am writing this post to show how to mock and test fetch with jest-fetch-mock. let's suppose that you are using Jest and you are comfortable with “async/await”. 

In this post, we are going to test an application that is going to request information from:

https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/

To make it possible, we have to mock our fetch.

Add necessary packages

Before starting, we have to install jest in our application throw this command: 

npm add --dev jest.

Then, we have to add jest in our 

package.json
 like this:

"scripts": {
    "test": "jest",
  },

Now we will be able to test our functions and class throw this command: 

npm test.

Next, we have to add a jest-fetch-mock module in our application to mock our fetch.

So, type this command: 

npm add --dev jest-fetch-mock.

Then, in our 

package.json
 add:

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

Finally, create a 

setupJest.js
 file with this code
global.fetch = require('jest-fetch-mock');
then put it in the root of your project.

Now, we will be able to test our code without making requests to that the API every time we run tests.

Our API function looks like this:

const Api = (() => {
  const key = 'FBPkKVVQVi1i5V71obYP';

  const urlRequest = `https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/${key}/scores`;
  const getScores = () => new Promise((resolve, reject) => {
    fetch(urlRequest)
      .then(response => response.json()
        .then((json) => {
          resolve(json.result);
        })).catch((e) => {
        reject(e);
      });
  });

  const setScores = (data) => fetch(urlRequest, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  }).then(result => result.json());


  return { getScores, setScores };
})();

export default Api;

Writing the Tests:

let's put our API test file in a folder named test.

1. The first thing that we have to do is, to reset the fetch mock so, the previous tests don't interfere with the current test by adding this code in our test file:

import Api from '../controller/api';

beforeEach(() => {
  fetch.resetMocks();
});

2. Now, lets test our

GET
method throw this code:

it('Return score', async () => {
  fetch.mockResponseOnce(JSON.stringify({
    result: [
      {
        user: 'John Doe',
        score: 42,
      }],
  }));
  const res = await Api.getScores();
  expect(res).toEqual([{ score: 42, user: 'John Doe' }]);
  expect(fetch.mock.calls.length).toEqual(1);
});

In this test, we expect that our test will return an array with this value:

{ score: 42, user: 'John Doe' }.

Now, let's test our

POST
method with this code:

test('Return value for POST action', () => {
  fetch.mockResponseOnce(JSON.stringify([{ result: 'Leaderboard score created correctly.' }]));
  const onResponse = jest.fn();
  const onError = jest.fn();

  return Api.setScores()
    .then(onResponse)
    .catch(onError)
    .finally(() => {
      expect(onResponse).toHaveBeenCalled();
      expect(onError).not.toHaveBeenCalled();

      expect(onResponse.mock.calls[0][0][0]).toEqual({ result: 'Leaderboard score created correctly.' });
    });
});

Here, after sending our data, we expect that our API will return:

{ result: 'Leaderboard score created correctly.' }.

Now if you run the tests you'll see we're all green!

image

Also published on: https://medium.com/@josiarj/how-to-mock-fetch-in-jest-f662eaec6090

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.