前言
Redux 是一种用于 JavaScript 应用程序的可预测状态容器。它使得编写一致的行为和状态变化非常容易，是一种非常流行的前端状态管理库。而 Enzyme 则是 React 测试工具库，可以帮助我们编写针对 React 应用的测试用例。在本文中，我们将介绍如何使用 Enzyme 测试 Redux 组件，包括如何测试 action 和 reducer。
测试 Action
在 Redux 中，action 是用于描述发生了什么的对象。我们可以使用 Enzyme 测试我们的 action 是否能够成功创建以及是否包含正确的类型和数据。
考虑以下 action：
import { ADD_TODO } from './types';
export const addTodo = (text) => ({
type: ADD_TODO,
payload: text
})我们可以创建一个使用 Jest 和 Enzyme 的测试用例来测试此 action 是否按预期工作：
-- -------------------- ---- -------
------ - ------- - ---- ------------
------------------- -- -- -
---------- ------ -- ------ -- --- - ------ -- -- -
----- ---- - ------- -- ---------
----- -------------- - -
----- ---------
-------- ----
--
----------------------------------------------
---
---在此测试用例中，我们首先导入了要测试的 addTodo action，并使用 describe 包装测试用例的标题。然后，我们使用 Jest 的 it 函数来描述测试用例中的单个测试场景。我们定义了 text 变量来模拟传递给 action 的字符串，然后创建了一个名为 expectedAction 的对象，表示最终创建的 action 对象。我们最后使用 Jest 的 toEqual 函数，比较 addTodo 的返回值和 expectedAction 是否一致。
这个测试用例说明了如何使用 Enzyme 测试面向行为的 action，而不需要考虑实际组件的渲染过程。
测试 Reducer
在 Redux 应用程序中，reducer 用于根据接收到的 action 更新状态。因此，我们需要测试 reducer 是否正确地更新了状态。
考虑以下 reducer：
-- -------------------- ---- -------
------ - -------- - ---- ----------
----- ------------ - -
------ --
--
------ ------- -------- ------------- - ------------- ------- -
------ ------------- -
---- --------- -
----- - ------- - - -------
------ -
---------
------ ---------------- --------
--
-
--------
------ ------
-
--我们可以编写一个使用 Jest 和 Enzyme 的测试用例来测试此 reducer 是否按预期工作：
-- -------------------- ---- -------
------ ------- ---- -------------
------ - ------- - ---- ------------
--------------- --------- -- -- -
---------- ------ --- ------- ------- -- -- -
------------------------- --------------
------ --
---
---
---------- ------ ---------- -- -- -
----- ---- - ------- -- ---------
----- -------------- - -
----- ---------
-------- ----
--
----------------
------ --
-- --------------------------
------ ------
---
---
---在此测试用例中，我们首先导入了要测试的 reducer 中，以及 addTodo action。然后我们使用 describe 包装测试用例标题。我们使用 Jest 的 it 函数来描述测试用例中的场景，包括测试 reducer 的初始状态和测试 ADD_TODO 的操作。
我们首先测试 reducer 是否可以成功处理初始状态，即当未传递任何操作时，todos 是否为空数组。然后我们再测试 reducer 是否能够成功处理 ADD_TODO 操作。我们首先传递了初始状态，其 todos 属性为一个空数组，并创建一个名为 expectedAction 的对象，表示我们要执行的 ADD_TODO 操作。最后，我们使用 Jest 的 toEqual 函数，比较 reducer 的返回值和我们预期的状态。
这个测试用例说明了如何使用 Enzyme 测试 reducer 是否成功更新状态，以及如何正确测试 reducer 的各个分支逻辑。
结论
在本文中，我们介绍了如何使用 Enzyme 测试 Redux 组件，包括测试 action 和 reducer。我们还提供了使用 Jest 和 Enzyme 编写测试用例的示例代码。希望这篇文章能帮助你更好地理解如何编写前端测试用例，并建立良好的测试习惯。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f673afc5c563ced5868073