如何渲染组件中的假DOM中的酶？

我有一个组件库，我有一个Tooltip组件，该组件在文档正文的底部呈现tooltip div。如何在假DOM中渲染Tooltip组件，然后测试div元素是否在我徘徊于Tooltip组件之后出现？如何渲染组件中的假DOM中的酶？

所以：

首先我必须来渲染/第一安装一个工具提示组件。
模拟一个事件fe wrapper.find('span').simulate('mouseenter')
检查<div>元素是否出现在正确的位置（作为最后一个身体的孩子）。

我被困在第1和第3点。我该如何在Jest /酶中测试它？我应该使用JSDom吗？

来源

2017-08-17 Wojciech Jeleń

您所描述的是一个功能测试。为此，最好使用像**守夜**这样的框架。如果你想使用酶，那么只需测试工具提示是否正确渲染，并通过简单的单元测试来测试事件是否被触发。 – Hosar

谢谢你本来的建议nightwatch-我会试试看！ –

我做了这样的似乎工作，因为酵素让你在全球范围文档对象，你可以参考一下，开箱：

test("shows tooltip when mouse enters child element",() => { 
    const div = global.document.createElement("div"); 
    global.document.body.appendChild(div); 

    const wrapper = mount(
    <Tooltip content="You got me!"> 
     <p>Hello</p> 
    </Tooltip>, 
    { attachTo: div } 
); 

    wrapper.ref("overlay").simulate("mouseEnter"); 

    // do stuff... 
});

问题是与我的组件本身。这个很复杂，我不知道为什么在测试过程中，我模拟onMouseEnter之后，它会触发onMouseLeave。但测试符合我的预期与其他一些更琐碎的工具提示组件虽然Oo

来源

2017-08-20 16:48:55

如何渲染组件中的假DOM中的酶？

回答

相关问题