如何在玩笑测试中将 appendChild 附加到正确位置的反应组件 DOM

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 节点不会出现在 Reacts 渲染树中。

How to appendChild to a react component in the correct place within a jest test DOM