javascript - 如何在 enzyme 中渲染假 DOM 中的组件？

Question

我有一个组件库和一个 Tooltip在文档正文的最底部呈现工具提示 div 的组件。如何渲染 Tooltip假DOM中的组件，然后在我悬停Tooltip后测试div元素是否出现组件？

所以:

1. 首先，我必须先渲染/安装一个 Tooltip 组件。
2. 模拟事件 fe wrapper.find('span').simulate('mouseenter')
3. 检查 <div> 是否元素出现在正确的位置(作为最后一个 body child )。

我坚持第 1 点和第 3 点。我如何在 Jest/enzyme 中测试它？我应该使用 JSDom 吗？

Answer 1

我这样做似乎很有效，因为 Enzyme 为您提供了全局文档对象，您可以开箱即用:

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