enzymejs / enzymejs/enzyme

Lots of warnings about "act" for promise based callbacks

Open
#2,391 4 comments 0 reactions 0 assignees View on GitHub
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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.