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

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

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

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        gt      var history         push  function str            expect str  toEqual   feed                 it  Dispatches authorization        gt        let mock   new MockAdapter axios       mock onPost    ROOT URL  auth signin             email   test test com           password   test         reply 200   token   testToken           const expectedActions       type  types AUTH USER          const store   mockStore   auth              return store dispatch actions signInUser           email   test test com           password   test            history   then      gt            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    gt  async dispatch   gt      const res   await axios post    ROOT URL  auth signin     email  password         catch    response    data        gt                         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 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

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

[javascript] How do I test axios in Jest?

Examples related to javascript

Examples related to reactjs

Examples related to react-redux

Examples related to jestjs