React 是一种流行的 JavaScript 库，它被广泛用于构建现代 Web 应用程序。在 React 中，组件是构建块，可以被重复使用和组装成更复杂的应用程序。但是，在构建复杂的应用程序时，我们需要测试我们的组件是否正常工作。这就是为什么我们需要 Enzyme 和 Jest。
Enzyme 和 Jest 是什么？
Enzyme 是一个 React 测试工具，它允许您轻松地测试 React 组件的输出。它是由 Airbnb 开发的，是 React 社区中最受欢迎的测试工具之一。Jest 是一个 JavaScript 测试框架，它与 Enzyme 配合使用可以轻松地测试 React 组件。
如何安装 Enzyme 和 Jest？
首先，您需要安装 Jest 和 Enzyme。您可以使用以下命令：
npm install --save-dev jest enzyme enzyme-adapter-react-16
这将安装 Jest、Enzyme 和适用于 React 16 的 Enzyme 适配器。
如何编写事件测试？
让我们编写一个简单的按钮组件，并测试它是否可以正确地触发点击事件。首先，我们需要创建一个按钮组件：
import React from 'react';
const Button = ({ onClick, label }) => (
<button onClick={onClick}>{label}</button>
);
export default Button;接下来，我们需要编写一个测试用例，以确保按钮被单击时会调用传递给它的回调函数：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
---------------- ----------- -- -- -
---------- ---- ------- ---- --- ------ -- --------- -- -- -
----- ----------- - ----------
----- ------- - --------------- --------------------- ------------ --- ----
-----------------------------------------
---------------------------------------
---
---让我们来看看这个测试用例的工作原理。
首先，我们导入了 React、shallow 和 Button。然后，我们使用 describe 和 it 函数来定义测试用例。在这个测试用例中，我们测试按钮组件是否可以正确地触发点击事件。
在测试用例中，我们首先创建一个 onClickMock 函数，它将用于测试按钮组件是否可以正确地触发点击事件。然后，我们使用 shallow 函数创建一个 Button 组件的实例，并将 onClickMock 传递给它。
接下来，我们使用 find 方法找到按钮元素，并使用 simulate 方法模拟点击事件。最后，我们使用 expect 和 toHaveBeenCalled 方法来测试 onClickMock 是否被调用。
结论
在本文中，我们介绍了 Enzyme 和 Jest，并展示了如何使用它们来测试 React 组件的事件。我们编写了一个简单的测试用例来测试按钮组件是否可以正确地触发点击事件。希望这篇文章能帮助您更好地理解如何使用 Enzyme 和 Jest 来测试 React 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6740482f5ade33eb7232e471