How to mock axios.create([config]) function to return its instance methods instead of overriding them with mock?

Question

I'm trying to mock axios.create() because I'm using its instance across the app and obviously need all of its implementation which is destroyed by the mock, thus cannot get the result of the get, post method properly.

This is how the code looks like in the actual file:

 export const axiosInstance = axios.create({
        headers: {
           ...headers
        },
        transformRequest: [
            function (data, headers) {
                return data;
            },
        ],
    });
    const response = await axiosInstance.get(endpoint);

And here is the mock setup for axios inside the test file

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

How could I get all of the instance methods in the axiosInstance variable instead of just having a mock function which does nothing?

Documentation for axios.create and instance methods: https://github.com/axios/axios#instance-methods

Ayurveda

Presumably in the rest of the code you just import and use the axiosInstance, so why not mock that instead of Axios itself? Or if you're going to mock create, your test double should do what the thing it's replacing does, move the get mock into an object returned by the create mock. – Extravagancy

ok, instead of mocking the axiosInstance entirely you are suggesting to return axios.get mocked to axios.create but that again leaves me without other XHR methods – Ayurveda

That does mock axiosInstance entirely, because it's the return from create; you need to think more carefully about what you're replacing. Yes, you'd need to add the other methods you use to the replacement. But again, if this mock is for testing the rest if your code the fact that the instance comes from Axios.create is an implementation detail you can hide. – Extravagancy

@Extravagancy would you be able to give an example of this as an answer – Ayurveda

@Extravagancy also with the first approach if I mock the entire import I again need to pass the whole object of instance methods which leads me to the same thing.. – Ayurveda

Answer 1

Ended up sticking with the axios mock and just pointing to that mock by assigning the axiosInstance pointer to created axios mock. Basically as @jonrsharpe suggested

Briefly:

import * as m from 'route';
jest.mock('axios', () => {
        return {
            create: jest.fn(),
            get: jest.fn(() => Promise.resolve()),
        };
    }
);
m.axInstance = axios

Would be very nice though if I could have gone without it.

Ayurveda

Note: the downside of this solution is if axios release backwards-incompatible removing the create method - the test would still pass (unlike when using the auto-mock) – Lineation

Answer 2

You can use jest's genMockFromModule. It will generate jest.fn() for each of the modules's methods and you'll be able to use .mockReturnThis() on create to return the same instance.

example:

./src/__mocks__/axios.js

const axios = jest.genMockFromModule('axios');

axios.create.mockReturnThis();

export default axios;

working example

---

Edit:

from Jest 26.0.0+ it's renamed to jest.createMockFromModule

Lineation

Didn't quite help but tnx for the effort, I have some other weird things going on in the code so it's not that straightforward, +1 though – Ayurveda

can you please check this #64961704 – Flamenco

.genMockFromModule() is deprecated as of jest 26.0.0+ you should use jest.createMockFromModule(moduleName) instead. – Conspicuous

Answer 3

Since I need to manage Axios instances, I need a way of retrieving the mocks that are created so I can manipulate the responses. Here's how I did it.

import type { AxiosInstance, AxiosStatic } from 'axios';

const mockAxios = jest.createMockFromModule<AxiosStatic>('axios') as jest.Mocked<AxiosStatic>;

let mockAxiosInstances: jest.Mocked<AxiosInstance>[] = [];

mockAxios.create = jest.fn((defaults) => {
  const mockAxiosInstance = jest.createMockFromModule<AxiosInstance>(
    'axios'
  ) as jest.Mocked<AxiosInstance>;
  mockAxiosInstance.defaults = { ...mockAxiosInstance.defaults, ...defaults };
  mockAxiosInstances.push(mockAxiosInstance);
  return mockAxiosInstance;
});

export function getMockAxiosInstances() {
  return mockAxiosInstances;
}
export function mostRecentAxiosInstanceSatisfying(fn: (a: AxiosInstance) => boolean) {
  return mockAxiosInstances.filter(fn).at(-1);
}
export function clearMockAxios() {
  mockAxiosInstances = [];
}

export default mockAxios;

I added three additional methods:

• clearMockAxios which clears the instance list
• getMockAxiosInstances which gets the list of axios instances that are generated by axios.create
• mostRecentAxiosInstanceSatisfying is a function that will do a filter to get the most recent axios instance that satisfies the predicate. This is what I generally use in the test case since React may render more than expected (or as expected) and I generally just need the last instance.

I use it as follows:

import { getMockAxiosInstances, mostRecentAxiosInstanceSatisfying, clearMockAxios } from '../../__mocks__/axios';

it("...", () => {

  ...
  
  const mockAppClient = mostRecentAxiosInstanceSatisfying(
    a => a.defaults.auth?.username === "myusername"
  );
  mockAppClient.post.mockImplementation(() => {
    return Promise.resolve({ data: "AAA" })
  })

  ... do something that calls the client ...

});

Alake

Answer 4

The following code works!

jest.mock("axios", () => {
    return {
        create: jest.fn(() => axios),
        post: jest.fn(() => Promise.resolve()),
    };
});

Stanislaus