如何模拟从独立模块导入的Axios Instance并返回模拟数据？

直接模拟你导入到React组件中的AxiosInstance更简单直接，不用绕到axios底层的create方法，能减少不必要的层级模拟。下面分两种方案说明：

方案一：直接模拟ApiHandler模块 #

这是最推荐的方式，因为你的组件直接依赖的是AxiosInstance而非原始axios。

// 在测试文件顶部模拟ApiHandler模块
jest.mock('../../common/ApiHandler', () => ({
  post: jest.fn(() => Promise.resolve({ data: { mocked_data: '测试返回数据' } }))
}));

在测试用例中，你可以直接获取这个mock函数，验证调用逻辑和返回值：

import AxiosInstance from '../../common/ApiHandler';
import yourComponentFunction from './你的组件文件';

test('测试post请求函数逻辑', async () => {
  // 调用要测试的函数
  await yourComponentFunction();

  // 断言post方法是否被正确调用（参数按需调整）
  expect(AxiosInstance.post).toHaveBeenCalledWith('/target-api-url', { key: 'value' });
  
  // 后续可以根据返回的模拟数据，断言组件状态或逻辑是否正确
});

方案二：模拟原始axios（不推荐但可行） #

如果你一定要模拟axios本身，需要修正你之前代码里的语法错误：

1. create返回的箭头函数需要用括号包裹对象，否则post会被当成函数体语句而非对象属性
2. Promise.resolve的参数要写成合法的对象格式

修正后的代码：

jest.mock('axios', () => ({
  create: jest.fn(() => ({
    post: jest.fn(() => Promise.resolve({ data: { mocked_data: '测试返回数据' } }))
  }))
}));

这种方式需要确保ApiHandler里的axios.create被正确mock，但因为你的组件直接使用的是AxiosInstance，所以方案一的耦合度更低，测试逻辑更清晰。

你之前的代码无法生效，核心是两个语法错误：箭头函数返回对象时未加括号，以及Promise.resolve里的对象写法不合法。

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