如何在jest测试DOM中的正确位置将Child附加到react组件

Question

我有一个由包装器div和内部复选框组成的react组件，这里是呈现函数：

render: function(){
return (
<div id="wrapperDiv">
<input type="checkbox" id="checkbox" />
</div>
)
}

在componentDidMount上，我将这个复选框换成一个将充当复选框的div，这里是componentDidMount函数；

componentDidMount: function(){
var div = document.createElement("div");
div.id = "checkboxDiv";
this.getDOMNode().appendChild(div);
}

当在屏幕上呈现这个时，空的div被添加到组件中，一切都很好。

在我的玩笑测试中，我试着这样做；

TestUtils.scryRenderedDOMComponentsWithTag(component, "div");

但是这个数组的长度是1，只返回id为"wrapperDiv"的div，看起来好像它没有将checkboxDiv添加到DOM中。然而，当我在测试中尝试这一点时；

component.getDOMNode().parentNode.getElementsByTagName("div");

它带回了wrapperDiv和checkboxDiv

它没有在组件中添加div是有原因的，还是测试中需要额外的步骤？

Answer 1

TestUtils.scryRenderedDOMComponentsWithTag()只查看Reacts内部渲染树。由于您在React不知情的情况下添加DOM节点，因此DOM节点不会显示在React渲染树中。