Testing Axios Requests With Jest

Let's say we have a simple async function that calls some remote data. We pass in our query and configuration object. To see an example of what can be passed through this request config see the Axios docs. My query in this case is just the url key in the config for example /user which could be an API end point. This function simply returns the data from axios (the actual response body from your endpoint). If we fail to get a response from our endpoint, the function is going to catch and we'll throw a console error.

request.js

export const fetchData = async (query, config
) => {
  try {
    const { data } = await axios.request({
      method: 'get',
      url: encodeURI(query),
      ...config
    });

    return data;
  } catch (e) {
    console.error('Could not fetchData', e);
  }
};

Now let's create a new file request.spec.js we want to add two imports

import mockAxios from 'axios';
import { fetchData } from '../request';

In order to test this we need to use a mocked version of Axios which is conveniently imported from the core library. We're now ready to write our test

  it('should call a fetchData function', done => {
    fetchData('/test', {}).then(response => {
      expect(response).toEqual({
        data: {},
      });
    });
    expect(mockAxios.request).toHaveBeenCalledWith({
      method: 'get',
      url: '/test'
    });
    expect(mockAxios.request).toHaveBeenCalledTimes(1);
    expect(consoleErrorSpy).not.toHaveBeenCalled();
    done();
  });

First we call then function with a test query and an empty config to ensure then test that our response is correct. Now we are testing mockAxios.request that it was called with the arguments we expected, that it was called only one time, and that our function did not throw an error. Finally we call the done() callback which let's just know our asynchronous operations are complete.