每个人。
在componentDidMount
中发生异步调用之后,我在测试状态更新时遇到了奇怪的问题。
这是我的组件代码:
'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;
现在,我在测试文件中正在执行的操作(我的设置由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);
});
});
即使我在包装器上调用
update()
,状态也不会得到更新。长度仍然为0。我在这里缺少什么吗?我是否需要以其他方式模拟服务器响应?Thnx的帮助!
最佳答案
您可以通过传递一个返回Promise的函数来使用户列表检索远离react组件,从而代替
componentDidMount() {
request('https://api.github.com/users', (err, res) => {
if (!err && res.statusCode === 200) {
this.setState({
usersList: res.slice(0)
});
}
else {
console.log(err);
}
});
}
替换为
componentDidMount() {
var comp = this;
this.props.getUsers()
.then(function(usersList) {
comp.setState({
usersList: usersList
});
})
.catch(function (err) {
console.log(err);
});
}
并在您的测试模型中添加
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();
});
}
请注意,我已经做到了这一点,并且对我有用(即使没有wrapper.update()部分),在这里我尝试不运行它就将其应用于您的代码示例。
还要注意,它也应该在componentDidMount以外的其他情况下也可以工作-例如在单击按钮后触发异步操作。