如何模拟从单独模块导入的 Axios 实例？

Question

In my react component I have:

import AxiosInstance from '../../common/ApiHandler'

where in ApiHandler.js I create an AxiosInstance

AxiosInstance = axios.create(defaultOptions);

export default AxiosInstance;

I am trying to write a unit test for a function where this AxiosInstance does a post request. Should I mock axios itself or should I mock the AxiosInstance imported into the react component? How would I mock it so it returns some mock data?

I originally tried the code below but this did not seem to return the data the way I wanted.

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

Answer 1

I would always recommend creating mocks for the system under test. Your component doesn't know about axios , only the AxiosInstance so that is what you should mock

import AxiosInstance from "../../common/ApiHandler";

jest.mock("../../common/ApiHandler", () => ({
  __esModule: true,
  default: { // add mock functions for whatever methods your component uses
    post: jest.fn(),
  },
}));

In your tests you can configure the responses. For example

// A successful response
AxiosInstance.post.mockResolvedValue({ data: mocked_data });

// A failed response
AxiosInstance.post.mockRejectedValue({ status: 400 });

---

Regarding __esModule: true , see the documentation ...

When using the factory parameter for an ES6 module with a default export, the __esModule: true property needs to be specified.

---

You could also create a more general manual mock of ApiHandler that can be re-used in any of your tests

// common/__mocks__/ApiHandler.js

export default {
  get: jest.fn(),
  post: jest.fn(),
};

Then your tests can use a simpler mock without a factory function

import AxiosInstance from "../../common/ApiHandler";

jest.mock("../../common/ApiHandler");