testing-library/react-testing-library

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

millerized opened this issue · 0 comments

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.