React 是一个非常流行的前端框架，它让我们可以用组件的形式构建应用程序。而 Enzyme 是一个 React 测试工具，它可以让我们方便地写单元测试和集成测试。
在测试 React 组件时，模拟用户行为是很常见的事情。比如模拟点击事件、模拟输入事件等。这些行为都是通过原生 DOM 事件来实现的。本文将介绍如何在 Enzyme 中模仿原生事件。
Enzyme 简介
在介绍如何模仿原生事件之前，我们先来简单介绍一下 Enzyme。Enzyme 是 Facebook 开源的一个 React 测试工具。它提供了一系列 API，可以让我们方便地进行组件测试。
Enzyme 主要有三种渲染方式：
shallow：浅渲染，只渲染当前组件，不渲染子组件。mount：完全渲染，渲染当前组件及其子组件。render：静态渲染，将 React 组件渲染成静态 HTML，并返回一个 wrapper。
模仿原生事件
Enzyme 提供了 simulate 方法，可以模拟用户操作，比如点击、输入等。simulate 方法会自动检查组件是否存在相应的事件处理程序，如果存在，就自动触发事件。
不过，有时候我们需要模仿原生事件而不是使用 simulate 方法。比如，当我们需要在测试中获取事件对象的一些属性时，simulate 方法就无法满足要求了。这时就需要使用原生事件了。
下面是一个示例代码，演示了如何在 Enzyme 中模仿原生点击事件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
----- ------- ------- --------------- -
------------- -
-----------------------
-
-------- -
------ -
------- -----------------------------------------
--
-
-
------------------- -- -- -
------------ ------ ------- -- -- -
----- ------- - -------------- ----
----- ------ - -----------------------
------------------------------------- ----------------
----------------------------------------------------
---
---在这个示例中，我们创建了一个继承自 React.Component 的组件 Example，并定义了一个 handleClick 方法，该方法用于在点击 button 时输出 'Clicked' 信息。
在测试中，我们使用 mount 方法将 Example 组件渲染出来，并使用 find 方法找到 button 元素。然后，我们通过 getDOMNode 方法获取该元素的原生 DOM 节点，并使用 dispatchEvent 方法模拟点击事件。最后，我们使用 expect 语句来判断 handleClick 是否被正确调用。
除了 click 事件，我们还可以模拟其他原生事件，比如 change、submit 等等。只需要将 Event 的第一个参数改成对应的事件名即可。
总结
本文介绍了如何在 Enzyme 中模仿原生事件。虽然 Enzyme 已经提供了 simulate 方法，但是有些时候我们需要使用原生事件来进行测试。以上示例代码可以让我们更好地理解如何在测试中使用原生事件，有助于我们更好地编写测试代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6475848a968c7c53b028e2f9