testing-library / testing-library/react-testing-library

RTL + Vitest issue with patching asyncWrapper/eventWrapper (with act()) for userEvent APIs

Open
#1,338 0 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
19.7k
Forks
1.2k
Avg merge
3d 16h
Merged PRs (30d)
1

Description

We've discovered that when using latest versions of Vitest, RTL, and userEvent the userEvent APIs are not patched with act() and this results in "not wrapped in act()" warnings.

"@testing-library/dom": "10.2.0",
"@testing-library/react": "^16.0.0",
"@testing-library/user-event": "^14.5.2",

"jsdom": "^24.0.0",
"vite": "^5.3.1",
"vitest": "^1.6.0",
"vitest-dom": "^0.1.1"

DOM Environment: JSDOM

Relevant code or config:

See reproduction section for code.

What you did:

testing simple MUI component interactions with userEvent.setup() APIs.

What happened:

All interactions result in the "not wrapped in act() warning":

stderr | src/select.spec.jsx > Select > works with user interactions
Warning: An update to ForwardRef(FormControl) inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

Reproduction:

Please see this stack blitz repro: https://stackblitz.com/edit/vitejs-vite-x8atqu?file=package.json%3AL34,src%2Fselect.spec.jsx&terminal=dev

You can rerun the test with npm test.
Note that the first test passes but the second one will not. I skipped the failing test because the stack trace is harder to read.

Problem description:

IIUC RTL is supposed to "monkey patch" DTL's config so that all userEvent APIs are wrapped in act() and this is not happening with Vitest.

Suggested solution:

We (cc @kiel-nokia) stepped through all the code to debug this and I'm not sure we have an easy/simple solution to present as this looks like a runtime side effects issue.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the reproduction in src/select.spec.jsx and its package.json dependencies, then run npm test to reproduce the warning in the second test. Trace how RTL configures act() around userEvent APIs under the listed Vitest and JSDOM versions. Done means the interaction test passes without the not-wrapped-in-act warning.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react, vite
Domain
frontend, testing-qa
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.