Warning: The current testing environment is not configured to support act(...)
viveleroi opened this issue Β· comments
After updating from v15 to v16 of testing-library/react, I'm now getting this error in all of my tests - except the tests still pass just fine.
Warning: The current testing environment is not configured to support act(...)
The error goes away when I downgrade to v15. Since @testing-library/dom is now a peer dep, I tried installing that as well but the error remains.
@testing-library/react
version: 16- Testing Framework and version: vitest, @testing-library/jest
- DOM Environment: jsdom 23.2.0, and I've tried upgrading this too. no change
With v15, here's what yarn why says (no warnings about act):
yarn why @testing-library/dom
ββ @storybook/testing-library@npm:0.1.0
β ββ @testing-library/dom@npm:8.20.1 (via npm:^8.3.0)
β
ββ @testing-library/react@npm:15.0.7
β ββ @testing-library/dom@npm:10.1.0 (via npm:^10.0.0)
β
ββ @testing-library/react@npm:15.0.7 [7cdc2]
ββ @testing-library/dom@npm:10.1.0 (via npm:^10.0.0)
In 16 with dom added, here's what why says (warnings on act):
ββ @storybook/testing-library@npm:0.1.0
β ββ @testing-library/dom@npm:8.20.1 (via npm:^8.3.0)
β
ββ tatsu@workspace:.
ββ @testing-library/dom@npm:10.1.0 (via npm:^10.1.0)
I'm not sure why you didn't get the above before, but this should be resolved by using yarn resolutions
and enforcing the same version for DTL. The reason this is probably happening to you is because you still have multiple version of DTL installed due to @storybook/testing-library
installing an older version of DTL.
Sadly that didn't help, at least with v10. testing-library/react v15 works for now. Maybe the issue isn't the dom library, but something else with v16? All I have to do to fix this is downgrade to v15.0,7.
yarn why @testing-library/dom
ββ @storybook/test@npm:8.1.10
β ββ @testing-library/dom@npm:10.1.0 (via npm:^10.1.0)
β
ββ tatsu@workspace:.
ββ @testing-library/dom@npm:10.1.0 (via npm:^10.1.0)
Chiming in with this issue also and some info.
Using npm (fresh install, no lockfile).
Works fine. Current solution is to use this while we investigate
"@testing-library/dom": "9.3.4"
"@testing-library/react": "15.0.7",
All of these combinations have the issue
# Upgrade "react" one like OP
"@testing-library/dom": "9.3.4"
"@testing-library/react": "16.0.0",
# Latest of both packages
"@testing-library/dom": "10.1.0"
"@testing-library/react": "16.0.0",
# Upgrading "dom" but staying on v15.x
"@testing-library/dom": "10.1.0"
"@testing-library/react": "15.0.7",
Also using vitest
like OP but not @testing-library/jest
Instead @testing-library/jest-dom
(not my repo so idk if it matters)
"@testing-library/jest-dom": "6.4.6",
"vitest": "1.6.0"
Most other dependencies are up-to-date, except for eslint+ ffmpeg (unrelated)
Output of npm outdated
@ffmpeg/ffmpeg 0.11.6 0.11.6 0.12.10 node_modules/@ffmpeg/ffmpeg react-audio-recorder
=> @testing-library/dom 9.3.4 9.3.4 10.1.0 node_modules/@testing-library/dom react-audio-recorder
=> @testing-library/react 15.0.7 15.0.7 16.0.0 node_modules/@testing-library/react react-audio-recorder
eslint 8.57.0 8.57.0 9.5.0 node_modules/eslint react-audio-recorder
eslint-config-prettier 8.10.0 8.10.0 9.1.0 node_modules/eslint-config-prettier react-audio-recorder
Link to repo if you want an example (branch: dependencies)
https://github.com/ryanlelek/react-audio-recorder/tree/dependencies
# Relevant commands
npm run test;
npm run build;
@viveleroi Can you please provide a reproduction for this one so we'll be able to investigate?
You can use https://testing-library.com/new-rtl
@ryanlelek The issue you're experiencing isn't related to the version of testing library AFAIU. A few things I saw in your tests:
- You don't need to wrap any interaction with
act
, this is done for you as long as you're using@testing-library/react
. - After removing all of the
await act
you had there, the only test that triggers the error is you're last test. Refactoring it this way removes the error:
test("AudioRecorder timer works properly", async () => {
const user = userEvent.setup();
const onRecordingComplete = vi.fn();
render(<AudioRecorder onRecordingComplete={onRecordingComplete} />);
const audioRecorder: HTMLElement = screen.getByTestId("audio_recorder");
const audioRecorderMic: HTMLElement = screen.getByTestId("ar_mic");
await user.click(audioRecorderMic);
expect(audioRecorder).toHaveClass("recording");
const audioRecorderTimer: HTMLElement = screen.getByTestId("ar_timer");
expect(audioRecorder).toHaveClass("recording"); // should still be recording after pause
await waitFor(() => {
expect(audioRecorderTimer.textContent).toEqual("0:01"); // timer should have gone to 1 sec
});
await user.click(audioRecorderMic);
expect(audioRecorder.classList.contains("recording")).toBeFalsy();
expect(onRecordingComplete).toHaveBeenCalled();
expect(getTracks).toHaveBeenCalled();
expect(stop).toHaveBeenCalled();
});
Btw, I highly recommend not waiting 1 second in your tests and use fake timers instead.