mount.setProps() does not wait for rendering to complete
- Dominant language
- JavaScript
- Stars
- 19.8k
- Forks
- 2k
- PR merge metrics
- No merged PRs in 30d
Description
### Current behavior
The test below fails, because it _seems_ that `mount.setProps()` completes async.
So it says that `value1` is 1 (instead of the expected 3) and that `value2` is 2 (instead of the expected 4).
```javascript
import * as React from "react";
import { shallow, mount } from "enzyme";
import * as sinon from "sinon";
function ParentComponent(props: { value1: number, value2: number }) {
const [values, setValues] = React.useState([props.value1, props.value2]);
// This hook should trigger a re-render whenever value1 and/or value2 change
React.useEffect(() => {
setValues([props.value1, props.value2]);
}, [props]);
return (
<>
)
}
function ChildComponent(props: { value: number }) {
return {props.value};
}
describe("ParentComponent", () => {
it("should repond to change of props", () => {
const wrapper = mount();
// Simulate prop change
wrapper.setProps({ value1: 3, value2: 4 });
// Check if children have updated their props
const children = wrapper.find(ChildComponent);
expect(children.first().props().value).toBe(3);
expect(children.last().props().value).toBe(4);
});
});
```
### Expected behavior
As soon as I wrap the `expect` statements in a `setTimeout(..., 100)` the test completes OK.
Should this be necessary?
```javascript
...
// Simulate prop change
wrapper.setProps({ value1: 3, value2: 4 });
setTimeout(() => {
// Check if children have updated their props
const children = wrapper.find(ChildComponent);
expect(children.first().props().value).toBe(3);
expect(children.last().props().value).toBe(4);
}, 100);
...
```
### Your environment
OS: Windows 10 1903
Node: 8.12.0
Npm: 6.4.1
#### API
- [ ] shallow
- [x] mount
- [ ] render
#### Version
| library | version
| ------------------- | -------
| enzyme | 3.10.0
| react | 16.8.0
| react-dom | 16.8.0
#### Adapter
- [x] enzyme-adapter-react-16
- [ ] enzyme-adapter-react-16.3
- [ ] enzyme-adapter-react-16.2
- [ ] enzyme-adapter-react-16.1
- [ ] enzyme-adapter-react-15
- [ ] enzyme-adapter-react-15.4
- [ ] enzyme-adapter-react-14
- [ ] enzyme-adapter-react-13
- [ ] enzyme-adapter-react-helper
- [ ] others ( )
Contributor guide
Research direction
Start by running the provided mount-based reproduction with enzyme 3.10.0, React 16.8.0, and the enzyme-adapter-react-16 adapter. Trace mount.setProps() and the subsequent React effect to determine when rendering completes. Done means the assertions pass without wrapping them in setTimeout, with coverage for the reported prop update behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend, testing-qa
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100