开玩笑/酶错误:“方法'setState'仅用于在单个节点上运行.改为找到3个." [英] Jest/Enzyme Error: "Method 'setState' is only meant to run on a single node. 3 found instead."
问题描述
我对在React应用程序上使用酶/Jest进行测试还很陌生,所以我设置测试的方式可能有问题.
I'm fairly new to testing with Enzyme/Jest on a React application, so perhaps there's something wrong with the way I'm setting up my test.
我特别想在组件中测试单个功能:reviewCandidate()
I specifically want to test a single function in my component: reviewCandidate()
reviewCandidate() {
const { candidate_id: candidateId, } = this.props.match.params;
const { latest_application_id: latestApplication, } = this.state.candidateInfo;
const { expressApi, } = this.props;
/** @todo Define user when authentication is in place */
const user = 'undefined';
expressApi.addReviewedCandidate(
parseInt(candidateId, 10),
latestApplication,
user,
// comment,
).then(() => {
// If the API call is successful, have the state reflect this accordingly
this.setState({
reviewInfo: {
candidate_id: candidateId,
last_application_reviewed: latestApplication,
user,
// comment: comment
},
});
// Pop-up a snackbar indicating a successful review
this.props.setSnackbar({
open: true,
message: <span>Candidate_{candidateId} marked as reviewed</span>,
});
});
}
使用Web应用程序时,它可以正常工作而不会发出任何警告.当我尝试使用Jest/Enzyme测试它时,就会出现问题.
It works without any warnings when using the web application. The issue arises when I try to test it using Jest/Enzyme.
这是我为上述功能编写的测试:
Here is the test I have written for the above function:
describe('Reviewing Candidates', () => {
const mockCandidateReviewStatus = [];
const mockApplicationsOfCandidate = {/* mock data */};
const mockExpressApi = {
applicationsOfCandidate() {
return new Promise(resolve => resolve(mockApplicationsOfCandidate));
},
candidateReviewStatus() {
return new Promise(resolve => resolve(mockCandidateReviewStatus));
},
addReviewedCandidate() {
return new Promise(resolve => resolve());
},
};
const handleError = error => error;
it('ensures reviewedCandidates() is called correctly', async() => {
const setSnackbar = jest.fn(() => 'foobar');
const wrapper = shallow(
<Candidate
expressApi={mockExpressApi}
handleError={handleError}
match={{
params: {
candidate_id: 153,
},
}}
utils={utils}
setSnackbar={setSnackbar}
/>
);
/**
* These wrapper.update() calls ensure componentDidMount() finish setting
* the state of the component
*
* Unsure if this is the best way to deal with waiting for
* componentDidMount() to finish
*/
await wrapper.update();
await wrapper.update();
await wrapper.instance().reviewCandidate();
/**
* @todo: Check this.state.reviewInfo is set as expected
*/
expect(setSnackbar).toHaveBeenCalled();
});
});
但是await wrapper.instance().reviewCandidate()
调用使酶崩溃.
Error: Method "setState" is only meant to be run on a single node. 3 found instead.
at ShallowWrapper.single (/path/to/project/node_modules/enzyme/build/ShallowWrapper.js:1828:17)
at ShallowWrapper.setState (/path/to/project/node_modules/enzyme/build/ShallowWrapper.js:575:14)
at Candidate.ShallowWrapper.instance.setState (/path/to/project/node_modules/enzyme/build/ShallowWrapper.js:217:35)
at expressApi.addReviewedCandidate.then (/path/to/project/src/components/Candidate.js:514:12)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
如果我在API调用后在.then()
中将this.setState
调用注释掉:
If I comment out the this.setState
call in the .then()
after the API call:
reviewCandidate() {
// ...
expressApi.addReviewedCandidate(
// ...
).then(() => {
// If the API call is successful, have the state reflect this accordingly
/*
this.setState({
reviewInfo: {
candidate_id: candidateId,
last_application_reviewed: latestApplication,
user,
// comment: comment
},
});
*/
// Pop-up a snackbar indicating a successful review
this.props.setSnackbar({
open: true,
message: <span>Candidate_{candidateId} marked as reviewed</span>,
});
});
}
然后测试可以正常进行:
Then the test works without any issues:
PASS test/Candidate.test.js (15.954s)
PASS test/Main.test.js
Test Suites: 2 passed, 2 total
Tests: 17 passed, 17 total
Snapshots: 0 total
Time: 20.378s
Ran all test suites related to changed files.
----------------------------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
----------------------------|----------|----------|----------|----------|-------------------|
All files | 31.05 | 24.58 | 23.04 | 31.88 | |
src | 0 | 0 | 0 | 0 | |
index.js | 0 | 0 | 0 | 0 | 1,2,3,4,5,6,7,9 |
src/components | 43.93 | 38.41 | 33.86 | 44.92 | |
Candidate.js | 62.41 | 60.87 | 50 | 62.59 |... 88,489,492,616 |
Main.js | 92.31 | 88.89 | 79.31 | 92.21 |... 34,342,354,363 |
----------------------------|----------|----------|----------|----------|-------------------|
以防万一,这是相关的,下面是调用测试中的Mock API调用的同一组件中的componentDidMount()
函数:
In-case it is relevant, here is the componentDidMount()
function in the same component that calls the Mock API calls in the test:
componentDidMount() {
const candidateId = this.props.match.params.candidate_id;
Promise.all([
this.props.expressApi.applicationsOfCandidate(candidateId),
this.props.expressApi.candidateReviewStatus(candidateId),
]).then((data) => {
const candidateInfo = data[0][this.props.match.params.candidate_id];
const reviewInfo = data[1][0];
this.setState({ /* Sets various state parameters based on what was returned from the API calls*/ });
}).catch((err) => {
this.props.handleError(err);
this.setState({
error: err,
});
});
}
我在做什么导致Error: Method setState is only meant to be run on a single node. 3 found instead.
?
如果需要提供有关组件本身的更多信息,请告诉我.
Please let me know if I need to provide more information about the component itself.
在此先感谢您的帮助.
推荐答案
wrapper.update()
不应该存在.它不返回承诺并且不能被await
.默认情况下,酶已经运行了生命周期挂钩,包括componentDidMount
.
wrapper.update()
shouldn't be there. It doesn't return a promise and cannot be await
ed. Enzyme already runs lifecycle hooks by default, including componentDidMount
.
问题是componentDidMount
不可测试,并且无法实现承诺.应该将其提取为返回可以链接的promise的方法:
The problem is componentDidMount
isn't testable and doesn't expose a promise. It should be extracted to a method that returns a promise that could be chained:
loadSomething() {
const candidateId = this.props.match.params.candidate_id;
return Promise.all([
this.props.expressApi.applicationsOfCandidate(candidateId),
this.props.expressApi.candidateReviewStatus(candidateId),
]).then((data) => {
const candidateInfo = data[0][this.props.match.params.candidate_id];
const reviewInfo = data[1][0];
this.setState({ ... });
}).catch((err) => {
this.props.handleError(err);
this.setState({
error: err,
});
});
}
componentDidMount() {
this.loadSomething();
}
然后可以在一个测试中将其存根:
Then it can be stubbed in one test:
jest.stub(Candidate.prototype, 'loadSomething')
shallow(<Candidate .../>);
expect(shallow.instance().loadSomething).toHaveBeenCalledTimes(1);
并直接在另一个环境中进行测试:
And tested directly in another:
shallow(<Candidate .../>, { disableLifecycleMethods: true });
await shallow.instance().loadSomething();
expect(shallow.state(...))...
这篇关于开玩笑/酶错误:“方法'setState'仅用于在单个节点上运行.改为找到3个."的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!