我正在尝试测试呈现 grommet 的组件菜单
组件。索环 Menu
组件将绝对定位的菜单呈现到文档的顶层,作为子级插入到 body
中。因此它呈现在包装器的范围之外。我可以使用 document.body.innerHTML
(引用 jsdom 文档)找到它,但我想使用 enzyme 与它交互。有什么建议吗?
我的测试:
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
只是在寻找一些有关处理此问题的最佳方法的指导。谢谢!
最佳答案
最终,我们无法找到任何方法来测试使用 enzyme 本身的成分。因为我们使用 jsdom 来提供 dom,所以 document
是全局可用的。我们最终写了一些看起来像的期望
expect(document.getElementsByClassName('my-top-level')).to.have.length(1)
普通的 dom API 足以测试我们想要的一切,只是有点笨重。
关于javascript - 如何测试渲染到顶层的 enzyme 成分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41215731/