在前端开发过程中，我们不可避免地需要写一些复杂的业务逻辑，而 Redux 是一个非常有用的状态管理库，可以让我们更好地组织我们的应用程序并处理复杂的数据流。但是，测试 Redux 应用可能变得很困难。在本文中，我们将使用 Jest 来测试 Redux 应用，并向您展示如何建立你的测试套件。
Jest 的优势和基本知识点
Jest 是一个由 Facebook 开发的 JavaScript 测试框架。它深受 React 和 Angular 社区的喜爱，因为它具有以下优点：
- 快速且易于设置。
- 自带断言库，允许您轻松编写测试用例。
- 提供了强大的功能，如模拟和覆盖编写测试用例的函数，并允许您轻松地编写 E2E 测试用例。
- 可以很好地与 React 和 Redux 等库集成。
在使用 Jest 对应用程序进行测试之前，有一些基本知识点需要了解。
1. 测试运行器（test runner）
测试运行器是指执行测试套件并给出结果的工具。Jest 包含一个测试运行器，用于执行测试文件并输出结果。
2. 测试断言（test assertions）
测试断言是测试代码，用于检查代码是否按预期执行。Jest 包含了自带的断言库，使得用户可以轻松编写自己的测试断言。
3. describe 和 it
Jest 支持通过 describe 和 it 定义测试套件和测试用例。describe 可用于组合测试用例，并为它们设置共同的前提条件。it 则包含具体的测试用例内容。
测试 Redux 就要去 mock
要测试 Redux 应用，我们需要检查 Redux 中的行为和状态。通过编写与 Redux 数据流相关的测试用例，我们可以确保 Redux 存储状态以及 reducer 和 action 的相关行为表现符合我们的预期。由于 Redux 需要其它代码来调用 action 和 reducer，并且测试并不需要测试组合生成的结果，通常就需要进行 mock。
1. 利用 Jest 提供的jest.fn()
首先，我们可以使用 Jest 提供的 jest.fn() 函数将 reducer 和 action 创建函数模拟为一个简单的 mock 函数。
-- -------------------- ---- -------
----- ------------ - - ------ - --
----- --------------- - - ----- ----------- --
-------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-
------------------- -- -- -
------------------- -- -- -
---------- --------- --- ----- ---- ----- --- --------- -------- -- -- -
----------------------------------- ---------------------------
------ --
---
---
---------- ------ --- ------- ----- -- -- ------ -- ------- -- -- -
-------------------------------- -------------- ------ - ---
---
---
---2. 利用 Jest 提供的 mock 实现
我们也可以利用 Jest 提供的 mock 实现来 mock reducer 和 action 创建函数。mock 实现通过替换原有的函数，从而使得我们可以检查被替换函数被正确调用。
-- -------------------- ---- -------
----------------------- -- -- -
------ -
---------- ----------
--
---
------------------- -- -- -
--------------------- -- -- -
---------- -------- --- --------- -------- -- -- -
----- ----- - ----------------------------
------------------------------- -- -- ----- ----------- ----
----------------------------
----- ----- - -----------------
----------------------------
---
---
---在这个例子中，我们使用 jest.mock() 方法来模拟 increment() 函数，并替换其实现为返回 { type: 'INCREMENT' } 对象。在测试中，我们调用 increment() 函数并检查 Redux 的状态是否更新。
如何执行测试
在设置好测试用例并编写测试代码后，我们需要让 Jest 进行测试。
1. 利用 Jest CLI
首先，我们可以利用 Jest 的 CLI 工具来运行测试。在终端中输入以下命令：
jest
这将运行所有的测试并输出结果。
2. 利用 Webpack 和 Babel 配置
另一种方法是将 Jest 配置为与 Webpack 和 Babel 集成，并在运行测试之前将所有代码编译为 Node 可以理解的代码。
在项目根目录下创建一个 jest.config.js 文件并将以下代码粘贴到其中。
-- -------------------- ---- -------
-------------- - -
---------------- -------
------- ----------
----------------- -
--------------------- -----------------------------------
--
------------------------- ---------------------------
-------- -
---------- -
--------- --------------------------
--
--
--这个 jest.config.js 文件告诉 Jest 运行测试时应该使用哪些配置。在这个例子中，我们告诉 Jest 配置 TypeScript 和 node 环境，并在 Webpack 和 Babel 集成时使用这些配置。
最后，在 package.json 文件中添加以下代码：
{
"scripts": {
"test": "jest"
}
}这样，我们可以使用 npm run test 命令执行测试。
总结
在本文中，我们详细介绍了如何使用 Jest 测试 Redux 应用程序，从基本知识点到使用 mock 实现和运行测试的方法。虽然测试 Redux 应用需要编写更多的代码，但它可以确保应用程序具有正确的行为和状态，更加适用于大型应用程序。如果您对 Jest 和 Redux 有更深入的了解，那么加入测试到您的工作流中将使您的开发效率更高，你的应用质量会更有保障。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649139b248841e9894f3a141