React-testing-library 用 <div> 包装组件，这会产生警告答案

【问题标题】：React-testing-library wraps component with <div> which produces warningReact-testing-library 用 <div> 包装组件，这会产生警告
【发布时间】：2020-12-10 04:27:27
【问题描述】：

我正在使用 react-testing-library 来测试我的组件。我有一个 TableHeader 组件，它是这样的：

<thead>
  // rest of content
</thead>

当我使用 RTL 对其进行测试以生成快照或任何内容时，我得到一个错误：

警告：validateDOMNesting(...)：不能显示为
的子级

最后我发现 RTS 为自己添加了一个环绕组件，它会导致错误。在组件的快照中可以看到：

const { container } = render(
  <TableHeader />,
);

expect(container).toMatchSnapshot();

已收到快照：

<div>
  <thead>
    // rest of component here
  </thead>
</div>

为什么会这样？我没有用<div> 包裹整个组件，所以它不应该在那里......

【问题讨论】：

标签： reactjs react-testing-library

【解决方案1】：

这与react-testing-library 无关。您可以在一个简单的 React 应用程序中重现该问题：

<!-- public/index.html -->
<html>
  <body>
    <div id="root"></div>
  </body>
</html>

// src/index.js
import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(<thead />, document.querySelector("#root"));

如果你在浏览器中加载这个应用，你会得到同样的错误：

index.js:1 警告：validateDOMNesting(...): 不能作为 .
的子项出现

问题在于您没有呈现有效的 DOM：thead 标记必须出现在 table 标记下。如果添加table 标签，问题就会消失：

// src/index.js
import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(<table><thead /></table>, document.querySelector("#root"));

至于div 标签的来源，react-testing-library 必须在某处渲染您的组件，因此它会将它们渲染到 div 容器，就像普通的 React 应用程序一样。

为了解决此警告，我建议您在测试中渲染整个表格，而不仅仅是表格标题。或者，如果您希望直接测试此组件，您可以查看其他库，例如酶 - 我希望您可能不会收到有关酶的警告，但我不确定。

【讨论】：