title: How Can I test a an action reducer with an async call and dispatch inside using Jest?
body: <p>I'm new in Jest and I'm trying to make test to my async action creators. The problem is that I only have seen examples of tests where there is a method for the action creator and other separate method for the dispatch. My actions creators have the dispatch as an async callback function, but I can't figure out how to make the test.
  My Action Reducer looks like this:</p>
  
  <pre><code>export const postConnection = (connectionUrl, username, password) =&gt; {
      return async (dispatch) =&gt; {
          const response = await requireAuthActions.post('/db/conexion', JSON.stringify({ connectionUrl, username, password }));
          dispatch({ type: POST_CONNECTION, payload: response.data });
          history.push('/conexiones');
      }
  }
  </code></pre>
  
  <p>And I have trying to do the test script but when I run it it throws me an error. The script looks like this:</p>
  
  <pre><code>describe('Pruebas de Conexiones', () =&gt; {
      describe('Action Creators', () =&gt; {
          it("Crear conexión", async () =&gt; {
              const dispatch = jest.fn();
              const {data} = await postConnection('www.google.com', 'root', 'password')(dispatch);
              dispatch({});
          });
      });
  });
  </code></pre>
  
  <p>And when I try to run the test script it throws me the next error:</p>
  
  <pre><code>Request failed with status code 401
  
        at createError (node_modules/axios/lib/core/createError.js:16:15)
        at settle (node_modules/axios/lib/core/settle.js:17:12)
        at IncomingMessage.handleStreamEnd (node_modules/axios/lib/adapters/http.js:237:11)
  </code></pre>
  
  <p>Is there a way of test actions creators like the mine?</p>
  
  <p><strong>EDIT</strong>
  Now I have a mocks file with a mock for axios that looks like this:</p>
  
  <pre><code>const mockAxios = jest.genMockFromModule('axios');
  
  mockAxios.create = jest.fn(() =&gt; mockAxios)
  
  export default mockAxios
  </code></pre>
  
  <p>But now my problems is that I don't know how to implement this in the test file. For now I have something like this:</p>
  
  <pre><code>import thunk from 'redux-thunk';
  import mockAxios from 'axios';
  
  const middlewares = [thunk];
  const mockStore = configureStore(middlewares);
  
  describe('Test de conexiones', () =&gt;{
      describe('Action Creators', () =&gt;{
          it('Agregar conexión', async () =&gt;{
              const store = mockStore({});
              const mockData = {data:123};
              mockAxios.get.mockImplementationOnce(()=&gt;Promise.resolve({data: mockData}));
  
              const expectedActions = [
                  {type: POST_CONNECTION, data: mockData}
              ]
              const dispatch = jest.fn();
              const response = await postConnection('www.google.com','root','password')(dispatch);
          });
      });
  });
  </code></pre>
  
  <p>And it throws me the next error:</p>
  
  <pre><code>TypeError: Cannot read property 'data' of undefined
  
        12 |     return async (dispatch) =&gt; {
        13 |         const response = await requireAuthActions.post('/db/conexion', JSON.stringify({ connectionUrl, username, password }));
      &gt; 14 |         dispatch({ type: POST_CONNECTION, payload: response.data });
           |                                                             ^
        15 |         history.push('/conexiones');
        16 |     }
        17 | }
  </code></pre>