How do I test axios in Jest

Question

I have this action in React  export function fetchPosts         const request   axios get    WORDPRESS URL         return           type  FETCH POSTS          payload  request          How do I test Axios in this case  Jest has this use case on their site for asynchronous  code where they use a mock function  but can I do this with Axios  Reference  An Async Example I have done this so far to test that it is returning the correct type  it  should dispatch actions with the correct type        gt        store dispatch fetchPosts         let action   store getActions        expect action 0  type  toBe FETCH POSTS        How can I pass in mock data and test that it returns

User · Answer

For those looking to use axios-mock-adapter in place of the mockfetch example in the Redux documentation for async testing, I successfully used the following:

File actions.test.js:

describe('SignInUser', () => {
  var history = {
    push: function(str) {
        expect(str).toEqual('/feed');
    }
  }

  it('Dispatches authorization', () => {
    let mock = new MockAdapter(axios);
    mock.onPost(`${ROOT_URL}/auth/signin`, {
        email: '[email protected]',
        password: 'test'
    }).reply(200, {token: 'testToken' });

    const expectedActions = [ { type: types.AUTH_USER } ];
    const store = mockStore({ auth: [] });

    return store.dispatch(actions.signInUser({
        email: '[email protected]',
        password: 'test',
      }, history)).then(() => {
        expect(store.getActions()).toEqual(expectedActions);
  });

});

In order to test a successful case for signInUser in file actions/index.js:

export const signInUser = ({ email, password }, history) => async dispatch => {
  const res = await axios.post(`${ROOT_URL}/auth/signin`, { email, password })
    .catch(({ response: { data } }) => {
        ...
  });

  if (res) {
    dispatch({ type: AUTH_USER });                 // Test verified this
    localStorage.setItem('token', res.data.token); // Test mocked this
    history.push('/feed');                         // Test mocked this
  }
}

Given that this is being done with jest, the localstorage call had to be mocked. This was in file src/setupTests.js:

const localStorageMock = {
  removeItem: jest.fn(),
  getItem: jest.fn(),
  setItem: jest.fn(),
  clear: jest.fn()
};
global.localStorage = localStorageMock;

User · Answer

I could do that following the steps    Create a folder   mocks     as pointed by  Januartha comment  Implement an axios js mock file Use my implemented module on test   The mock will happen automatically   Example of the mock module   module exports         get  jest fn  url    gt            if  url       something                 return Promise resolve                   data   data                                        post  jest fn  url    gt            if  url       something                 return Promise resolve                   data   data                                    if  url       something2                 return Promise resolve                   data   data2                                        create  jest fn function              return this

User · Answer

I used axios-mock-adapter  In this case the service is described in   chatbot  In the mock adapter you specify what to return when the API endpoint is consumed   import axios from  axios   import MockAdapter from  axios-mock-adapter   import chatbot from    chatbot    describe  Chatbot        gt        it  returns data when sendMessage is called   done   gt            var mock   new MockAdapter axios           const data     response  true            mock onGet  https   us-central1-hutoma-backend cloudfunctions net chat   reply 200  data            chatbot sendMessage 0   any   then response   gt                expect response  toEqual data               done                              You can see it the whole example here   Service  https   github com lnolazco hutoma-test blob master src services chatbot js  Test  https   github com lnolazco hutoma-test blob master src services chatbot test js

User · Answer

Without using any other libraries  import   as axios from  quot axios quot       Mock out all top level functions  such as get  put  delete and post  jest mock  quot axios quot             test  quot good response quot        gt      axios get mockImplementation      gt  Promise resolve   data                           test  quot bad response quot        gt      axios get mockImplementation      gt  Promise reject                          It is possible to specify the response code  axios get mockImplementation      gt  Promise resolve   status  200  data              It is possible to change the mock based on the parameters  axios get mockImplementation  url    gt        if  url      www example com             return Promise resolve   data                  else                            Jest v23 introduced some syntactic sugar for mocking Promises  axios get mockImplementation      gt  Promise resolve   data              It can be simplified to axios get mockResolvedValue   data             There is also an equivalent for rejected promises  mockRejectedValue  Further Reading   Jest mocking documentation A GitHub discussion that explains about the scope of the jest mock  quot axios quot   line  Another answer of mine which addresses applying the techniques above to Axios request interceptors

User · Answer

I ve done this with nock  like so   import nock from  nock  import axios from  axios  import httpAdapter from  axios lib adapters http   axios defaults adapter   httpAdapter  describe  foo        gt        it  bar        gt            nock  https   example com 443                get   example                reply 200   some payload               test

[javascript] How do I test axios in Jest?

File actions.test.js:

Examples related to javascript

Examples related to reactjs

Examples related to react-redux

Examples related to jestjs