React Testing Library gives console error for ReactDOM.render in React 18

Question

After updating to React 18 or creating a new React 18 app from create-react-app, when I run the yarn test command, it gives a console.error as a Warning for each of the render methods used in any of the tests as:

console.error
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

As seen in the screenshot:

As React Testing Library doesn't seem to support React 18 methodology as of now.

duplicate: https://stackoverflow.com/questions/71668256/deprecation-notice-reactdom-render-is-no-longer-supported-in-react-18 — Akber Iqbal, Apr 19 '22 at 06:39

score 73 · Accepted Answer · edited Apr 26 '22 at 14:26

To solve the react testing library error:

"ReactDOM.render is no longer supported in React 18, update the version of the react testing library."

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

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 React from 'react';
import ReactDOM from "react-dom/client";

import App from './App';

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <App />
  </React.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();
});

to be honest, at first, I didn't believe your answer. because I just create new app using create-react-app so I guessed that the react and react-testing library should be latest version. but in fact react version was 18 but testing library version was old, so I tried your answer and the issue disappeared. — Keigo Igarashi, Apr 03 '22 at 07:35
This is nice for the `App` file itself, but what about other testing components in the project? Should we render them every time we are creating their tests? — R. Karlus, Dec 07 '22 at 19:29

score 3 · Answer 2 · answered Jun 16 '23 at 08:05

3

uninstall @testing-library/react-hook and import renderHook from @testing-library/react

import { renderHook } from "@testing-library/react";

see here https://github.com/testing-library/react-hooks-testing-library/issues/826#issuecomment-1100650242

answered Jun 16 '23 at 08:05

Joey Gough

2,753
2
21
42

score 1 · Answer 3 · edited Apr 26 '22 at 10:47

1

For quick update of all the libraries you can use next commands:

for update to new major version: npm install -g npm-check-updates
upgrade versions in package.json: ncu -u
or npm install, in case your project hasn't node_modules: npm update

edited Apr 26 '22 at 10:47

BlackFox

773
1
8
24

answered Apr 05 '22 at 15:54

Ferel Ultra

45
1
9

1

I would be careful with `ncu`. It's a great _tool_ but it will also update dependencies that are version locked (i.e. to a specific version or to a specific major version). Ultimately, just have to be paying attention. – Aerophite Sep 23 '22 at 14:59

React Testing Library gives console error for ReactDOM.render in React 18

3 Answers3

Linked