React 是一种流行的 JavaScript 库，用于构建用户界面。Redux 是一个用于管理应用程序状态的库。这两个库的结合使用，可以创建高效、可维护的 Web 应用程序。但是，为了确保这些应用程序的质量和可靠性，我们需要添加自动化测试。
在本文中，我们将介绍如何使用 Jest 和 Enzyme 来为你的 React+Redux 项目添加自动化测试。
为什么需要自动化测试？
自动化测试是一种软件测试方法，可以在编写代码时或代码修改后自动运行测试。它可以检测代码中的错误，并确保代码在修改后仍然按预期工作。自动化测试还可以节省时间和资源，因为它可以在短时间内运行大量测试。
对于 React+Redux 项目，自动化测试可以帮助我们：
- 确保应用程序的质量和可靠性
- 确保组件按预期渲染
- 确保 Redux 状态管理的正确性
- 确保应用程序的行为符合预期
Jest 和 Enzyme 简介
Jest 是一个由 Facebook 开发的 JavaScript 测试框架，它专门用于测试 React 应用程序。它具有易于使用的语法、快速的运行速度和强大的功能。
Enzyme 是一个由 Airbnb 开发的 JavaScript 测试实用程序。它提供了一组用于测试 React 组件的 API，可以模拟组件的渲染、交互和状态。
结合使用 Jest 和 Enzyme，可以轻松地为 React+Redux 项目添加自动化测试。
安装 Jest 和 Enzyme
在开始之前，请确保已经安装了 Node.js 和 npm。然后，使用以下命令安装 Jest 和 Enzyme：
npm install --save-dev jest enzyme enzyme-adapter-react-16
- jest：Jest 测试框架
- enzyme：Enzyme 测试实用程序
- enzyme-adapter-react-16：适配器用于将 Enzyme 与 React 16 兼容
编写测试用例
在我们编写测试用例之前，让我们先创建一个简单的 React+Redux 应用程序。我们将创建一个名为 Counter 的组件，它将显示一个计数器和两个按钮，用于增加和减少计数器的值。我们还将使用 Redux 来管理计数器的状态。
首先，我们需要安装 React 和 Redux：
npm install --save react react-dom redux react-redux
然后，我们创建一个名为 Counter 的组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ---------- --------- - ---- ------------
----- ------- - -- ------ ---------- --------- -- -- -
-----
------------ ------------
------- ------------------------------
------- ------------------------------
------
--
----- --------------- - ----- -- --
------ -----------
---
----- ------------------ - -------- -- --
---------- -- -- ----------------------
---------- -- -- ---------------------
---
------ ------- ------------------------ -----------------------------这个组件将从 Redux 状态管理器中获取 count 的值，并将其显示在 h1 元素中。它还将呈现两个按钮，用于增加和减少计数器的值。当这些按钮被点击时，它们将分别调用 increment 和 decrement 函数。
现在，我们需要创建一个名为 actions.js 的文件，其中包含以下内容：
-- -------------------- ---- ------- ------ ----- --------- - ------------ ------ ----- --------- - ------------ ------ ----- --------- - -- -- -- ----- --------- --- ------ ----- --------- - -- -- -- ----- --------- ---
这个文件导出了两个常量 INCREMENT 和 DECREMENT，以及两个函数 increment 和 decrement。这些函数将返回一个包含 type 属性的对象，以指示 Redux 应该执行哪个操作。
最后，我们需要创建一个名为 reducers.js 的文件，其中包含以下内容：
-- -------------------- ---- -------
------ - ---------- --------- - ---- ------------
----- ------------ - -
------ -
--
----- -------------- - ------ - ------------- ------- -- -
------ ------------- -
---- ----------
------ -
------ ----------- - -
--
---- ----------
------ -
------ ----------- - -
--
--------
------ ------
-
--
------ ------- ---------------这个文件导出了一个 counterReducer 函数，它接收一个状态对象和一个操作对象，并返回一个新的状态对象。根据操作对象的类型，它将增加或减少 count 属性的值。
现在，我们已经创建了一个简单的 React+Redux 应用程序。接下来，我们将编写测试用例来测试它。
创建一个名为 Counter.test.js 的文件，并添加以下内容：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ---------------- --------- ----
----------------------------------
---
---------- ------- --- ------- -- -- -
----- ------- - ---------------- --------- ----
----- ---- - --------------------------
------------------------------ ----
---
---------- ---- --------- -------- ---- - ------ -- --------- -- -- -
----- ------------- - ----------
----- ------- - ---------------- --------- ------------------------- ----
-----------------------------------------------
-----------------------------------------
---
---------- ---- --------- -------- ---- - ------ -- --------- -- -- -
----- ------------- - ----------
----- ------- - ---------------- --------- ------------------------- ----
-----------------------------------------------
-----------------------------------------
---
---这个文件导入了 React、Enzyme 的 shallow 函数和 Counter 组件。我们使用 describe 函数来组织测试用例，并使用 it 函数来编写单个测试用例。
第一个测试用例测试组件是否正确渲染。我们使用 shallow 函数来创建组件的浅渲染，并使用 expect 函数和 toMatchSnapshot 函数来测试组件是否与预期的快照匹配。
第二个测试用例测试组件是否正确显示计数器的值。我们使用 shallow 函数来创建组件的浅渲染，并使用 find 函数和 text 函数来获取 h1 元素中的文本。然后，我们使用 expect 函数和 toEqual 函数来测试文本是否与预期的值匹配。
第三个测试用例测试组件是否在单击 + 按钮时调用 increment 函数。我们使用 jest.fn 函数来模拟 increment 函数，并将其作为 props 传递给组件。然后，我们使用 find 函数和 at 函数来获取 + 按钮，并使用 simulate 函数来模拟单击事件。最后，我们使用 expect 函数和 toHaveBeenCalled 函数来测试 incrementMock 函数是否被调用。
第四个测试用例测试组件是否在单击 - 按钮时调用 decrement 函数。我们使用 jest.fn 函数来模拟 decrement 函数，并将其作为 props 传递给组件。然后，我们使用 find 函数和 at 函数来获取 - 按钮，并使用 simulate 函数来模拟单击事件。最后，我们使用 expect 函数和 toHaveBeenCalled 函数来测试 decrementMock 函数是否被调用。
运行测试
现在，我们已经编写了测试用例。接下来，我们将使用 Jest 来运行这些测试。
在 package.json 文件中，添加以下内容：
{
"scripts": {
"test": "jest"
}
}然后，在终端中运行以下命令：
npm test
Jest 将运行测试用例，并显示测试结果。如果所有测试用例都通过，你将看到一条消息：
PASS ./Counter.test.js
如果有任何测试用例失败，Jest 将显示详细的错误消息，以帮助你确定问题所在。
总结
在本文中，我们介绍了如何使用 Jest 和 Enzyme 为 React+Redux 项目添加自动化测试。我们创建了一个简单的计数器应用程序，并编写了四个测试用例来测试它的功能。我们还介绍了 Jest 和 Enzyme 的基本用法，并演示了如何运行测试。
自动化测试是一个重要的软件开发实践，可以提高代码质量和可靠性。使用 Jest 和 Enzyme，可以轻松地为 React+Redux 项目添加自动化测试，并确保应用程序按预期工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c7cb8badd4f0e0ff1bd6c0