Create React App+Jest环境下Mock Axios实例测试get请求报错如何解决

问题原因 #

报错是因为api.get()调用后返回值为undefined，本质是你当前 mock 底层axios模块的方式没有正确作用到ApiCrud引入的axiosInstance实例上。单元测试建议优先 mock 直接依赖而非深层依赖，你已经单独编写了axiosInstance的测试用例，所以这里直接 mockaxiosInstance模块即可，无需关心底层axios的实现逻辑。

修复方案（推荐） #

直接修改apiCrud.test.js，删除原来对axios的 mock 逻辑，替换为 mock 你自己的axiosInstance模块：

import ApiCrud from "../../../../utils/api/base/ApiCrud";
// 导入mock的axiosInstance用于后续断言（可选）
import { axiosInstance as api } from "../../../../utils/api/base/axiosInstance";

const mockedGet = {
  email: "info@example.com",
}

// 直接mock axiosInstance模块
jest.mock('../../../../utils/api/base/axiosInstance', () => ({
  axiosInstance: {
    get: jest.fn(() => Promise.resolve({ data: mockedGet })),
  }
}))

describe('Test API crud', () => {
  // 每次测试前重置mock调用记录（可选）
  beforeEach(() => {
    api.get.mockClear();
  });

  it ('Test can get base url', () => {
    const apiCrud = new ApiCrud('/fake-url');
    expect(apiCrud.getBaseUrl()).toBe('/fake-url');
  });

  // 也可以用async/await写法更清晰
  it ('Test can fetch items', async () => {
    const apiCrud = new ApiCrud('/fake-url');
    const data = await apiCrud.fetchItems();
    expect(data).toEqual(mockedGet);
    // 额外验证get方法调用参数正确（可选）
    expect(api.get).toHaveBeenCalledWith('/fake-url');
  });
});

保留原mock axios方式的修复方案 #

如果你一定要保留对axios的 mock 逻辑，只需要在测试用例中手动给axiosInstance的get方法绑定 mock 实现即可：

import ApiCrud from "../../../../utils/api/base/ApiCrud";
import { axiosInstance as api } from "../../../../utils/api/base/axiosInstance";

const mockedGet = {
  email: "info@example.com",
}

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

describe('Test API crud', () => {
  it ('Test can get base url', () => {
    const apiCrud = new ApiCrud('/fake-url');
    expect(apiCrud.getBaseUrl()).toBe('/fake-url');
  });

  it ('Test can fetch items', async () => {
    // 手动给get方法绑定返回值
    api.get.mockResolvedValue({ data: mockedGet });
    const apiCrud = new ApiCrud('/fake-url');
    const data = await apiCrud.fetchItems();
    expect(data).toEqual(mockedGet);
  });
});

内容的提问来源于stack exchange，提问作者sineverba