Javascript 单元测试组件产生不变冲突：findComponentRoot

我从ReactJS开始，我想对它进行单元测试。我制作了一个简单的组件来呈现HTML td元素：

...
render() {
    return (
        <td>{this.props.type == 'currency' ? '$' : ''}{this.props.content}</td>
    );
}
...

。。。
render（）{
返回(
{this.props.type=='currency'？'$'：''}{this.props.content}
);
}
...

我写了一个Jest单元测试：

...
it('currency should prepend dollar sign', () => {
    const datapointsTd = TestUtils.renderIntoDocument(
        <DatapointsTd type="currency" content="123" />
    );

    const datapointsTdNode = ReactDOM.findDOMNode(datapointsTd);

    expect(datapointsTdNode.textContent).toEqual('$123');
});
...

。。。
它（'货币应在美元符号前面，（）=>{
const datapointsTd=TestUtils.renderIntoDocument(
);
const datapointsTdNode=ReactDOM.findDOMNode（datapointsTd）；
expect（datapointsTdNode.textContent）.toEqual（“$123”）；
});
...

但它失败了，并显示以下消息：

...
Warning: validateDOMNesting(...): <td> cannot appear as a child of <div>. See di
v > DatapointsTd > td.
 FAIL  __tests__\DatapointsTd-test.js (49.753s)
- DatapointsTd › it should display content in a td
  - Invariant Violation: findComponentRoot(..., .0): Unable to find element. Thi
s probably means the DOM was unexpectedly mutated (e.g., by the browser), usuall
y due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>,
or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child n
odes of the element with React ID ``.
        at invariant (node_modules\react\node_modules\fbjs\lib\invariant.js:39:1
5)
...

。。。
警告：validateDOMNesting（…）：不能显示为的子级。见迪
v>DatapointsTd>td。
失败测试数据点std-test.js（49.753s）
-DatapointsTd›它应该以td格式显示内容
-不变冲突：findComponentRoot（…，.0）：无法找到元素。这
s可能意味着DOM意外地发生了变化（例如，通过浏览器），通常是
y，因为在使用表时忘记了a，嵌套了标记，如，，
或者，或者在父级中使用非SVG元素。试着检查一下孩子
React ID为``的元素的ODE。
at invariant（node\u modules\react\node\u modules\fbjs\lib\invariant.js:39:1
5)
...

---

我不确定这是什么意思，我猜它试图将td元素放入div元素中，但人们如何像我试图进行单元测试一样对组件进行单元测试？

你的猜测是对的。td必须是tr的孩子，而tr又必须是tbody或thead的孩子。我想最简单的办法就是做这样的事情

const datapointsTd = TestUtils.renderIntoDocument(
  <table>
    <tbody>
      <tr>
        <DatapointsTd type="currency" content="123" />
      </tr>
    </tbody>
  </table>
);

const datapointsTd=TestUtils.renderIntoDocument(
);

你的猜测是对的。td必须是tr的孩子，而tr又必须是tbody或thead的孩子。我想最简单的办法就是做这样的事情

const datapointsTd = TestUtils.renderIntoDocument(
  <table>
    <tbody>
      <tr>
        <DatapointsTd type="currency" content="123" />
      </tr>
    </tbody>
  </table>
);

const datapointsTd=TestUtils.renderIntoDocument(
);

初始错误 使用React.TestUtils测试表头组件时，我遇到了类似的问题：

var header = TestUtils.renderIntoDocument(
  <TableHeader text='Test' />
);

有关帮助我的答案，请参阅。

初始错误 使用React.TestUtils测试表头组件时，我遇到了类似的问题：

var header = TestUtils.renderIntoDocument(
  <TableHeader text='Test' />
);

---

有关帮助我的答案，请参阅。

我尝试了类似的方法，但出现了一个新错误：“不变冲突：FindAllinRenderTree（…）：实例必须是复合组件”我尝试了类似的方法，但出现了一个新错误：“不变冲突：FindAllinRenderTree（…）：实例必须是复合组件”

class TestHeader extends React.Component {
  render() {
    return (
      <table>
        <thead>
          <tr>
            <TableHeader text={this.props.text} />
          </tr>
        </thead>
      </table>
    )
  }
}

var header = TestUtils.renderIntoDocument(
  <TestHeader text='Test' />
);