如何测试渲染到顶层的酶组分

我试图测试渲染组件的grommetMenu组件。套环Menu组件将绝对定位的菜单放入文档的顶层，作为子项插入body。因此它呈现在包装器的范围之外。我可以用document.body.innerHTML（引用jsdom文档）找到它，但我想用酶与它进行交互。任何建议？如何测试渲染到顶层的酶组分

我的测试：

const wrapper = mount(
    <MyComponent checkThis={checkThisSpy} /> 
); 
wrapper.find('.spec-menu').simulate('click'); 
console.log(document.body.innerHTML); // Shows the absolute menu inserted into the body

在索环行，这是否document.body.insertBefore(drop.container, document.body.firstChild);。 https://github.com/grommet/grommet/blob/master/src/js/utils/Drop.js#L197

只是寻找一些最好的方式来处理这个问题的指导。谢谢！

来源

2016-12-19 Jake Dluhy

由孔环组件呈现的菜单是否是另一个子组件？如果不是它刚刚附加到DOM的元素是正确的？在这种情况下，我认为你可以使用类似chai-dom的东西来验证伪文档元素中是否存在内部html元素。 http://chaijs.com/plugins/chai-dom/ – therewillbecode

最终，我们无法找到任何方式来测试使用酶本身的组件。因为我们使用jsdom来提供dom，所以document是全球可用的。我们最终写了一些看起来像

expect(document.getElementsByClassName('my-top-level')).to.have.length(1)

正常的dom API足以测试我们想要的一切，它只是一点点笨重。

来源

2017-06-14 19:01:52

如何测试渲染到顶层的酶组分

回答

相关问题