Testing render shows deprecation warning

Client SDKs
1

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?

2

Hey @stephan-buckmaster :wave:

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';
3

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.

4

Wanted to be clear, the tests pass, but I would prefer to avoid the deprecation warnings especially because they come with a stack trace

5

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.

6

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 !