[英]React Enzyme - Test `componentDidMount` Async Call
everyone. 大家。
I'm having weird issues with testing a state update after an async call happening in componentDidMount
. 我在componentDidMount
发生异步调用后测试状态更新时遇到了奇怪的问题。
Here's my component code: 这是我的组件代码:
'use strict';
import React from 'react';
import UserComponent from './userComponent';
const request = require('request');
class UsersListComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
usersList: []
};
}
componentDidMount() {
request('https://api.github.com/users', (err, res) => {
if (!err && res.statusCode === 200) {
this.setState({
usersList: res.slice(0)
});
}
else {
console.log(err);
}
});
}
render() {
if (!this.state.usersList.length) {
return null;
}
return (
<div className="users-list">
{ this._constructUsersList() }
</div>
);
}
_constructUsersList() {
return this.state.usersList.map((user, index) => {
return (
<UserComponent
key={ index }
name={ user.name }
age={ user.age } />
);
});
}
};
export default UsersListComponent;
Now, what I'm doing in my test files (I have a setup comprised of Mocha + Chai + Sinon, all working): 现在,我在我的测试文件中做了什么(我有一个由Mocha + Chai + Sinon组成的设置,所有工作):
import React from 'react';
import { expect } from 'chai';
import { shallow, mount, render } from 'enzyme';
import sinon from 'sinon';
import UsersListComponent from '../src/usersListComponent';
describe('Test suite for UsersListComponent', () => {
it('Correctly updates the state after AJAX call in `componentDidMount` was made', () => {
const server = sinon.fakeServer.create();
server.respondWith('GET', 'https://api.github.com/users', [
200,
{
'Content-Type': 'application/json',
'Content-Length': 2
},
'[{ "name": "Reign", "age": 26 }]'
]);
let wrapper = mount(<UsersListComponent />);
server.respond();
server.restore();
expect(wrapper.update().state().usersList).to.be.instanceof(Array);
console.log(wrapper.update().state().usersList.length);
});
});
State does not get updated, even though I call update()
on wrapper. 即使我在包装器上调用update()
,状态也不会更新。 Length is still 0. Am I missing something here? 长度仍然是0.我在这里错过了一些东西吗? Do I need to mock the server response in another way? 我是否需要以另一种方式模拟服务器响应?
Thnx for the help! Thnx的帮助!
You can abstract the user list retrieval away from the react component via passing a function that returns a Promise so that instead of 您可以通过传递一个返回Promise的函数来抽象反应组件中的用户列表检索,而不是
componentDidMount() {
request('https://api.github.com/users', (err, res) => {
if (!err && res.statusCode === 200) {
this.setState({
usersList: res.slice(0)
});
}
else {
console.log(err);
}
});
}
Replace it with 替换为
componentDidMount() {
var comp = this;
this.props.getUsers()
.then(function(usersList) {
comp.setState({
usersList: usersList
});
})
.catch(function (err) {
console.log(err);
});
}
And inside your test mock that getUsers
function: 在你的测试模拟中, getUsers
函数:
it('Correctly updates the state after AJAX call in `componentDidMount` was made', (done) => {
let resolveGetUsers;
let getUsers = function() {
return new Promise(function (resolve, reject) {
resolveGetUsers = resolve;
});
}
let wrapper = mount(<UsersListComponent getUsers={getUsers} />);
resolveGetUsers([{ "name": "Reign", "age": 26 }]);
// promise resolve happens in a subsequent event loop turn so move assertions inside setImmediate
setImmediate(() => {
expect(wrapper.update().state().usersList).to.be.instanceof(Array);
...
done();
});
}
Note that I have done this and it works for me (even without the wrapper.update() part) and here I tried to apply it to your code example without running it.. 请注意,我已经完成了这个并且它适用于我(即使没有wrapper.update()部分),在这里我尝试将它应用于您的代码示例而不运行它。
Also note that it should work in cases other then componentDidMount too - like having an async action triggered after clicking a button for example.. 另请注意,它应该适用于除了componentDidMount之外的其他情况 - 例如在单击按钮后触发异步操作。
I had a look at https://www.npmjs.com/package/request and figured out that the 'body' parameter is missing from the callback. 我查看了https://www.npmjs.com/package/request,并发现回调中缺少'body'参数。
It should look like 应该是这样的
...
request('https://api.github.com/users', (err, res, body) => {
if (!err && res.statusCode === 200) {
this.setState({
usersList: body.slice(0)
});
}
...
Give you my solution: 给你我的解决方案:
1- Mock data service 1-模拟数据服务
You must mock the data service (usually something like axios or an other HTTP library). 您必须模拟数据服务(通常类似于axios或其他HTTP库)。
File: __mocks__/LogDataService.js
: 文件: __mocks__/LogDataService.js
:
let searchData = {}
const LogDataService = {
search: () => new Promise((resolve, reject) =>
process.nextTick(() => resolve(searchData))
),
setSearchData: (data) => searchData = data
}
export default LogDataService
2- Tests 2-测试
File: __tests__/toto.test.js
: 文件: __tests__/toto.test.js
:
jest.mock('services/LogDataService')
import LogDataService from 'services/LogDataService';
// Declare a super promise that will synchro all promises
function flushPromises() {
return new Promise(resolve => setImmediate(resolve));
}
it('renders without data', async () => {
// Set dummy data
LogDataService.setSearchData([])
// The component we want to test that use
// LogDataService.search method we just mock up
const component = mount(<JobsExecutionTimeline />);
// wait
await flushPromises();
// re-build the render
component.update()
// Compare to snapshot
expect(toJson(component)).toMatchSnapshot();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.