enzymejs / enzymejs/enzyme

mount.setProps() does not wait for rendering to complete

Open
#2,276 1 comment 4 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.