(React Testing library) ReactDOM.render no longer supported in React 18

avatar

Borislav Hadzhiev

Fri Apr 01 20223 min read

React Testing library - ReactDOM.render no longer supported in React 18 #

To solve the react testing library error "ReactDOM.render is no longer supported in React 18", update the version of the react testing library by running npm i -D @testing-library/react@latest. Version 13.0.0 of the package adds support for the new createRoot API.

react testing library reactdom render not supported

Open your terminal in the root directory of your project and run the following commands:

shell
npm install --save-dev @testing-library/react@latest npm install --save-dev @testing-library/jest-dom@latest npm install --save-dev @testing-library/user-event@latest

Make sure to update the versions of all react testing library packages you are using.

Your index.js file should use the new createRoot API to render your application.

index.js
import {StrictMode} from 'react'; import {createRoot} from 'react-dom/client'; import App from './App'; // 👇️ IMPORTANT: div ID has to match with index.html const rootElement = document.getElementById('root'); const root = createRoot(rootElement); // 👇️ if you use TypeScript, add non-null (!) assertion operator // const root = createRoot(rootElement!); root.render( <StrictMode> <App /> </StrictMode>, );

Now you should be able to start your tests without getting the error.

App.test.js
import {render, screen} from '@testing-library/react'; import App from './App'; test('renders react component', () => { render(<App />); const divElement = screen.getByText(/hello world/i); expect(divElement).toBeInTheDocument(); });

We had to update the version of the @testing-library/react package because version 13 adds support for React 18.

In version 13, React testing library drops support for React 17 and earlier and uses the new createRoot API by default.

If you want to opt out of the change, you can set the legacyRoot property to true when rending, e.g. render(ui, {legacyRoot: true}). However, this is not recommended because the ReactDOM.render() method is deprecated starting React 18 and its usage triggers warnings in the console.

The render() method of the react-dom package is considered legacy starting react-dom version 18.

The method is replaced with the createRoot() method that is exported from react-dom/client.

The createRoot() method takes the root element as a parameter and creates a React root.

The root has a render() method that can be used to render a React element into the DOM. The root in React is a pointer to the top-level data structure that React uses to track a tree to render.

In the new API, we create a root and then call the render() method on it.

If your app doesn't work after updating to React 18, check whether it's wrapped in <StrictMode>. Strict mode was changed in React 18 and has more checks than it did in previous versions.

If removing Strict mode fixes your app, remove it during the upgrade and add it back (either at the top or for specific parts of your application) after you have fixed the issues it is pointing out.

An alternative solution to get rid of the warning is to revert your versions of the react and react-dom packages to an older version, e.g. 17.0.2 by running npm install react@17.0.2 react-dom@17.0.2, but this is not recommended.

You can read more about the breaking changes in React 18 in their Github release page, but chances are you won't be affected by the breaking changes and you'll take advantage of better performance by updating to React 18.

You can also check out the official How to Upgrade to React 18 Guide.

Use the search field on my Home Page to filter through my more than 1,000 articles.