createRoot(...): 目标容器不是 React 测试文件中的 DOM 元素

Question

我在我的项目中使用 React-18.0.0，在测试文件中出现以下错误

createRoot(...): Target container is not a DOM element.

我的测试文件是：

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

Answer 1

你的 test 使用 root.render(<App />) 而 React 的 testing-library 提供了自己的 render 函数在 test

中使用

不需要检索 root，它会导致您显示的错误。

因此，应用以下更改：

// Remove
root.render(<App />);

// Replace with
render(<App />);  // Imported from @testing-library/react

工作示例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();
});

createRoot(...): 目标容器不是 React 测试文件中的 DOM 元素

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

javascript

reactjs

react-test-renderer

react-testing-library

react-18