在Jest中为Axios的get、post方法编写Mock时出现mockResolvedValue非函数报错

现有测试实现 #

//...
jest.mock('axios');
axios.get.mockResolvedValue({ data: '' });
axios.post.mockResolvedValue(null);

test('should match snapshot', () => {
  const { asFragment } = renderComponent();
  expect(asFragment()).toMatchSnapshot();
});
//...

参考的官方示例代码 #

// users.test.js
import axios from 'axios';
import Users from './users';

jest.mock('axios');

test('should fetch users', () => {
  const users = [{name: 'Bob'}];
  const resp = {data: users};
  axios.get.mockResolvedValue(resp);

  // 可根据实际场景选择以下写法
  // axios.get.mockImplementation(() => Promise.resolve(resp))

  return Users.all().then(data => expect(data).toEqual(users));
});

运行时报错 #

TypeError: _axios.axios.get.mockResolvedValue is not a function

常见原因与修复方案 #

• 导入方式不匹配
  若测试文件使用import * as axios from 'axios'这类命名空间导入，会与jest.mock自动生成的mock对象结构错位，导致get/post并非可被mock的jest函数。需统一使用import axios from 'axios'的默认导出写法，与jest的mock替换逻辑对齐。
• 执行顺序错乱
  若在jest.mock('axios')调用之前执行axios.get.mockResolvedValue()逻辑，此时拿到的是原生真实Axios实例，不具备jest mock方法的属性。需将mock赋值逻辑放在jest.mock调用之后，推荐统一放到beforeEach钩子中执行，避免模块初始化顺序混乱。
• Axios 版本兼容问题
  早期Axios（v0.x版本）的模块导出结构与ES模块转译规则不兼容，会导致jest自动mock识别错误。此时可显式传入mock工厂函数，手动定义mock结构：

  jest.mock('axios', () => ({
    get: jest.fn(),
    post: jest.fn(),
    // 项目中用到的其他Axios方法需在此处显式声明
  }))
  

• TypeScript 类型识别偏差
  若项目使用TypeScript，未对Axios的mock方法做类型声明，会出现运行时方法不匹配的问题。需通过类型断言将Axios实例标记为jest的Mock类型：

  jest.mock('axios');
  const mockedAxios = axios as jest.Mocked<typeof axios>;
  mockedAxios.get.mockResolvedValue({ data: '' });
  mockedAxios.post.mockResolvedValue(null);
  

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