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

【问题标题】：How to render components in fake DOM in enzyme?如何在酶中渲染假DOM中的组件？
【发布时间】：2018-01-25 14:39:32
【问题描述】：

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

所以：

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

我被困在第 1 点和第 3 点上。如何在 Jest/enzyme 中对其进行测试？我应该使用 JSDom 吗？

【问题讨论】：

您所描述的是功能测试。为此，最好使用像 nightwatch 这样的框架。如果您想使用酶，那么只需测试工具提示是否正确呈现，并通过简单的单元测试测试事件是否被触发。
感谢 Ben 推荐的守夜人——我会试试看的！

标签： javascript reactjs testing jestjs enzyme

【解决方案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

【讨论】：