获取"_axios.default.create 不是函数"，当尝试测试使用 Jest 进行 axios 调用的组件时

Question

我试图使用Jest/Enzyme来测试axios函数是否通过。我尝试了各种解决方案，嘲弄的方式，以及只是重新设计组件本身，让测试识别axios请求，但我一直得到相同的错误。

在这一点上，我已经修改了我的测试，以通过axios失败，然后我将返回到条件通过/失败测试。现在我的测试很简单:

import { shallow }  from 'enzyme';
import Assets from '../src/components/App';
jest.mock('axios', () => {
return {
__esModule: true,
default: jest.fn()
}
});
describe("Component", () => {
const component = shallow(<App />);    
})

，然后返回错误:

TypeError: _axios.default.create is not a function

应用程序的问题有一个引用axios请求从另一个文件在app .js有一个命令:

let response = await axiosGetTest.get('...');

axiosGetTest是另一个文件中的函数，在这个文件中我们有:

const axiosGetTest = axios.create({
baseURL: '...',
timeout: 15000,
headers: {
...
}
});

抱歉，如果解释是粗糙的，我对JavaScript中的单元测试非常陌生

Answer 1

下面是一个单元测试示例:

App.jsx:

import React, { Component } from 'react';
import axios from 'axios';
const axiosGetTest = axios.create({
baseURL: 'http://localhost:3000',
timeout: 15000,
headers: {},
});
export default class App extends Component {
constructor(props) {
super(props);
this.state = { user: { name: '' } };
}
componentDidMount() {
axiosGetTest.get('/api/user').then((user) => this.setState({ user }));
}
render() {
const { user } = this.state;
return <div>{user.name}</div>;
}
}

App.test.jsx:

import { shallow } from 'enzyme';
import axios from 'axios';
import App from './App';
import { act } from 'react-dom/test-utils';
async function flushEffects() {
await act(async () => {
await new Promise((resolve) => setTimeout(resolve, 0));
});
}
jest.mock('axios', () => {
const mAxiosInstance = { get: jest.fn() };
return {
create: jest.fn(() => mAxiosInstance),
};
});
describe('66465749', () => {
afterAll(() => {
jest.resetAllMocks();
});
it('should pass', async () => {
axios.create().get.mockResolvedValueOnce({ name: 'teresa teng' });
const wrapper = shallow(<App></App>);
expect(wrapper.state('user')).toEqual({ name: '' });
await flushEffects();
expect(wrapper.state('user')).toEqual({ name: 'teresa teng' });
});
});

单元测试结果:

PASS  examples/66465749/App.test.jsx
66465749
✓ should pass (16 ms)
----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 |                   
App.jsx  |     100 |      100 |     100 |     100 |                   
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.68 s, estimated 4 s

源代码:https://github.com/mrdulin/jest-v26-codelab/tree/main/examples/66465749