在 Jest 测试中如何处理异步 Redux action
引言
在前端开发中使用 Redux 进行状态管理已经成为了一种常见的模式。而在编写测试用例时，我们需要测试 Redux action 在执行过程中是否按预期返回了正确的值。Redux action 可能会涉及到异步请求，这就需要我们在 Jest 测试中处理异步 Redux action。本文将介绍如何在 Jest 测试中处理异步 Redux action，帮助读者更好地编写测。
Redux 基础
在编写测试用例前，我们需要先了解 Redux 的基础知识。首先，我们需要知道 Redux 的核心概念：Store，Action 和 Reducer。
Store
Store 是 Redux 的核心，它是保存应用程序状态的容器。在 Redux Store 中，状态以单个 JavaScript 对象存储，并且只有一个单一的状态树。Store 包含了两个重要的方法：
getState()用于访问当前存储在 Store 中的状态；dispatch(action)用于将 Action 分发到 Reducer，进而修改 Store 中的状态。
Action
Action 是一个包含数据的普通 JavaScript 对象，它用于描述发生了什么事情。例如，用户点击了一个按钮，这个按钮事件可以被表示成一个 Action，包含了需要进行的逻辑操作和任何必要的数据。
Redux 中的 Action 必须具有 type 属性，用于描述 Action 的类型。 type 属性通常作为一个字符串常量集中定义，以避免拼写错误。
Reducer
Reducer 是一个函数，它负责根据当前的状态和 Action 来返回新的状态。Reducer 函数跟踪每个 Action 的类别，从而能够根据 Action 记录的数据进行状态的修改。
Reducer 函数根据特定的 type 属性对 Action 做出响应。Reducer 通常都通过 switch 语句进行实现。如果 Reducer 不识别特定的 Action 类型，就需要返回当前状态。
处理异步 Redux action
处理异步 Redux action 在 Jest 测试中一般有两种方式：
- 使用 redux-mock-store；
- 使用 Jest 提供的异步测试方式。
redux-mock-store
redux-mock-store 是一个基于 Redux Store 的测试工具，它可以帮助我们测试 Action Creator。
redux-mock-store 提供了一个 getMockStore 方法来创建一个“虚拟”的 Store。我们可以调用 dispatch() 方法并传入 Action Creator 来测试异步 action。
下面是一个示例代码：
-- -------------------- ---- -------
------ ------------------ ---- -------------------
------ ----- ---- --------------
------ - --------- - ---- ------------
----- ----------- - --------
----- --------- - --------------------------------
----------- --------- -------- -- -- -
----- -------------- - -- ----- -------------------- ---
----- ----- - --------------
------ ----------------------------------- -- -
----- ------------ - -------------------
---------------------------------------------
---
---在上面的示例代码中，我们首先导入了 configureMockStore 方法，并使用 redux-thunk 中间件来支持异步 action。
接下来，我们创建了一个虚拟的 Store，并将 fetchData Action Creator 传入 dispatch() 方法。最后，我们使用 then() 方法返回了一个 Promise 对象，该对象会在异步 action 完成后执行，这样就可以验证 action 返回了预期的值。
Jest 异步测试方式
Jest 提供了一些异步测试的函数，例如 done() 和 Promise 。
在下面的示例代码中，我们使用 done() 函数来处理异步 action，done() 函数用来告诉 Jest 测试用例已经完成了。
-- -------------------- ---- -------
------ - --------- - ---- ------------
----------- --------- -------- ------ -- -
----- -------------- - -- ----- -------------------- ---
-------- ---------- -
----- ------------ - -------------------
---------------------------------------------
-------
-
--------------------
---在上述示例中，我们首先创建了一个 callback() 函数，并将其传入 fetchData() 方法中。
接下来，我们在 callback() 函数中使用 getActions() 方法获取 Store 中的 action，并将其与预期的 action 做比较，最后调用 done() 函数告诉 Jest 测试已结束。
总结
在本文中，我们介绍了 Redux Store，Action 和 Reducer 三个核心概念，以及如何使用 Jest 测试潜在的异步 Redux action。
通过理解这些概念并掌握基本的 Jest 测试方法，在编写测试用例时，我们将更容易地测试异步 Redux action 并确保它们按预期运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b74bdeadd4f0e0fffdd6b0