如何使用Vitest对axios.create创建的实例进行单元测试？

错误原因 #

你遇到的TypeError: Cannot read properties of undefined (reading 'get')，是因为当前仅mock了axios本身的get方法，但clientsApi是通过axios.create()创建的独立实例，这个实例的get方法未被mock，导致调用时为undefined。

解决方案 #

方法一：Mock axios.create返回的实例 #

让axios.create()返回一个带有mockget方法的实例，覆盖原实例创建逻辑：

import axios from 'axios';
import { getCLients } from '../src/clients/composables/useClients';
import mockClients from './path/to/mockClients'; // 替换为你的mock数据路径

vi.mock('axios');

describe('getCLients', () => {
  it('应正确返回客户端数据', async () => {
    // 创建带mock get方法的axios实例
    const mockAxiosInstance = {
      get: vi.fn().mockResolvedValue({ data: mockClients })
    };
    // 让axios.create返回该mock实例
    (axios.create as vi.Mock).mockReturnValue(mockAxiosInstance);

    const result = await getCLients();
    // 验证返回结果
    expect(result).toEqual(mockClients);
    // 验证get方法的调用参数
    expect(mockAxiosInstance.get).toHaveBeenCalledWith('/clients');
    // 验证axios.create的初始化参数
    expect(axios.create).toHaveBeenCalledWith({
      baseURL: import.meta.env.VITE_API_URL
    });
  });
});

方法二：直接Mock clientsApi模块 #

跳过mock axios的步骤，直接mockclientsApi模块的默认导出（即目标axios实例），这种方式更简洁：

import { getCLients } from '../src/clients/composables/useClients';
import mockClients from './path/to/mockClients';

// 直接mock clientsApi模块
vi.mock('../src/clients/api/clientsApi', () => ({
  default: {
    get: vi.fn().mockResolvedValue({ data: mockClients })
  }
}));

describe('getCLients', () => {
  it('应正确返回客户端数据', async () => {
    const result = await getCLients();
    expect(result).toEqual(mockClients);

    // 导入mock的clientsApi验证调用行为
    const clientsApi = (await import('../src/clients/api/clientsApi')).default;
    expect(clientsApi.get).toHaveBeenCalledWith('/clients');
  });
});

注意事项 #

• 确保vi.mock()的路径与实际文件路径一致，避免路径错误导致mock失效
• 使用Vitest时，类型断言用vi.Mock代替jest.Mocked更贴合框架类型
• 测试前可通过vi.resetModules()清除模块缓存，避免交叉测试互相影响

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