Jest酶测试案例模拟API与Moxios不工作

Question

这里是组件代码，我用getAllData方法调用API并将数据设置为状态：

class MyComponent extends Component {
state = {
allStatus: []
}
componentDidMount() {
this.getAllData();
}
getAllData = async() => {
let res = await apiCalls(`${Config.masterUrl}/ContentState`, 'GET', {}, `/user-data`, false);
if (res) {
this.setState({allStatus: res});
}
}
}

以下是测试用例：首先我调用componentDidMount并调用方法getAllData，然后用moxios模拟API，但它不模拟请求。

describe('Render MyComponent Component', () => {
let wrapper;
beforeEach(() => {
wrapper = setup(initialState);
moxios.install();
});
afterEach(() => {
moxios.uninstall();
})

it("should call getAllData API Success",  async(done) => {
const responseData = {
status: 200,
error: null,
data: [Array] // for example
}
await wrapper.instance().componentDidMount();
await wrapper.instance().getAllData()
moxios.wait(function() {
const request = moxios.requests.mostRecent();
request.respondWith(responseData)
expect(wrapper.instance().state.allStatus.length).not.toBe(0)
done()
})
})
})

Answer 1

1. 您不需要手动调用componentDidMount()和getAllData()方法

与Enzyme v3一样，shallowAPI确实调用React生命周期方法，如componentDidMount和componentDidUpdate

2. 您应该先安装moxios，然后浅层渲染组件。因为当我们浅层渲染(调用componentDidMount和getAllData(组件时，mock应该已经准备好了。

3. responsdWith方法的返回值是promise，您应该确保它已被解析/拒绝。因此，你需要在承诺被解决或拒绝后做出断言。

例如

MyComponent.tsx:

import axios from 'axios';
import React, { Component } from 'react';
async function apiCalls(url, method) {
return axios({ url, method }).then((res) => res.data);
}
export class MyComponent extends Component {
state = {
allStatus: [],
};
componentDidMount() {
this.getAllData();
}
getAllData = async () => {
let res = await apiCalls(`http://localhost:3000/api/ContentState`, 'GET');
if (res) {
this.setState({ allStatus: res });
}
};
render() {
return <div>MyComponent</div>;
}
}

MyComponent.test.tsx:

import React from 'react';
import { shallow } from 'enzyme';
import moxios from 'moxios';
import { MyComponent } from './MyComponent';
describe('Render MyComponent Component', () => {
let wrapper;
beforeEach(() => {
moxios.install();
wrapper = shallow(<MyComponent></MyComponent>);
});
afterEach(() => {
moxios.uninstall();
});
it('should call getAllData API Success', (done) => {
const responseData = {
status: 200,
response: [1, 2, 3],
};
moxios.wait(function () {
const request = moxios.requests.mostRecent();
request.respondWith(responseData).then(() => {
expect(wrapper.state('allStatus')).toHaveLength(3);
done();
});
});
});
});

单元测试结果：

PASS  examples/65702308/MyComponent.test.tsx (5.34 s)
Render MyComponent Component
✓ should call getAllData API Success (246 ms)
-----------------|---------|----------|---------|---------|-------------------
File             | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------------|---------|----------|---------|---------|-------------------
All files        |     100 |       50 |     100 |     100 |                   
MyComponent.tsx |     100 |       50 |     100 |     100 | 17                
-----------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        6.505 s