I'm using React-18.0.0 in my project and in the test file I'm getting an error something below
createRoot(...): Target container is not a DOM element.
My test file is :
import ReactDOM from 'react-dom/client';
import { render, screen } from "@testing-library/react";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
test("renders learn react link", () => {
root.render(<App />);
const linkElement = screen.getByText(/Hello React/i);
expect(linkElement).toBeInTheDocument();
});
Your test uses root.render(<App />) while React's testing-library provides there own render function to use inside a test
Retrieving the root isn't needed, and is causing the error you're showing.
So, apply the following change:
// Remove
root.render(<App />);
// Replace with
render(<App />); // Imported from @testing-library/react
Example of working App.test.js:
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/this should exist/i);
expect(linkElement).toBeInTheDocument();
});