I followed the tutorial for testing React components at
I get a deprecation warning which I tried to address following the instructions given, but they persist.
Here is part of the test code
import { React, act } from ‘react’
import ‘@testing-library/jest-dom’
import { render, screen } from ‘@testing-library/react’;
import { MockedProvider } from “@apollo/react-testing”;
mock = {…}
test(‘renders air quality data correctly’, async () => {
render(
);
The logs show
console.error
Warning: `ReactDOMTestUtils.act` is deprecated in favor of `React.act`. Import `act` from `react` instead of `react-dom/test-utils`. See https://react.dev/warnings/react-dom-test-utils for more info.
33 |
34 | test('renders air quality data correctly', async () => {
> 35 | render(
| ^
36 | <MockedProvider mocks={[mock]} addTypename={false}>
37 | <LatestAirVisualDeviceMeasurement />
38 | </MockedProvider>
at printWarning (node_modules/react-dom/cjs/react-dom-test-utils.development.js:71:30)
at error (node_modules/react-dom/cjs/react-dom-test-utils.development.js:45:7)
at actWithWarning (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1736:7)
I am importing as is explained in the warning:
import { React, act } from ‘react’
What can I look at changing?
Hey @stephan-buckmaster 
Seems we have a docs page that hasn’t been updated in a while. What version of React are you using? I know React has moved that import around a bit.
That said, it looks like you’re using React Testing Library, so I’d recommend import act
from RTL instead since it will get you the right version:
import { act } from '@testing-library/react';
Thanks! Here are the dependencies from package-lock.json
“dependencies”: {
“@apollo/client”: “^3.11.10”,
“@apollo/react-testing”: “^4.0.0”,
“@testing-library/jest-dom”: “^5.17.0”,
“@testing-library/react”: “^13.4.0”,
“@testing-library/user-event”: “^13.5.0”,
“react”: “^18.3.1”,
“react-dom”: “^18.3.1”,
“react-scripts”: “5.0.1”,
“web-vitals”: “^2.1.4”
}
When I change to
-import { React, act } from ‘react’; //-dom/test-utils";
+import { React } from ‘react’
import ‘@testing-library/jest-dom’
-import { render, screen } from ‘@testing-library/react’;
+import { render, screen, act } from ‘@testing-library/react’;
I get the same deprecation warning.
Wanted to be clear, the tests pass, but I would prefer to avoid the deprecation warnings especially because they come with a stack trace
I think there are a couple things at play here:
Your React version is 18.3.1 which is the React 19 compat version with deprecation warnings to prepare you for React 19. You can see that in their upgrade guide here: React 19 Upgrade Guide – React
The version of RTL you’re using is a bit old at this point and my guess the import warnings comes from this library. v16 added support for React 19, and my guess the updated import was a part of this.
I’d suggest either downgrading React to 18.2 or try upgrading RTL to see if that fixes it.
1 Like
Upgraded successfully, app still works, and tests pass without logs.
Here are the new versions:
"@apollo/client": "^3.11.10",
"@apollo/react-testing": "^4.0.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.2.0",
"@testing-library/user-event": "^14.6.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-scripts": "5.0.1",
Thanks @jerelmiller !
2 Likes