axios-mock-adapter onGet mock data not effective

Question

I'm trying to test axios call with axios-mock-adapter. I encountered following issue: The API calls from the test always respond to the real data instead of my mocked one with mock.onGet. ak receivedActions always from the real API call, but not the expectedActions which mocked with mock.onGet. Here is the action code (searchAction.js):

import { SEARCH_PHOTOS, FEATURED_PHOTOS } from './types';
import axiosInstence from '../apis/axiosInstence';

export const searchPhotos = (term) => (dispatch) => {
  dispatch({ type: 'SEACH_REQUEST' });

  return axiosInstence.get('/search/photos', {
    params: {
      query: term,
      page: 1
    }
  }).then(response => {
    dispatch({
      type: 'SEARCH_PHOTOS',
      payload: response.data
    });
  }).catch(error => {
    dispatch({ type: 'SEACH_FAILURE' });
  });
}

And my test looks like this (searchAction.test.js):

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import thunk from 'redux-thunk';
import configureMockStore from 'redux-mock-store';
import { searchPhotos } from '../searchAction';

const mock = new MockAdapter(axios);

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);
const term = 'cars';
const store = mockStore({});

describe('actions', () => {
  beforeEach(() => {
    mock.reset();
    store.clearActions();
  });

  it('Should create an action to signIn with a fake user', async () => {
    const expectedActions = [{
      type: 'SEACH_REQUEST'
    }, {
      type: 'SEARCH_PHOTOS',
      payload: []
    }];

    mock.onGet('/search/photos', {
      params: { term: 'cars' }
    }).reply(200, expectedActions);

    await store.dispatch(searchPhotos(term))
      .then(data => {
        const receivedActions = store.getActions();
        expect(receivedActions).toEqual(expectedActions);
      });
  });
});

Anybody have experienced similar issue or could give me some advise. Thanks in advence.

Answer 1

There are a couple of problems in your code:

First , in the action creator you are using an axios instance to make the ajax call, but in the test you are not providing that instance to the axios-mock-adapter . You should provide your axios instance in your test when you create the instance of MockAdapter .

Second , the params property you are providing to the axios mock in the onGet method does not match the parameters that are sent in the get operation in your action creator. You should match the parameters in the call with their values. Thus, you should provide query and page params.

Last , you are returning the expectedActions in the mock request, but that does not seem right. Looking at your code, it seems that you want to return an empty array.

Having all that into account, your code would look like:

import MockAdapter from 'axios-mock-adapter';
import thunk from 'redux-thunk';
import configureMockStore from 'redux-mock-store';

import axiosInstence from '../../apis/axiosInstence';
import { searchPhotos } from '../searchAction';

const mock = new MockAdapter(axiosInstence);

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);
const term = 'cars';
const store = mockStore({});

describe('actions', () => {
    beforeEach(() => {
        mock.reset();
        store.clearActions();
    });

    it('Should create an action to signIn with a fake user', async () => {
        const expectedActions = [{
            type: 'SEACH_REQUEST'
        }, {
            type: 'SEARCH_PHOTOS',
            payload: []
        }];

        mock.onGet('/search/photos', {
            params: {
                query: 'cars',
                page: 1
            }
        }).reply(200, []);

        const data = await store.dispatch(searchPhotos(term));
        const receivedActions = store.getActions();
        expect(receivedActions).toEqual(expectedActions);
    });
});