使用axios-mock-adapter时构造函数返回Promise，调用onGet报错

问题重现 #

使用axios@1.3.3和axios-mock-adapter@1.21.2模拟API请求时，创建MockAdapter实例后调用onGet方法触发以下错误：

mock.onGet is not a function
TypeError: mock.onGet is not a function
at Object. (/Users/api/tests/api.test.ts:7:8)
at Promise.then.completed (/Users/node_modules/react-scripts/node_modules/jest-circus/build/utils.js:391:28)
at new Promise ()

对应代码：

import MockAdapter from "axios-mock-adapter";
import axios from "axios";

const mock = new MockAdapter(axios.create());

it("should mock", () => {
  mock.onGet("/test", { data: "test" });

  expect(true).toBeTruthy();
});

解决方案 #

1. 确认axios实例的有效性 #

axios.create()默认同步返回AxiosInstance，如果你的环境中这个方法被第三方插件或自定义逻辑修改，意外返回了Promise，会导致MockAdapter接收错误参数，最终实例异常。

先验证axios实例类型：

const axiosInstance = axios.create();
console.log(axiosInstance); // 输出应为AxiosInstance对象，而非Promise

如果发现axios.create()确实有问题，可直接传入全局axios实例替代：

const mock = new MockAdapter(axios);

2. 升级axios-mock-adapter版本 #

部分旧版本的axios-mock-adapter与axios 1.x存在兼容瑕疵，升级到最新稳定版即可解决：

npm install axios-mock-adapter@latest
# 或使用yarn：yarn add axios-mock-adapter@latest

3. 规范MockAdapter的使用方式 #

• 确保正确导入默认导出的MockAdapter类，不要误用命名导入
• 构造函数是同步的，不要用await包裹实例化代码（这会把mock变成Promise）

正确的导入与实例化：

import MockAdapter from "axios-mock-adapter";
import axios from "axios";

const mock = new MockAdapter(axios.create());

4. 规避测试上下文污染 #

如果多个测试用例共享同一个mock实例，可能出现变量被覆盖的情况。建议在每个测试用例前重新创建mock实例：

let mock;

beforeEach(() => {
  mock = new MockAdapter(axios.create());
});

it("should mock", () => {
  mock.onGet("/test").reply(200, { data: "test" });
  // 测试逻辑...
});

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