Redux 是一个流行的用于构建 JavaScript 应用程序的状态管理库。在前端开发中，Redux 提供了一种方便的方式来管理状态，并使组件之间的通信变得更加容易。 Enzyme 和 Jest 则是流行的前端测试工具，它们可以帮助我们在开发过程中验证我们的代码是否按预期工作。在本篇文章中，我们将介绍如何使用 Enzyme 和 Jest 来手动模拟 Redux 动作。
Redux 模式
在介绍如何手动模拟 Redux 动作之前，让我们先来了解一下 Redux 模式。Redux 的核心概念是“store”，它是一个对象，它包含了全局状态树。你可以使用“action”去描述对这个状态树的更改，然后使用“reducer”来实际处理这些更改。最后，Redux 会将更新后的状态传递给应用程序中的所有相关组件。
为了手动模拟 Redux 动作，我们将需要使用 Enzyme 和 Jest 以及一些其他的工具。我们将需要一个 Redux store，一个 action，一个 reducer 和一些组件来理解如何使用这些工具一起工作。下面我们将分别介绍这些概念及其实现。
创建 Redux Store
在 Enzyme 和 Jest 中手动模拟 Redux 动作之前，我们需要创建一个 Redux store。下面是一个简单的 store 的代码例子：
------ - ----------- - ---- --------
----- ------- - ------ - - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - --
--
---- ------------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
--
----- ----- - ---------------------
------ ------- ------上述代码中的 reducer 函数将接收当前的状态和一个 action 对象，当调用 dispatch(action) 时，reducer 函数将解释 action 并返回新的状态。我们可以使用 createStore 来创建一个 Redux store。
创建 Action
接下来，我们需要创建一个 action，它是一个对象，用于描述 Redux store 中发生的更改。我们可以使用 createAction 函数来创建这个 action 对象。下面是 createAction 的代码示例：
------ ----- ---------------- - -- -- -- ----- ------------ --- ------ ----- ---------------- - -- -- -- ----- ------------ ---
上述代码中，我们可以创建两个函数，一个用于增加计数器，一个用于减少计数器。这两个函数都会返回一个简单的对象，其中包含了一个 type 属性来描述这个 action。
创建 Reducer
我们还需要一个 reducer 函数，它用于处理 action 并返回新的 state。上面我们已经创建了一个 reducer 函数，可以使用这个函数作为我们模拟 action 的处理程序。
创建组件
我们还需要创建一些组件来检查我们的 action 是否按预期工作。我们将创建两个组件：一个 Counter 组件，它将显示当前的计数器值，还有一个组件，它将调用 incrementCounter 和 decrementCounter 函数，以使 Counter 组件在点击按钮时增加或减少计数器值。
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
------ - ----------------- ---------------- - ---- ------------
----- ------- - -- -- -
----- ----- - ------------------- -- -------------
----- -------- - --------------
------ -
--
----------- ------ ------------
------- ----------- -- ----------------------------------------
------- ----------- -- ----------------------------------------
---
--
--
------ ------- --------上述代码为 Counter 组件，它将从 Redux store 中获取当前的值，并显示在页面上。还有两个按钮可以通过调用 dispatch 函数来增加或减少计数器的值。
编写测试用例
现在，我们有了一个简单的计数器应用程序，并且已经创建了一个 Redux store、一个 action 和一个 reducer。接下来，我们需要编写一些测试用例来描述我们的 action 是否按预期工作。
------ ----- ---- --------
------ - ----- - ---- ---------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ ------- ---- ------------
-------------- --- ------- ----------- -- -- -
----- ------- - ------
--------- --------------
-------- --
-----------
--
-----------------------------------------------
-------------------------------------------------- ------ ----
---
-------------- --- ------- ----------- -- -- -
----- ------- - ------
--------- --------------
-------- --
-----------
--
-----------------------------------------------
-------------------------------------------------- ------ -----
---上述代码为两个测试用例，它们将 mount Counter 组件并模拟点击“+”和“-”按钮。我们还使用 Enzyme 的 find() 函数来查找对应的元素，并使用 Jest 的 expect() 函数来测试 Counter 组件是否按预期工作。
总结
在这篇文章中，我们介绍了如何使用 Enzyme 和 Jest 手动模拟 Redux 动作。我们创建了一个 Redux store、一个 action 和一个 reducer，并且还创建了一个可以增加或减少计数器值的组件。通过编写测试用例，我们可以验证我们的代码是否按预期工作。这种手动模拟 Redux 动作的方法可以帮助我们更好地理解 Redux 的工作原理，并帮助我们编写更高质量的代码。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654305b17d4982a6ebcadd19