Testing async action creator (using axios) in Redux with Jest

Question

I have an issue creating a test for my async action creator in Redux. I am using axios for fetching and Jest for testing. Data is loaded correctly in the app itself. Just the test which I am writing is going all wrong ...

I followed Redux documentation concerning testing, but it is fetchMock used there. I have trouble transferring it to my case.

I tried two approaches which are both failing:

using moxios to mock axios
using jest.mock('axios'),

This is the code in my action creator:

import {
    BG_LOAD_START, 
    BG_LOAD_SUCCESS, 
    BG_LOAD_FAILURE} from './types'

import axios from 'axios'

export const bgLoad = (url, pictureNumber=0) => {
    return dispatch => {
        dispatch(bgLoadStart());

        return axios.get(url, {
            headers: {
                Authorization: `Bearer ${process.env.REACT_APP_API_KEY}`
            }
        })
            .then(res => dispatch(bgLoadSuccess(res.data.photos[pictureNumber], res.data.name, res.data.url)))
            .catch(err => dispatch(bgLoadFailure(err)))
    }
}

const bgLoadStart = () => {
    return {
        type: BG_LOAD_START
    }
}

const bgLoadSuccess = (bgImage, name, url) => {
    return {
        type: BG_LOAD_SUCCESS,
        payload: {
            bgImage,
            name,
            url
        }
    }
}

const bgLoadFailure = error => {
    return {
        type: BG_LOAD_FAILURE,
        payload: {
            ...error
        }
    }
}

and here is what I have in my test:

import configureStore from 'redux-mock-store'
import thunk from 'redux-thunk'
import {BG_LOAD_START, BG_LOAD_SUCCESS} from '../types'
import {bgLoad} from '../bgLoad'
import moxios from 'moxios'

const middlewares = [thunk];
const mockStore = configureStore(middlewares);
// jest.mock('axios');

describe(`async bgLoad action`, ()=> {

        beforeEach(()=>{
            moxios.install()
        })

        afterEach(()=>{
            moxios.uninstall()
        })

        it(`creates BG_LOAD_SUCCESS when data has been fetched`, ()=> {
        const fetchedData = [{
            image: 'this is example image',
            name: 'my name is image',
            url: 'this is example link'
        }]

        moxios.wait(()=>{
            const request = moxios.requests.mostRecent();
            request.respondWith({
                status: 200,
                response: fetchedData
            })
        })
        // axios.get.mockResolvedValue(fetchedData);

        const expectedActions = [
            {type: BG_LOAD_START},
            {type: BG_LOAD_SUCCESS,
                payload: {
                    bgImage: fetchedData[0].image,
                    name: fetchedData[0].name,
                    url: fetchedData[0].url,
                }
            }
        ]

        const store = mockStore({});

        return store.dispatch(bgLoad()).then(()=>{
                expect(store.getActions()).toEqual(expectedActions)
            })
    })
})

Here is the response with which I am getting from the console:

Expected value to equal:
      [{"type": "BG_LOAD_START"}, {"payload": {"bgImage": "this is example image", "name": "my name is image", "url": "this is example link"}, "type": "BG_LOAD_SUCCESS"}]
    Received:
      [{"type": "BG_LOAD_START"}, {"payload": {}, "type": "BG_LOAD_FAILURE"}]

Bump. I have also tried with 'axios-mock-adapter' which migth be a step into right direction, but I am still getting 'BG_LOAD_FAILURE' as a result of mocking axios request. Any ideas why I never get a 'SUCCESS' reply ? — Eryk Ludwin

slideshowp2 slideshowp2 · Accepted Answer · 2019-09-26T09:49:50

Here is the solution use jest.mock:

actionCreators.ts:

import { BG_LOAD_START, BG_LOAD_SUCCESS, BG_LOAD_FAILURE } from './types';
import axios from 'axios';

export const bgLoad = (url, pictureNumber = 0) => {
  return dispatch => {
    dispatch(bgLoadStart());

    return axios
      .get(url, {
        headers: {
          Authorization: `Bearer ${process.env.REACT_APP_API_KEY}`
        }
      })
      .then(res => dispatch(bgLoadSuccess(res.data.photos[pictureNumber], res.data.name, res.data.url)))
      .catch(err => dispatch(bgLoadFailure(err)));
  };
};

const bgLoadStart = () => {
  return {
    type: BG_LOAD_START
  };
};

const bgLoadSuccess = (bgImage, name, url) => {
  return {
    type: BG_LOAD_SUCCESS,
    payload: {
      bgImage,
      name,
      url
    }
  };
};

const bgLoadFailure = error => {
  return {
    type: BG_LOAD_FAILURE,
    payload: {
      ...error
    }
  };
};

actionCreators.spec.ts:

import configureStore from 'redux-mock-store';
import thunk, { ThunkDispatch } from 'redux-thunk';
import axios from 'axios';
import { BG_LOAD_START, BG_LOAD_SUCCESS } from './types';
import { bgLoad } from './actionCreators';
import { AnyAction } from 'redux';

const middlewares = [thunk];
const mockStore = configureStore<any, ThunkDispatch<{}, any, AnyAction>>(middlewares);

jest.mock('axios', () => {
  return {
    get: jest.fn()
  };
});

describe(`async bgLoad action`, () => {
  const fetchedData = [
    {
      image: 'this is example image',
      name: 'my name is image',
      url: 'this is example link'
    }
  ];
  afterEach(() => {
    jest.resetAllMocks();
  });

  it(`creates BG_LOAD_SUCCESS when data has been fetched`, () => {
    (axios.get as jest.MockedFunction<typeof axios.get>).mockResolvedValueOnce({
      data: { photos: [fetchedData[0].image], name: fetchedData[0].name, url: fetchedData[0].url }
    });

    const expectedActions = [
      { type: BG_LOAD_START },
      {
        type: BG_LOAD_SUCCESS,
        payload: {
          bgImage: fetchedData[0].image,
          name: fetchedData[0].name,
          url: fetchedData[0].url
        }
      }
    ];

    const store = mockStore({});

    return store.dispatch(bgLoad('https://github.com/mrdulin')).then(() => {
      expect(store.getActions()).toEqual(expectedActions);
      expect(axios.get).toBeCalledWith('https://github.com/mrdulin', {
        headers: {
          Authorization: `Bearer ${process.env.REACT_APP_API_KEY}`
        }
      });
    });
  });
});

Unit test result with coverage report:

 PASS  src/stackoverflow/55966274/actionCreators.spec.ts
  async bgLoad action
    ✓ creates BG_LOAD_SUCCESS when data has been fetched (20ms)

-------------------|----------|----------|----------|----------|-------------------|
File               |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-------------------|----------|----------|----------|----------|-------------------|
All files          |    88.89 |       50 |    71.43 |    88.24 |                   |
 actionCreators.ts |    86.67 |       50 |    71.43 |    85.71 |             15,37 |
 types.ts          |      100 |      100 |      100 |      100 |                   |
-------------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.774s, estimated 6s

Here is the completed demo: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/55966274

Testing async action creator (using axios) in Redux with Jest

1 Answers