在 React 应用程序中，Redux 通常用于管理应用程序的状态。Redux 的异步 Action 可以帮助您处理异步数据请求和其他副作用。但是，如何测试 Redux 异步 Action 呢？在本文中，我们将看看如何使用 Jest 进行测试。
什么是 Jest？
Jest 是 Facebook 开发的 JavaScript 测试框架。它被广泛用于测试 React 应用。Jest 具有简单的 API 和易于使用的断言。它还具有可扩展性，允许您编写自定义测试运行器和记者。
准备工作
在开始测试 Redux 异步 Action 之前，您需要在项目中设置 Jest。您可以使用 create-react-app 快速创建 React 应用程序并包含 Jest。
例如，您可以使用以下命令：
npx create-react-app my-app --template redux
上面的命令将创建一个名为 my-app 的新 React 应用程序，并使用 Redux 模板自动包含 Jest。这会自动为您安装 Jest 和其他必需的依赖项。
测试异步 Action
Redux 中的异步 Action 是返回函数的 Action。该函数具有 dispatch 和 getState 作为参数，并且可以使用任何异步 API 或 Promise。
在测试 Redux 异步 Action 时，主要关注以下方面：
- 测试 Action 生成器。
- 测试返回函数。返回函数需要 dispatch 和 getState 作为参数。
以下是一个简单的 Redux Action 创建器。它获取 userId 并使用 axios 发送 GET 请求：
-- -------------------- ---- -------
------ ----- -------- - ------ -- -
------ ----- -------- -- -
----- -------- - ----- ------------------------------
----------
----- --------------
-------- -------------
---
--
--现在让我们看看如何测试此 Action。
测试 Action 生成器
首先，我们需要测试 loadUser 生成的 Action。我们将使用 Jest 执行此任务。在我们的测试文件中，我们可以编写以下代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
-------------------- -- -- -
---------- ------ -- ------ -- ---- ------ -- -- -
----- ------ - ----
----- -------------- - -
----- -------------
--
--------------------------------------------------------------------------
---
---在上面的代码中，我们编写了一个测试用例，该测试用例描述了 loadUser 生成的 Action。我们调用 loadUser，并传递一个 userId。然后，我们定义了一个 expectedAction，该 Action 包含 type。
最后，我们使用 Jest 的 toEqual 和 toEqualContaining 断言检查 Action 是否被正确生成。
测试返回函数
接下来，我们需要测试 loadUser 返回的函数。我们将使用 Jest 的模拟函数模拟 dispatch 和 getState。在测试文件中，我们可以编写以下代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ ----- ---- --------
-------------------
-------------------- -- -- -
---------- ------ -- ------ -- ---- ------ ----- -- -- -
----- -------- - ----------
----- -------- - ----------
----- -------- - -
----- -
--- ----
----- ----- ----
-
--
------------------------------------------
----- ----------------------- ----------
---------------------------------------
----- --------------
-------- -------------
---
---
---在上面的代码中，我们使用 Jest 的模拟函数模拟了 dispatch 和 getState。然后，我们创建了一个 response 对象，该对象包含服务器端返回的数据。
接下来，我们使用 Jest 的 mockResolvedValueOnce 模拟 axios.get 的行为，以便在调用 loadUser 返回的函数时，它将返回我们定义的 response 对象。
然后，我们调用 loadUser，并传递 dispatch 和 getState。我们使用 toHaveBeenCalledWith 断言来验证 Action 是否被正确调用。
结论
测试是软件开发过程中必不可少的一部分。在本文中，我们研究了如何使用 Jest 测试 Redux 异步 Action。我们检查了 Action 生成器和返回函数，并使用实际示例和 Jest 的各种断言进行了测试。
通过测试，我们可以确保我们的应用程序在生产环境中具有高质量和预期的行为。它还使我们可以快速识别和修复存在的问题。
示例代码
您可以在 Github 上找到完整的示例代码：https://github.com/baixiaoling/jest-redux-async-action-example。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f21c7852fa63baedc07c77