Lots of warnings about "act" for promise based callbacks
- Dominant language
- JavaScript
- Stars
- 19.8k
- Forks
- 2k
- PR merge metrics
- No merged PRs in 30d
Description
### Current behaviour
I've got a component that has a save button. This calls a function (passed via props) that returns a promise - and the component disables the save button while the save is in progress. I'm using typescript and async/await to handle promises:
```
setUpdating(true);
try {
await props.onSave(occurrence);
} catch (e) {
setCreateUpdateError(e.message);
} finally {
setUpdating(false);
}
```
This causes lots and lots of "please wrap your component in 'act' because the "finally" block of the code is executed after my click event (which is wrapped in act) exits. I've managed to get rid of the errors by moving the `setUpdating(false)` line inside the catch block - which might be better anyway but figure you probably want to know about this case.
### Expected behaviour
I don't see all the console errors `Warning: An update to EditRequirementOccurrenceDialogContent inside a test was not wrapped in act(...)`
### Your environment
Typescript, OSX, IntellJ - not sure what you want here :)
#### API
- [ ] shallow
- [X] mount
- [ ] render
#### Version
| library | version
| ------------------- | -------
| enzyme | 3.11.0
| react | 16.13.1
| react-dom | 16.13.1
| react-test-renderer | Not specified in package.json
| adapter (below) | 1.15.2
#### 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
Reproduce the reported mounted-component scenario for EditRequirementOccurrenceDialogContent, using a promise-returning onSave callback and the async state changes shown in the issue. Start by locating the relevant mount and act handling in the repository, then add a regression test; done means the promise-based callback completes without repeated act warnings.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react, typescript
- Domain
- frontend, testing
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100