Redux 是一个轻量级的状态容器，它让前端的应用程序易于管理复杂的状态。Redux 由 action，reducer 和 store 构成。开发者可以使用不同的测试库测试这些不同的部分。在本文中，我们将介绍如何在 Chai 中测试 Redux 的 action 和 reducer，以确保我们的应用程序正常运行。
测试 Redux Action
Actions 定义了一个应用程序中的事件，它们被发送到 Redux 的 store 中。这些事件被用于更新 Redux 的应用程序状态。测试 action 可以验证代码库中的各个 action、action creator 和 store 的方法。在测试 action 之前，您需要注意以下几点：
- 您需要先使用 npm 或 yarn 安装依赖包：mocha、chai、redux-thunk。
- 您需要确定要测试的 action creator 和所需的输入参数。
- 您需要在测试之前定义初始状态。
- 您需要调用修改后的状态的 reducer。
下面是一个示例文件 actions.test.js，您可以根据自己的需要在其中更改代码。
-- -------------------- ---- -------
------ ---- ---- --------
------ ---- ---- -------
------ --------- ---- --------------
------ ------------------ ---- -------------------
------ - ---------- - ---- ------------
------ - ------------------ -------------------- ---------------- - ---- ----------------
--------------
--------------------
----- --------- - --------------------------------
--------------- --------- -- -- -
----------- ------------------- ---- -------- ----- --- ---- ------ -- -- -
----- --------------- - -
- ----- ----------------- --
- ----- -------------------- -------- ---------- --
--
----- ----- - ----------- ------ -- ---
------ ------------------------------------ -- -
------------------------------------------------------
---
---
---在这个示例中，我们首先引入 mocha 和 chai 的库，并声明了要使用 redux-thunk 中间件。redux-thunk 允许我们在我们的 action creator 中返回一个函数，而不是一个 action 对象。然后，我们引入了 configureMockStore 用于创建一个虚拟的 Redux store。接着，我们定义了我们要测试的 action creator，即 fetchUsers 。我们设计了一个假的返回结果，并声明了我们期望 action 的结果变量。接下来，我们实际 dispatch 并断言它返回我们期望的 action。
测试 Redux Reducer
Reducer 是一个函数，它负责更改 Redux 应用程序中的状态。Redux 的 store 依赖它来处理发送到它的事件。在 Redux store 上的每个操作都将作为一个 action 对象进行分发。在分发 action 后，store 调用应用程序的 reducer 来计算新的状态，并将新状态放到 store 中。测试 reducer 可以验证业务逻辑是否正确，以及现有状态所包含的正确值。在测试 reducer 之前，您需要注意以下几点：
- 您需要确定哪个 reducer 适用于您的特定应用程序。
- 您需要确定要执行的操作，以及正常状态下预期的输出。
- 您需要设置初始状态。
下面是一个示例文件 reducers.test.js，您可以根据自己的需要在其中更改代码。
-- -------------------- ---- -------
------ ---- ---- --------
------ ---- ---- -------
------ ----------- ---- -------------
------ - ------------------ ------------------- - ---- ----------------
--------------
-------------------- -- -- -
---------- ------ --- ------- ------- -- -- -
---------------------- ----------------------- ------ -- ---
---
---------- ------ ------------------- -- -- -
------------- ------ -- -- - ----- ----------------- ----------------------
------ ---
---
---
---------- ------ --------------------- -- -- -
------------
- ------ -- --
- ----- -------------------- -------- ------------ --
---------------------
------ -------------
---
---
---在这个示例中，我们首先引入了 mocha 和 chai 的库，并引入 rootReducer。我们在 it() 函数中编写了三行代码：第一行测试返回的初始状态，并期望它匹配假的初始状态。第二行测试 reducer 处理 FETCH_USERS_START 的行为。最后一行测试 reducer 处理 FETCH_USERS_SUCCESS 的行为，以及它如何更新状态。这些测试都用到了 chai 的语法来来比对实际的 reducer 返回的值和期望的值。
结论
在本文中，我们介绍了如何在 Chai 中测试 Redux 的 action 和 reducer。我们不仅演示了如何编写测试，还解释了测试文件中的每个代码块的功能。chai 非常适合用于编写使用 mocha 进行测试的 JavaScript 应用程序。如果您尝试了本文中的代码，并成功地运行了测试，那么您已经执行了测试的一个基本级别。但总体而言，测试需要考虑更多的情况和边缘情况。我们建议您查阅更多的资源，以便更全面地了解如何更好地测试 Redux 的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f78cb5c5c563ced5a25e83