"TypeError: mock.onGet is not a function" 同时使用 axios-mock-adapter 嘲笑公理

Question

我正在尝试axios-mock-adapter主页中给出的非常基本的测试，但得到上述错误。如有任何帮助，不胜感激。

---

src/fakeAxios.spec.js:

var axios = require("axios");
var MockAdapter = require("axios-mock-adapter");
it("fakeAxios", async () => {
var mock = new MockAdapter(axios);

mock.onGet("/users").reply(200, {
users: [{ id: 1, name: "John Smith" }],
});

axios.get("/users").then(function (response) {
console.log(response.data);
});
mock.restore();
});

---

package.json:

{
"name": "redux-app-v3",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "react-scripts start",
"test": "react-scripts test"
},
"jest": {
"moduleNameMapper": {
"axios": "axios/dist/node/axios.cjs"
}
},
"author": "",
"license": "ISC",
"dependencies": {
"@reduxjs/toolkit": "^1.9.3",
"axios": "^1.3.5",
"moment": "^2.29.4",
"react-scripts": "^5.0.1"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "^7.21.4",
"@babel/eslint-parser": "^7.21.3",
"@babel/preset-env": "^7.21.4",
"@types/jest": "^29.5.0",
"axios-mock-adapter": "^1.21.4",
"babel-jest": "^29.5.0",
"jest": "^27.5.1"
}
}

运行'npm test'时出错:

PASS  src/math.spec.js
FAIL  src/fakeAxios.spec.js
● fakeAxios
**TypeError: mock.onGet is not a function**
5 |   var mock = new MockAdapter(axios);
6 |   
>  7 |   mock.onGet("/users").reply(200, {
|        ^
8 |     users: [{ id: 1, name: "John Smith" }],
9 |   });
10 |   
at Object.<anonymous> (src/fakeAxios.spec.js:7:8)
Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 failed, 2 passed, 3 total
Snapshots:   0 total
Time:        0.638 s, estimated 1 s
Ran all test suites related to changed files.

---

我尝试了这个建议，但仍然得到相同的错误

jest.config.json:

{
"transformIgnorePatterns": [
"/node_modules/(?!axios)"
]
}

---

我也试过在包中添加这个配置。Json，再次得到相同的错误:package.json:

...
"jest": {
"moduleNameMapper": {
"axios": "axios/dist/node/axios.cjs"
},
"transformIgnorePatterns": [
"/node_modules/(?!axios)"
]
},
...

---

只是为了完成，这是math.spec.js，它工作得很好:

const isEven = number => number % 2 === 0;
it("isEven", () => {
const result = isEven(2);
expect(result).toEqual(true);
});
it("isEven", () => {
const result = isEven(1);
expect(result).toEqual(false);
});

Answer 1

我让它工作的一种方法是规避问题，不使用axios-mock-adapter，只是像这样mock请求自己:

import axios from 'axios';
jest.mock('axios');
//This is only really needed for TypeScript - for JS you can just write axios.get.mockImplentation(...) below
const mockedAxios = axios as jest.Mocked<typeof axios>;
mockedAxios.get.mockImplementation((url) => {
if (url === '/users') {
return Promise.resolve({ data: {
users: [{ id: 1, name: "John Smith" }]
} })    
}
});

这只模拟get请求，你可以添加更多的post等方法，如mockedAxios.post.mockImplementation(…)。
这基本上是用mock覆盖默认axios行为，你应该能够在你的src/fakeAxios.spec.js

中实现它

Answer 2

最后，它变成了一个简单的修复

在package.json更新testcmd如下:

"scripts": {
"test": "react-scripts test --transformIgnorePatterns "node_modules/(?!axios)/"",
},

其他方法对我都不起作用。

还删除了package.json中的"jest"部分，并删除了jest.config.json。不需要做这些修改。