在前端开发中，测试是非常重要的一环。而在 React 开发中，Jest 和 Enzyme 是两个非常流行的测试工具。
Jest 是 Facebook 开源的一个 JavaScript 测试框架，它可以用来测试 React 应用程序以及其他 JavaScript 应用程序。Jest 具有简单易用、快速高效、支持快照测试等特点，非常适合前端测试。
Enzyme 是 Airbnb 开源的 React 测试工具，它提供了一系列 API，可以让我们很方便地测试 React 组件的渲染结果、交互行为等。
本文将介绍如何使用 Jest 和 Enzyme 来测试 React 组件，包括如何编写测试用例、如何模拟事件等。
环境搭建
在开始之前，我们需要先搭建好测试环境。我们可以使用 create-react-app 来创建一个基本的 React 项目，然后在项目中安装 Jest 和 Enzyme。
--- ---------------- ------ -- ------ --- ------- ---------- ---- ------ ----------------------- -------------------
安装完成后，我们需要在项目根目录下创建一个 .env 文件，并在其中添加以下内容：
-------------------------
这是因为 create-react-app 默认会检查项目中是否安装了 Jest，如果没有安装，会提示安装 Jest。但是我们已经安装了 Jest，因此需要禁用这个检查。
接下来，我们需要在项目根目录下创建一个 src/setupTests.js 文件，并在其中添加以下内容：
------ ------ ---- --------- ------ ------- ---- -------------------------- ------------------ -------- --- --------- ---
这是因为 Enzyme 需要一个适配器来适配 React 的不同版本。我们使用 enzyme-adapter-react-16 适配器来适配 React 16。
至此，我们的测试环境搭建完成。
编写测试用例
在编写测试用例之前，我们先来看一个简单的 React 组件：
------ ----- ---- --------
----- ------- ------- --------------- -
----- - - ------ - --
--------------- - -- -- -
--------------- ------ ---------------- - - ---
--
-------- -
------ -
-----
---------- -----------------------
------- -------------------------------------------------
------
--
-
-
------ ------- --------这是一个计数器组件，包含一个数字和一个按钮，点击按钮可以将数字加 1。
接下来，我们来编写测试用例。我们需要在 src 目录下创建一个与组件同名的文件 Counter.test.js，并在其中编写测试用例：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
----------------- ----------- -- -- -
---------- ---- ----- -- --- -- -- -
----- ------- - ---------------- ----
----- ---- - --------------------------
---------------------------- ----
---
-------------- ----- ---- ------ -- --------- -- -- -
----- ------- - ---------------- ----
----- ------ - -----------------------
-------------------------
----- ---- - --------------------------
---------------------------- ----
---
---这段代码包含了两个测试用例。第一个测试用例测试组件渲染后数字是否为 0，第二个测试用例测试点击按钮后数字是否为 1。
我们使用 shallow 方法来创建组件的浅渲染。shallow 方法只会渲染组件的一层，不会渲染子组件。这样可以提高测试的效率。
在第二个测试用例中，我们使用 simulate 方法来模拟点击按钮的事件。这样可以测试组件的交互行为。
快照测试
除了测试组件的渲染结果和交互行为之外，我们还可以使用 Jest 提供的快照测试功能来测试组件的 UI 是否发生了变化。
快照测试是指将组件的渲染结果与之前保存的快照进行比较，如果两者一致，则测试通过。如果两者不一致，则测试失败，需要手动检查并更新快照。
我们可以在 Counter.test.js 中添加一个测试用例来测试组件的快照：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
----------------- ----------- -- -- -
-- ---
----------- ---------- -- -- -
----- ------- - ---------------- ----
----------------------------------
---
---在第一个运行测试时，Jest 会自动创建一个快照文件 __snapshots__/Counter.test.js.snap。如果测试通过，则会将渲染结果保存到这个快照文件中。如果测试失败，则会提示更新快照。
总结
本文介绍了如何使用 Jest 和 Enzyme 来测试 React 组件，包括环境搭建、编写测试用例、模拟事件、快照测试等。测试是前端开发中非常重要的一环，希望本文能够帮助读者更好地理解和掌握前端测试技术。完整的代码示例可以在 Github 上查看。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/663edf75d3423812e4d1c29e