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.