CODEWITHSUNDEEP
reactjsjestjsaxiosreact-testing-library
EugenSunic
EugenSunic

Reputation: 13703

How to mock interceptors when using jest.mock('axios')?

When running a test using jest I have the basic test suit syntax:

jest.mock('axios');

describe('app', () => {
    let render

    beforeEach(() => {
        axiosMock.get.mockResolvedValueOnce({
            data: {greeting: 'hello there'},
        }),
        render= renderApp()
    });

    test('should render something', () => {
        expect(something).toBeInTheDocument();
    });


});

The problem is I have interceptors in my code which when running the test with jest command outputs:

TypeError: Cannot read property 'interceptors' of undefined

and points to the interceptors object

axiosInstance.interceptors.request.use(...

axiosInstance is the a variable storing the return of axios.create

export const axiosInstance = axios.create({...

Refered to this axios thread on SO How do I test axios in jest but it doesn't involve any interceptors so didn't really help.

Upvotes: 14

Views: 43931

Answers (3)

Benny Code
Benny Code

Reputation: 54812

Here is how I mocked axios.create and its interceptors:

jest.mock('axios', () => {
  return {
    create: () => {
      return {
        interceptors: {
          request: {eject: jest.fn(), use: jest.fn()},
          response: {eject: jest.fn(), use: jest.fn()},
        },
      };
    },
  };
});

Afterwards I was able to call the following in my test code:

const client = axios.create({
  baseURL: 'http://some-url.com',
});

client.interceptors.request.use(config => {
  // some other test code
  return config;
});

Upvotes: 8

EugenSunic
EugenSunic

Reputation: 13703

This was enough in the end, plain and simple jest.fn()

jest.mock('axios', () => {
    return {
        interceptors: {
            request: { use: jest.fn(), eject: jest.fn() },
            response: { use: jest.fn(), eject: jest.fn() },
        },
    };
});

Upvotes: 20

A Jar of Clay
A Jar of Clay

Reputation: 6298

Make sure to mock out the interceptors and axios.create if used:

// Replace any instances with the mocked instance (a new mock could be used here instead):
axios.create.mockImplementation((config) => axios);

// Mock out the interceptor (assuming there is only one):
let requestCallback = () => {
  console.log("There were no interceptors");
};
axios.interceptors.request.use.mockImplementation((callback) => {
  requestCallback = callback;
});

// Mock out the get request so that it returns the mocked data but also calls the 
// interceptor code:
axios.get.mockImplementation(() => {
  requestCallback();
  return {
    data: "this is some data"
  };
});

Note if this doesn't work:

This example assumes that the create and interceptor calls are in a place where Jest can mock them out. Placing the axios.create or axiosInstance.interceptors.request.use lines outside the scope of the function may cause the above mocking to fail. This is an example file where Jest can mock them out:

const axios = require('axios');

const DEBUG = true;

const customRequest = (url) => {
  // Example of axios.create from https://www.npmjs.com/package/axios#axioscreateconfig
  const axiosInstance = axios.create({
    baseURL: 'https://some-domain.com/api/',
    timeout: 1000,
    headers: {'X-Custom-Header': 'foobar'}
  });

  // Example of interceptor taken from https://stackoverflow.com/a/52737325/7470360:
  axiosInstance.interceptors.request.use((config) => {
    if (DEBUG) { console.info("Request called", config); }
    return config;
  }, (error) => {
    if (DEBUG) { console.error("Request error ", error); }
    return Promise.reject(error);
  });

  return axiosInstance.get(url);
}

module.exports = customRequest;

The mocking code will mock out the axios.create call and the axiosInstance calls in customRequest. Moving either the creation or interception outside the function will cause the mocks to fail.

Upvotes: 7

Related Questions