在 React Redux 开发过程中，良好的测试是保证代码质量与稳定的重要手段。Jest 是一个非常流行的 JavaScript 测试框架，而 Enzyme 则是一个 React 组件测试工具。本文将围绕如何使用 Jest + Enzyme 来测试 React Redux 应用，详细解析一些相关问题。
快速入门
在开始之前，我们需要先安装 Jest 和 Enzyme 库：
npm install --save-dev jest enzyme enzyme-adapter-react-16
在 Jest 中测试 React Redux 应用的流程如下：
- 安装所需依赖库；
- 编写测试文件；
- 运行 Jest 测试。
下面我们来看一个简单示例：
-- -------------------- ---- -------
-- ---------------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
------------------- -- -- -
---------- --------- --- ------- ---- ------ -------- -- -- -
----- ------- - ---------------- ----
--------------------------------------------------
-----------------------------------------
--------------------------------------------------
---
---在上面的示例中，我们通过 Enzyme 的 shallow 方法来创建一个 Counter 组件实例，然后检查它的初始值是否为 0。接着我们通过 simulate 方法对按钮点击事件进行模拟，并再次检查计数器的值是否更新为 1。
以上就是 Jest + Enzyme 最基础的使用步骤。接下来，我们将详细解析其中一些常见的问题。
如何测试 Redux 相关代码
在测试 React Redux 应用时，我们通常需要测试 Redux 相关代码，而 Redux 的核心在于 reducer 和 action。我们需要确保它们在不同情况下能够正确地更新和反映应用的状态。
测试 Reducer
Reducer 是 Redux 中的一个纯函数，它以当前状态和一个给定的 action 作为参数，并返回一个新的状态。我们可以编写一个 reducer 测试用例，以确保其能够正确处理各种情况。
下面是一个简单的示例：
-- -------------------- ---- -------
-- ----------------------
------ -------------- ---- -------------------
-------------------------- -- -- -
---------- ------ --- ------- ------- -- -- -
-------------------------------- -------------- ------ - ---
---
---------- ------ ----------- -- -- -
----- ------ - - ----- ----------- --
----------------------- ------ - -- ------------------ ------ - ---
---
---------- ------ ----------- -- -- -
----- ------ - - ----- ----------- --
----------------------- ------ - -- ------------------ ------ - ---
---
---在上面的示例中，我们编写了以下测试用例：
- 测试 reducer 在未提供状态参数时是否能够正确返回初始状态；
- 测试 reducer 在接收到
INCREMENT动作时是否能够正确更新状态； - 测试 reducer 在接收到
DECREMENT动作时是否能够正确更新状态；
我们通过 toEqual 方法判断 reducer 的输出是否与预期的状态相同。如果测试通过，我们就可以确信 reducer 能够按照预期正确地工作了。
测试 Action
Action 是 Redux 中描述在应用中发生事件的普通 JavaScript 对象。它们只是简单的传递有关何时还原状态的信息。我们不会对它们进行测试。但是，当我们创建一个 action 时，我们可能会遇到一些问题。
下面是一个简单的示例：
-- -------------------- ---- -------
-- ----------------------
------ - ---------- --------- - ---- -------------------
-------------------------- -- -- -
---------- ------ -- ------ -- --------- --- --------- -- -- -
----- -------------- - - ----- ----------- --
--------------------------------------------
---
---------- ------ -- ------ -- --------- --- --------- -- -- -
----- -------------- - - ----- ----------- --
--------------------------------------------
---
---在上面的示例中，我们测试了两个 action，分别是 increment 和 decrement。我们使用 toEqual 方法来比较预期的输出是否与实际输出相同。如果测试通过，我们就可以确保我们的 action 能够正确生成。
如何 Mock 接口请求
当我们在测试 React 组件时，经常需要为组件提供 mock 数据或 mock 接口请求。这些 mock 数据和请求通常会掩盖掉真正的网络请求，从而使我们的测试变得更加可控和可靠。
下面是一个示例，我们将展示如何使用 Jest 和 fetch-mock 库来 mock 接口请求：
-- -------------------- ---- -------
-- -----------
------ ----- ---- --------
------ - ----- - ---- ---------
------ --- ---- --------
------ --------- ---- -------------
--------------- -- -- -
------------- -- -
------------------
------------------- - ----- ----------- ---
---
------------ -- -
------------------
---
---------- ------ - ---- -- ---------- -- -- -
----- ------- - ---------- ----
-------------------------------------------------------
---
---在上面的示例中，我们使用 Jest 和 Enzyme 测试了应用程序的 App 组件。我们首先用 beforeEach 重置了 mock 请求，并定义了一个 * 的 mock 响应，它将返回一个包含 data 字段的对象。然后，我们在测试运行之前渲染了组件，并使用 Enzyme 的 mount 方法来获得组件的实例。最后，我们使用 expect 断言组件是否正确渲染了产品列表。
在测试结束之后，我们使用 afterEach 重置 mock 请求，以便在下次测试中忘记清除它们时避免出现意外结果。
如何测试异步代码
在实际开发中，我们经常需要编写与后端 API 交互的代码。这些代码通常需要使用异步请求来获取数据，然后将其渲染到页面上。但是，在测试这种异步代码时，我们需要使用 Jest 的一些特殊测试工具。
测试异步代码的策略是尽早断开异步操作，并使用 Jest 提供的 done 回调来捕获异步操作完成的事件。我们可以在测试之前告诉 Jest 停止块，以便等待异步操作完成。
下面是一个示例，我们将展示如何使用 Jest 对异步代码进行测试：
-- -------------------- ---- -------
-- -------------
--------------- ------- -- -- -
---------- ---- --- -- ----- --------- ----- ----------- ---- -- -
----------------------- -- -
------------------
-------
---
---
---------- ---- --- -- ----- --------- ----- ------------- ----- -- -- -
------------ ----------------------------- --------
---
---
-------- --------------- -
------ --- --------------- -- -
------------- -- -
--------------- --------
-- ------
---
-在上面的示例中，我们创建了两个测试块，每个测试块测试一个异步函数。在第一个测试块中，我们传递了一个回调函数 done，并在异步操作完成时调用它。在第二个测试块中，我们使用 async/await 语法等待函数执行完成并检查函数的返回值。
如何使用 Redux-Mock-Store 测试 Redux
我们可以使用 Redux-Mock-Store 库来测试 Redux store。Redux-Mock-Store 提供了一个可存储状态的 Redux 存储对象，它可以用于测试 Redux 组件中的所有 Redux 活动，例如 Redux 中的异步操作，零散操作，计时器 dispatch 等等。
下面是一个简单的示例：
-- -------------------- ---- -------
-- ---------------
------ ------------------ ---- -------------------
------ ----- ---- --------------
------ - ----------- ------------- ------------ - ---- ------------
------ - ------------ -------------- ------------- - ---- --------------
----- ----------- - --------
----- --------- - --------------------------------
--------------- --------- -- -- -
---------- ------ -- ------ -- ----- ---------- -- -- -
----- -------------- - - ----- ----------- --
---------------------------------------------
---
---------- ------ -- ------ -- ----- --------- -------------- -- -- -
----- --------- - ------- ---------- ------
----- -------------- - - ----- -------------- ----- - --------- - --
--------------------------------------------------------
---
---------- ------ -- ------ -- ------ ----- --------- -- -- -
----- ----- - --- ------------ --------
----- -------------- - - ----- -------------- ----- - ----- - --
----------------------------------------------------
---
---------- -------- ----- --- ------- ------- ---- -------- -- ------------ -- -- -
----- ----- - --------------
----- -------- - - ---------- ------- ---------- ----- --
------------ - ------------------------------- --
-----------------
--- -----
----- -- -- --------------------------
--
--
----- --------------- - -
- ----- ----------- --
- ----- -------------- ----- -------- --
--
------ ------------------------------------ -- -
----------------------------------------------------
---
---
---在上面的示例中，我们测试了异步操作和使用 Redux store 进行测试。我们首先定义了一个 Redux store，并使用 Jest 中的 mockImplementation 来模拟函数的行为，以便在调用 API 时返回 mock 数据。使用 store.getActions() 方法来获取 store 执行过的 action。
当 store 执行异步操作时，我们将其包装在一个 promise 中，并使用 Jest 中的 done 方法捕获其完成事件。在完成事件中，我们可以断言 store 中的 action 是否完全符合预期。
如何测试 React 组件的 UI
我们可以使用 Enzyme 来测试 React UI。Enzyme 是由 AirBNB 开发的一个 React 组件测试工具，它允许我们模拟组件和我们应用程序的生命周期方法，并测试它们的输出是否符合预期。
下面是一个简单的示例：
-- -------------------- ---- -------
-- --------------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
---------- -------- -- -- -
----- ------- - --------------- ----
--------------------------------------
---
---------- ------- - ------ --------- -- -- -
----- ------- - --------------- ----
-----------------------------------------------------
---
---------- ------- - ------ -- -- -
----- ------- - --------------- ----
--------------------------------------------------
---
---在上面的示例中，我们测试了一个简单的 React 组件 Header。我们使用 Enzyme 的 shallow 方法来创建组件实例，并使用 find 方法来查找组件中的元素。最后，我们使用 toBeTruthy 断言元素是否存在和是否符合预期。
总结
本文在 Jest 和 Enzyme 的基础上，进一步探讨了如何测试 React Redux 应用程序的各种方面。我们涵盖了 Redux reducer 和 action 的测试，mock 接口请求的测试，异步代码的测试，使用 Redux-Mock-Store 测试 Redux，以及测试 React 组件的 UI 等方面的内容。这些内容不仅对测试新手有所帮助，同时也为经验丰富的开发者提供了深刻的见解和建议。希望您能够从中受益，写出更加可靠和高质量的 React Redux 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659f36deadd4f0e0ff7e51ae