testing-library / testing-library/react-testing-library
RTL + Vitest issue with patching asyncWrapper/eventWrapper (with act()) for userEvent APIs
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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