reactjs React测试库抛出“createRoot(...):目标容器不是DOM元素,”包含redux中的操作时出错

hjzp0vay  于 2023-02-18  发布在  React
关注(0)|答案(1)|浏览(465)

第一节第一节第一节第一节第一节第二节第一节

上面是我的App.js、App.test.js和我收到的错误消息的图像。
谢谢
当我运行npm测试时,我无法通过测试。

5w9g7ksd

5w9g7ksd1#

此错误消息通常是由于向React测试库的呈现函数传递了无效的容器元素而导致的。呈现函数要求将DOM元素作为第二个参数传递,但在您的情况下,似乎传递了无效的元素或null。
以下是您可以尝试修复此错误的一些方法:
确保容器元素是有效的DOM元素:检查要传递给呈现函数的容器元素是否为有效的DOM元素。例如,如果使用document. getElementById获取容器元素,请确保文档中确实存在具有指定ID的元素。
使用document.body作为容器元素:如果没有特定的容器元素可以使用,可以将document.body作为容器元素传递给render函数,这将在文档主体的末尾呈现组件。

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

test("renders component", () => {
  render(<MyComponent />, document.body);
  // ...
});

使用createPortal在容器元素中呈现组件:如果需要在特定的容器元素中呈现组件,可以使用React中的createPortal方法在与测试库所使用的DOM元素不同的DOM元素中呈现组件。
下面是一个例子:

import { render } from "@testing-library/react";
import { createPortal } from "react-dom";

test("renders component in container element", () => {
  const container = document.createElement("div");
  document.body.appendChild(container);

  render(
    createPortal(<MyComponent />, container),
    { container: container }
  );
  // ...
});

本例创建一个新的DOM元素并将其追加到文档主体中,然后使用createPortal方法呈现新元素中的组件,并使用container选项调用render函数以指定测试库使用的容器元素。

相关问题