javascript - createRoot(...): Target container is not a DOM element in React Test file - Stack Overflow

admin管理员组

文章数量:1332881

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

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

• javascript
• reactjs
• react-testing-library

Share Improve this question Follow edited Nov 18, 2024 at 16:40 Drew Reese 204k1818 gold badges240240 silver badges271271 bronze badges asked Apr 4, 2022 at 5:28 KARTHIKEYAN.AKARTHIKEYAN.A 20.2k1010 gold badges137137 silver badges149149 bronze badges 1

• 1 This article helped me. I was using the ID in my App.js but its the root ID in the index.html file - bobbyhadz./blog/… – Sambuxc Commented Apr 6, 2022 at 14:59

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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

本文标签： javascriptcreateRoot() Target container is not a DOM element in React Test fileStack Overflow