前言
随着Web应用的日益复杂，前端架构也变得越来越重要。Redux 是一个流行的状态管理库，它提供了一个可预测的状态管理方案。但是，与其它库一样，Redux 的开发和维护需要进行有效的测试。
在本文中，我们将探讨如何使用 Jest 对 Redux 应用进行测试。我们将介绍如何在 Mocha 中使用 Jest，以及如何测试不同类型的 Redux 更新。
准备工作
为了运行 Jest 测试，我们需要安装 Jest 和相关工具。请按照以下步骤操作：
- 安装 Jest：
npm install --save-dev jest
- 安装 redux-mock-store，用于创建可预测的存储：
npm install --save-dev redux-mock-store
- 安装 Enzyme，用于测试 React 组件：
npm install --save-dev enzyme enzyme-adapter-react-16
安装完成后，我们需要配置 Enzyme Adapter：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });在 Mocha 中使用 Jest
在使用 Jest 时，通常需要运行 Jest 命令来执行测试。但是，我们可以在 Mocha 之外的上下文中使用 Jest 运行测试。这样我们就可以使用 Mocha 中的额外功能，如钩子函数和测试报告。
首先，我们需要安装 mocha-jest，它将 Jest 集成到 Mocha 中：
npm install --save-dev mocha-jest
接下来，我们需要配置 Mocha，以便使用 Jest 运行测试。在 package.json 文件中添加以下配置：
"scripts": {
"test": "mocha test/**/*.js --require mocha-jest"
}这个配置指示 Mocha 在运行测试时使用 Jest。现在我们就可以编写测试了！
测试 Redux 更新
我们先从测试 Redux 更新开始。我们将首先编写一些测试来确保 Redux 状态更新发生如预期。
-- -------------------- ---- -------
------ -------------- ---- -------------------
------ - ----------- - ---- --------
------ ----------- ---- --------------
--------------- --------- -- -- -
----------------- --------- -- -- -
----- ------------ - - ------ - --
----- --------- - -----------------
---------- --------- --- ------- -- -- -
----- ----- - ------------------------
---------------- ----- ----------------- ---
----- ------- - -------------------
----- --------------- - - ----- ----------------- --
-------------------------------------------
---------------------------------------------
---
---------- --------- --- ------- -- -- -
----- ----- - ------------------------
---------------- ----- ----------------- ---
----- ------- - -------------------
----- --------------- - - ----- ----------------- --
-------------------------------------------
---------------------------------------------
---
---
---在这个测试中，我们通过使用 configureStore 创建一个 mock store，然后分别调用 dispatch 函数来模拟 Redux 的操作。最后，我们使用 expect 断言来验证状态更新发生与否，以及预期的状态更新是否已应用。
测试 React 组件
接下来，我们将编写测试来确保我们的 React 组件已正确集成 Redux 状态。我们可以使用 Enzyme 来模拟 React 组件。首先，我们来编写一个简单的计数器组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ - ------- - ---- --------------
----- ------- - -- ------ ---------- --------- -- -- -
------ -
-----
---------- ------ -----------
------- --------------------------------------
------- --------------------------------------
------
--
-
----------------- - -
------ ----------------------------
---------- --------------------------
---------- -------------------------
-
----- --------------- - ----- -- --
------ -----------
---
----- ------------------ - -------- -- --
---------- -- -- ---------- ----- ----------------- ---
---------- -- -- ---------- ----- ----------------- --
---
------ ------- ------------------------ -----------------------------我们将采用与前面相同的方式来编写测试，并使用 Enzyme 来确保组件已正确渲染。我们可以使用 mount 函数将组件挂载到 DOM 中，然后使用 find 函数查找组件中的元素。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ - -------- - ---- --------------
------ -------------- ---- -------------------
------ ------- ---- ------------------------
----------------- ----------- -- -- -
----- ------------ - - ------ - --
----- --------- - -----------------
----- ----- - ------------------------
----- --------- - --------------- ---------------------- ---------------
---------- ------ --- ----------- -- -- -
-----------------------------------------
---
---------- ------ --- ------- ------- -- -- -
--------------------------------------------------- ------ ----
---
---------- --------- --- ----- ---- --- --------- ------ -- --------- -- -- -
-------------------------------------------------
--------------------------------------------------- ------ ----
---
---------- --------- --- ----- ---- --- --------- ------ -- --------- -- -- -
-------------------------------------------------
--------------------------------------------------- ------ ----
---
---我们在这个测试中创建了一个 mock store，并将 Counter 组件包裹在 Provider 组件中，以便在测试中使用 Redux 状态。然后，我们使用组件的 find 函数来查找要测试的元素，模拟按钮点击，并使用 expect 断言来验证预期的状态更新已应用。
总结
在本文中，我们介绍了如何使用 Jest 在 Mocha 中进行 Redux 应用的测试。我们探讨了如何测试 Redux 的更新以及如何测试 React 组件。在编写测试时，请遵循最佳实践，编写通用的、可预测的测试，以确保您的应用在未来的变化中保持稳定。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646480a3968c7c53b055db0a