React（对 tr 元素的 Jest 测试无法找到元素...tbody）答案

【问题标题】：React (Jest tests for tr element Unable to find element...tbody)React（对 tr 元素的 Jest 测试无法找到元素...tbody）
【发布时间】：2016-01-26 16:25:13
【问题描述】：

我正在尝试测试我的组件，即

<TableRow key={1} name={name} /> 渲染成

<tr>
    <td>{this.props.name}</td>
</tr>

在测试文件中看起来像这样

const mockName = { }

const mockPopularSearchLitItem = TestUtils.renderIntoDocument(TableRow name={mockName} />)

但是当我尝试运行测试时出现以下错误

不变违规：findComponentRoot(..., .0)：无法找到元素。这可能意味着 DOM 发生了意外突变（例如，被浏览器），通常是由于在使用表格时忘记了 <tbody>、嵌套标签（如 <form>、<p> 或 <a>）或使用非 SVG 元素在父母。尝试使用 React ID 检查元素的子节点

【问题讨论】：

标签： reactjs react-jsx jestjs

【解决方案1】：

根据这篇帖子http://codeheaven.io/testing-react-components-with-enzyme/，不可能单独测试测试。

考虑到这一点，这可能是一种更好的测试方式

浅渲染让我们在不接触 DOM 的情况下渲染我们的组件。它还让我们可以将组件作为一个单元进行测试，因为它只渲染我们的组件一层深度。子组件中的错误不会传播到顶级组件，从而使我们的测试更加独立和可靠。

【讨论】：

【解决方案2】：

尝试创建一个虚拟表：

// Create dummy table to render table rows inside
const Table = React.createClass({
  displayName: 'Table',
  render: function() {
    return (<table><tbody>{this.props.children}</tbody></table>);
  }
});
const mockPopularSearchList = TestUtils.renderIntoDocument(<Table><TableRow name={mockName} /></Table>);

【讨论】：