Next.js中Axios真实请求与Mock请求冲突：originalAdapter不是函数

错误原因 #

你遇到的错误是因为在开发环境（localhost:3000）中，全局axios实例被axios-mock-adapter修改了adapter。你的api实例是通过axios.create()基于全局axios创建的，当mock模块被导入并初始化时，全局axios的adapter被替换为mock适配器，导致真实请求执行时，mock内部逻辑调用originalAdapter失败（因为它不是可用的函数）。

解决方案 #

1. 仅在Jest测试环境中加载mock适配器 #

不要在开发/生产环境的代码中导入mock模块，只在测试文件内部初始化mock：

// 示例测试文件：goals.test.js
import api from '../path/to/your/api-file';
import MockAdapter from 'axios-mock-adapter';

// 仅在测试中初始化mock
const mock = new MockAdapter(api);

// 编写测试逻辑
test('fetch goals successfully', async () => {
  mock.onGet('/your-api-path').reply(200, { body: ['goal1', 'goal2'] });
  
  // 执行测试断言
});

2. 用环境变量控制mock初始化 #

如果必须保留独立的mock模块，通过环境变量判断只在测试环境初始化：

// mock模块文件
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

let mock = null;
// 仅在测试环境初始化mock
if (process.env.NODE_ENV === 'test') {
  mock = new MockAdapter(axios);
}

export default mock;

这样开发环境下mock不会被初始化，不会干扰真实请求。

3. 针对api实例单独mock（推荐） #

因为你的api是独立的axios实例，测试时直接mock这个实例而非全局axios，避免全局污染：

// 测试文件中
import api from '../path/to/your/api-file';
import MockAdapter from 'axios-mock-adapter';

const mock = new MockAdapter(api);

// 设置mock响应
mock.onGet(apiUrl).reply(200, { body: [] });

额外排查点 #

检查项目中是否有在开发环境下意外导入mock模块的代码（比如某个页面/组件import了mock组件），这会导致全局axios被修改，引发冲突。

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