[英]React Enzyme - Test `componentDidMount` Async Call
大家。
我在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的函數來抽象反應組件中的用戶列表檢索,而不是
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之外的其他情況 - 例如在單擊按鈕后觸發異步操作。
我查看了https://www.npmjs.com/package/request,並發現回調中缺少'body'參數。
應該是這樣的
...
request('https://api.github.com/users', (err, res, body) => {
if (!err && res.statusCode === 200) {
this.setState({
usersList: body.slice(0)
});
}
...
給你我的解決方案:
1-模擬數據服務
您必須模擬數據服務(通常類似於axios或其他HTTP庫)。
文件: __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__/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.