Question

我正在尝试测试呈现grommet Menu组件的组件。索环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

只是寻找有关处理此问题的最佳方法的一些指导。谢谢！

Answer 1

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

的期望

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

普通的dom API足以测试我们想要的一切，它只是一点点笨拙。

如何测试进入顶层的酶组分

1 个答案: