在前端开发中，使用 Redux 的应用日益增多。Redux 的一个重要特点是，它的状态（即 Store 中的数据）是纯函数式的。这意味着，我们可以非常方便地进行单元测试，以确保我们的 Redux 应用在各种情况下均能正常工作。
在本文中，我们将介绍如何使用 Jest 和 redux-mock-store 库，对我们的 Redux 应用进行单元测试。我们还将深入探讨 Redux 的单元测试中的一些最佳实践，以帮助您编写高质量、可靠的测试用例。
安装 Jest 和 redux-mock-store
首先，我们需要安装 Jest 和 redux-mock-store。可以通过以下命令来完成安装：
npm install --save-dev jest redux-mock-store
配置 Jest
在我们开始编写测试用例之前，让我们先配置一下 Jest。在项目根目录下创建一个名为 jest.config.js 的文件，并添加以下代码：
-- -------------------- ---- -------
-------------- - -
---------------- -------
------ ------------------
---------- -
-------------- ----------
--
---------- ---------------------------------------------
--------------------- ------ ------ ----- ------ ------- --------
--这些选项将：
- 指定 Jest 的测试环境为 Node.js（因为我们不需要浏览器环境来运行 Redux 应用的单元测试）。
- 指定源代码文件夹为 src。
- 告诉 Jest 在运行代码之前使用 ts-jest 转换 TypeScript 代码。
- 告诉 Jest 去查找以 .test.ts 或者 .spec.ts 结尾的测试文件。
编写测试用例
假设我们有以下简单的 Redux 内容：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - - -------- - --
-------- ------------- - ------------- ------- - ----- ------ -- -
------ ------------- -
---- ------------
------ - -------- ------------- - - --
---- ------------
------ - -------- ------------- - - --
--------
------ ------
-
-
------ ----- ----- - ---------------------该代码定义了一个简单的 Redux store，包含了一个 counter 状态。我们可以通过 reducer 函数来修改它，通过调用 store.dispatch 来分发 action。
下面是一个简单的测试用例，它使用 mock store 并分发一个 INCREMENT 动作验证 store 是否被正确修改：
-- -------------------- ---- -------
------ -------------- ---- -------------------
--------------- ------- -- -- -
-------------- --- --------- -- -- -
----- --------- - -----------------
----- ----- - ----------- -------- - ---
---------------- ----- ----------- ---
----- ------- - -------------------
-------------------------- ----- ----------- ----
------------------------------------------
-----------------------------------------------------
-----------------------------------------
---
---在这个测试中，我们首先创建了一个 mock store 对象，将 initialState 的 counter 设置为 0。然后我们分发一个 INCREMENT 动作，检查 store 是否被正确修改。
要检查 store 的状态是否正确，我们可以使用 store.getActions() 方法获取被分发的 action 数组。同样，我们可以使用 store.getState() 方法来获取 store 中的当前状态。
最佳实践
以下是一些编写有用的 Redux 单元测试的最佳实践：
对每个 reducer 进行单元测试
每个 reducer 函数都应该有对应的单元测试。在测试中，我们应该考虑 reducer 的各种情况并验证其是否处理这些情况。例如：
it("handles ADD_TODO action correctly", () => {
const initialState = [{ id: 1, text: "First ToDo", complete: false }];
const newTodo = { id: 2, text: "Second ToDo", complete: false };
const action = { type: "ADD_TODO", payload: newTodo };
const state = todosReducer(initialState, action);
expect(state).toEqual([...initialState, newTodo]);
});在这个例子中，我们测试了 ADD_TODO 动作的 reducer 函数。我们将先前的 initialState 设置为一个数组，其中仅包含一个 Todo。然后我们分发一个 ADD_TODO 动作，以添加新的 Todo 对象。最后，我们验证状态是否已正确更新。
测试异步操作
Redux 应用通常包含异步操作（例如从服务器获取数据），这些操作对于单元测试来说可能比较困难。这时，我们可以使用类似于 Jest 中的 done 函数来处理异步操作。
-- -------------------- ---- -------
----------- --- ------- ---------- ------ -- -
----- --------- - ------------------------
----- ----- - ------------
-- -------- --- ----- ------
----------------------------------- -- -
----- ----- - -----------------
-- ------ --- -----
----------------------------------
--------------------------------
-----------------------------------
------- -- ------ ------- ---- --- ---- -- --- -------- ----- --
-- ---- ------- --- ----- ----- ----- -- --- -----
---
---在上述代码中，我们使用了类似于硬编码的 API 请求的 fetchData 动作。该动作返回一个 Promise 对象，该对象在执行完成后将调用 done 函数。在 done 函数中，我们可以验证 API 请求是否已成功。
测试 action creators
Action creators 可能是我们 Redux 应用的关键组件之一。因此，我们应该编写专为其设定的测试用例，以确保我们的 action creators 在各种情况下都能正常工作。
-- -------------------- ---- -------
----------- --- ------- -------- -- -- -
----- -------------- - -
----- -----------
-------- - --- -- ----- ----- ------ --------- ----- --
--
---------------- --- -- ----- ----- ------ --------- ----- ------------
--------------
--
---在上述例子中，我们编写了一个测试用例，测试 addTodo(action) action creator 是否能够正确的创建一个 ADD_TODO 动作。我们创建了一个期望的 action 对象，然后检查是否与实际使用的 addTodo() 方法获得的对象相同。
结论
在本文中，我们已经介绍了如何使用 Jest 和 redux-mock-store 库，对 Redux 应用进行单元测试。我们还深入探讨了 Redux 的单元测试中的最佳实践，以帮助您编写高质量、可靠的测试用例。
我们希望本文能够对您对 Redux 单元测试有所帮助，并且可以帮助您编写可靠、可维护的令人满意的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670b5ea1d91dce0dc889d9f5