React（Jest 测试 tr 元素无法找到元素...tbody）

Question

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

<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

检查元素的子节点

Answer 1

根据这个 post http://codeheaven.io/testing-react-components-with-enzyme/ 不可能单独测试测试。

考虑到

，这可能是更好的测试方法

Shallow rendering let us render our component without touching the DOM. It also let us test our component as a unit, since it renders our component only one-level deep. Errors in children components wouldn’t propagate to top level components, making our tests more isolated and reliable.

Answer 2

尝试创建一个虚拟对象 table:

// 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>);

React（Jest 测试 tr 元素无法找到元素...tbody）

React (Jest tests for tr element Unable to find element...tbody)

reactjs

react-jsx

jestjs