第一节第一节第一节第一节第一节第二节第一节
上面是我的App.js、App.test.js和我收到的错误消息的图像。谢谢当我运行npm测试时,我无法通过测试。
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函数以指定测试库使用的容器元素。
1条答案
按热度按时间5w9g7ksd1#
此错误消息通常是由于向React测试库的呈现函数传递了无效的容器元素而导致的。呈现函数要求将DOM元素作为第二个参数传递,但在您的情况下,似乎传递了无效的元素或null。
以下是您可以尝试修复此错误的一些方法:
确保容器元素是有效的DOM元素:检查要传递给呈现函数的容器元素是否为有效的DOM元素。例如,如果使用document. getElementById获取容器元素,请确保文档中确实存在具有指定ID的元素。
使用document.body作为容器元素:如果没有特定的容器元素可以使用,可以将document.body作为容器元素传递给render函数,这将在文档主体的末尾呈现组件。
使用createPortal在容器元素中呈现组件:如果需要在特定的容器元素中呈现组件,可以使用React中的createPortal方法在与测试库所使用的DOM元素不同的DOM元素中呈现组件。
下面是一个例子:
本例创建一个新的DOM元素并将其追加到文档主体中,然后使用createPortal方法呈现新元素中的组件,并使用container选项调用render函数以指定测试库使用的容器元素。