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

We Are Going To Discuss About React Testing Library gives console error for ReactDOM.render in React 18. So lets Start this React Article.

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

  1. [Solved] React Testing Library gives console error for ReactDOM.render 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.

  2. React Testing Library gives console error for ReactDOM.render in Reac

    To solve the react testing library error “ReactDOM.render is no longer supported in React 18”, update the version of the react testing library.

Solution 1

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/[email protected]

npm install –save-dev @testing-library/[email protected]

npm install –save-dev @testing-library/[email protected]

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();
});

Original Author Feroz Khan Of This Content

Solution 2

After some findings, and reading the docs from React Testing Library, I could solve the issue for the time being by suppressing the warning precisely related to ReactDOM.render is no longer supported in React 18.

To suppress this warning, you can update the setupTests.ts file present in your src directory and write the snippet of this warning suppression as follows:

import '@testing-library/jest-dom';
    
//***Add This***
const originalError = console.error;
beforeAll(() => {
  console.error = (...args) => {
    if (/Warning: ReactDOM.render is no longer supported in React 18./.test(args[0])) {
      return;
    }
    originalError.call(console, ...args);
  };
});

afterAll(() => {
  console.error = originalError;
});

This should solve the issue and suppress the warnings.

Original Author Feroz Khan Of This Content

Solution 3

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

  1. npm install -g npm-check-updates (for update to new major version )
  2. ncu -u (upgrade versions in package.json)
  3. npm update (or npm install, in case your project hasn’t node_modules)

Original Author Ferel Ultra Of This Content

Conclusion

So This is all About This Tutorial. Hope This Tutorial Helped You. Thank You.

Also Read,

Siddharth

I am an Information Technology Engineer. I have Completed my MCA And I have 4 Year Plus Experience, I am a web developer with knowledge of multiple back-end platforms Like PHP, Node.js, Python and frontend JavaScript frameworks Like Angular, React, and Vue.

Leave a Comment