I am writing this post to show with jest-fetch-mock. let's suppose that you are using t and you are comfortable with how to mock and test fetch Jes “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 in our application throw this command: install jest npm add --dev jest. Then, we have to add jest in our like this: package.json : { : ,
  }, "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 module in our application to mock our fetch. jest-fetch-mock So, type this command: npm add --dev jest-fetch-mock. Then, in our add: package.json : { : , : [ ]
  }, "jest" "automock" false "setupFiles" "./setupJest.js" Finally, create a file with this code then put it in the of your project. setupJest.js global.fetch = require('jest-fetch-mock'); root 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: Api = { key = ; urlRequest = ; getScores = ( {
    fetch(urlRequest)
      .then( response.json()
        .then( {
          resolve(json.result);
        })).catch( {
        reject(e);
      });
  }); setScores = fetch(urlRequest, { : , : { : }, : .stringify(data),
  }).then( result.json()); { getScores, setScores };
})(); Api; const ( ) => ( const 'FBPkKVVQVi1i5V71obYP' const `https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/ /scores` ${key} const => () new Promise ( ) => resolve, reject => response ( ) => json ( ) => e const ( ) => data method 'POST' headers 'Content-Type' 'application/json' body JSON => result return export default 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: Api ;

beforeEach( {
  fetch.resetMocks();
}); import from '../controller/api' => () 2. Now, lets test our method throw this code: GET it( , () => {
  fetch.mockResponseOnce( .stringify({ : [
      { : , : ,
      }],
  })); res = Api.getScores();
  expect(res).toEqual([{ : , : }]);
  expect(fetch.mock.calls.length).toEqual( );
}); 'Return score' async JSON result user 'John Doe' score 42 const await score 42 user 'John Doe' 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 method with this code: POST test( , () => {
  fetch.mockResponseOnce( .stringify([{ : }])); onResponse = jest.fn(); onError = jest.fn(); Api.setScores()
    .then(onResponse)
    .catch(onError)
    .finally( {
      expect(onResponse).toHaveBeenCalled();
      expect(onError).not.toHaveBeenCalled();

      expect(onResponse.mock.calls[ ][ ][ ]).toEqual({ : });
    });
}); 'Return value for POST action' JSON result 'Leaderboard score created correctly.' const const return => () 0 0 0 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! Also published on: https://medium.com/@josiarj/how-to-mock-fetch-in-jest-f662eaec6090

Fetch

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

A Beginners Guide to Learn Mock Fetching in jest

Too Long; Didn't Read

People Mentioned

Company Mentioned

Rakotonarivo Rindra Josia

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

A Beginners Guide to Learn Mock Fetching in jest

Too Long; Didn't Read

People Mentioned

Company Mentioned

Rakotonarivo Rindra Josia

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES