如何在 Jest 中测试 Redux 的异步 action

面试官：小伙子，你的代码为什么这么丝滑？

引言

Redux 是一个流行的 JavaScript 应用程序状态管理器，它允许在应用程序中统一管理状态，并利用可预测性和可调试性提高应用程序的可维护性。然而，Redux 中的异步 action 可能会给测试带来挑战，因为异步请求的响应是不确定的，而且可能需要等待一段时间才能返回结果。

Jest 是一个流行的 JavaScript 测试框架，它在许多领域都表现出色。在本文中，我们将探讨如何使用 Jest 测试 Redux 中的异步 action。

准备工作

在开始编写测试用例之前，我们需要确保已正确配置项目。以下是必需的前提条件:

  • 安装 Jest：npm install --save-dev jest
  • 安装 babel-jest：npm install --save-dev babel-jest
  • 安装 redux 和 redux-thunk：npm install --save redux redux-thunk

在安装这些必要的包之后，我们需要在 package.json 文件中添加 Jest 配置：

-
  ---------- -
    ------- ------
  --
  ------- -
    ------------ -
      -------------- ------------
    -
  -
-

这个配置文件告诉 Jest 在运行测试时将 ECMAScript 6 文件转换为 ECMAScript 5，使其在所有浏览器中都能运行。

编写测试用例

有几个步骤，我们需要遵循，以在 Jest 中测试 Redux 中的异步 action:

  1. 为异步 action 创建 action creator。
  2. 创建 mock API 函数。
  3. 编写测试用例，包括设置 Redux store 和使用 Jest 的 mock 函数。

我们将要测试一个简单的登录场景。在登录页面上，我们向服务器发送用户名和密码，如果验证成功，我们将获得一个带有用户令牌的响应。让我们看看如何使用 Redux 和 Jest 进行测试。

首先，我们需要创建 action creator，它将负责异步请求和响应。以下是一个简单的 login action creator：

------ ----- ---- --------

------ ----- ------------- - ----------------
------ ----- ------------- - ----------------
------ ----- ------------- - ----------------

----- ------ - ------------------------------

------ -------- -------------- -
  ------ -
    ----- -------------
  --
-

------ -------- ------------------- -
  ------ -
    ----- --------------
    -----
  --
-

------ -------- ------------------- -
  ------ -
    ----- --------------
    -----
  --
-

------ -------- --------------- --------- -
  ------ -------- -- -
    -------------------------

    ------ ------------------ - --------- -------- --------
      -------- -- -
        --------------------------------------------
      --
      ----- -- -
        --------------------------------------------------
      -
    --
  --
-

由于 Redux 只能处理同步操作，因此我们使用了 Redux Thunk 中间件来处理异步操作。该 action creator 总是返回一个函数，这个函数接收 dispatch 方法作为其唯一参数，并使用它来触发其他传统的同步 action。

接下来，我们需要创建一个 mock API 函数用于通过 axios 模拟异步登录请求：

------ ----------- ---- ---------------------
------ ----- ---- --------

------ ------- ---------- -
  ----- ---- - --- -------------------
  ----- ----- - --------

  ------------------------------------------------------- -- -
    ----- - --------- -------- - - ------------------------

    -- --------- --- ------ -- -------- --- ----------- -
      ------ -
        ----
        -
          -----
        -
      --
    - ---- -
      ------ -
        ----
        -
          ------ -------- ------------
        -
      --
    -
  ---

  ------ -----
-

我们使用 axios-mock-adapter 来模拟异步请求，并进行各种验证。

现在我们已经准备好编写测试用例了。根据我们的 login action creator，我们期望以下三个 action 会被触发：LOGIN_REQUEST、LOGIN_SUCCESS和LOGIN_FAILURE。以下是一个简单的测试：

------ --------- ---- ---------------------
------ - -------------- -------------- -------------- ----- - ---- ------------------

----- ---- - ------------

----------- ------ --------- -- -- -
  ----- -------- - -------
  ----- -------- - -----------
  ----- -------- - ----------

  ------------------------------------------ - --------- -------- ------------- -
    ------ -------
  ---

  ------ --------------- --------------------------- -- -
    ------------------------------------------- ----- ------------- ---
    ------------------------------------------- ----- -------------- ------ ------- ---
  ---
---

在这个测试用例中有几个关键点：

  • 我们创建了一个名为 mock 的 axios mock，并在测试用例之前立即启动它。
  • 我们使用 jest.fn() 创建了一个名为 dispatch 的 mock 函数。
  • 在请求成功的回调函数中，我们使用 expect() 断言来确保正确的 action 被触发。

这个测试用例覆盖了所有情况，包括成功登录和无效凭据。并且使用了 Jest 提供的 mock.calls 方法来确保正确的 action 获得了正确的 payload。

结论

Jest 是一个强大的测试框架，在测试 Redux 中的异步 action 时特别有用。无论你是在本地还是通过 CI/CD 测试，都可以使用 Jest 测试异步操作。通过编写 mock 函数，我们可以确保我们的测试可重复且不受外部因素的干扰。

完整代码

以下是这个示例应用程序的完整代码。

-- ------------------
------ ----- ---- --------
------ ----------- ---- ---------------------

------ ------- ---------- -
  ----- ---- - --- -------------------
  ----- ----- - --------

  ------------------------------------------------------- -- -
    ----- - --------- -------- - - ------------------------

    -- --------- --- ------ -- -------- --- ----------- -
      ------ -
        ----
        -
          -----
        -
      --
    - ---- -
      ------ -
        ----
        -
          ------ -------- ------------
        -
      --
    -
  ---

  ------ -----
-

-- ---------------
------ ----- ---- --------

------ ----- ------------- - ----------------
------ ----- ------------- - ----------------
------ ----- ------------- - ----------------

----- ------ - ------------------------------

------ -------- -------------- -
  ------ -
    ----- -------------
  --
-

------ -------- ------------------- -
  ------ -
    ----- --------------
    -----
  --
-

------ -------- ------------------- -
  ------ -
    ----- --------------
    -----
  --
-

------ -------- --------------- --------- -
  ------ -------- -- -
    -------------------------

    ------ ------------------ - --------- -------- --------
      -------- -- -
        --------------------------------------------
      --
      ----- -- -
        --------------------------------------------------
      -
    --
  --
-

-- ----------------------
------ --------- ---- ---------------------
------ - -------------- -------------- -------------- ----- - ---- ------------------

----- ---- - ------------

----------- ------ --------- -- -- -
  ----- -------- - -------
  ----- -------- - -----------
  ----- -------- - ----------

  ------------------------------------------ - --------- -------- ------------- -
    ------ -------
  ---

  ------ --------------- --------------------------- -- -
    ------------------------------------------- ----- ------------- ---
    ------------------------------------------- ----- -------------- ------ ------- ---
  ---
---

以上代码使用了 redux, redux-thunk 和 Jest，它还有一个简单的 mock API 功能，能够完美地测试 Redux 中的异步 action。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/670a01b4d91dce0dc87db5e1

阅读全文

猜你喜欢

  • 基于 Web Components 标准的集成

    Web Components 是一种用来创建可重用组件的 Web 平台技术。它由四个标准组成： Custom Elements（自定义元素）、 Shadow DOM（影子 DOM）、 HTML Tem...

    8 天前
  • 用 Chai 和 Mocha 测试 Express 应用程序

    用 Chai 和 Mocha 测试 Express 应用程序 前言 在开发 Web 应用的过程中，经常需要测试我们的代码，以保证它们能够按照预期的方式工作。本文将介绍使用 Chai 和 Mocha 两...

    8 天前
  • 利用 ES8 中的 Object.values() 和 Object.entries() 简化前端代码

    ES8（ECMAScript 2017）带来了很多新的特性，其中包含了两个新的 Object 方法：Object.values() 和 Object.entries()。

    8 天前
  • 如何在 Enzyme 测试中模拟 React Native 的摄像机？

    前言 Enzyme 是 React 生态系统中常用的测试工具之一，通常用于测试 React 组件的行为和外观。但是，当涉及到 React Native 和移动端应用开发时，如何在 Enzyme 中测试...

    8 天前
  • PM2如何监控多个Node.js应用

    介绍 PM2是一个基于Node.js开发的进程管理器。它可以帮助您管理应用程序，确保它们在服务器上保持活动状态，并自动重启它们以避免进程崩溃造成的问题。本文将介绍如何使用PM2监控多个Node.js应...

    8 天前
  • PWA 应用中的多语言处理方案

    由于互联网的快速发展，我们的用户群体已经越来越广泛。为了满足更多用户对多语言的要求，许多网站都必须提供多语言支持。那么在 PWA 应用中，该如何实现多语言处理呢？ 困境 在传统网站上，多语言处理是由后...

    8 天前
  • 解决响应式设计中的文字溢出问题

    在当前移动设备流行的时代，响应式设计已经变得非常重要。然而，在实现响应式设计时，我们有时会遇到文字溢出的问题。 文字溢出可能会导致用户难以阅读内容，降低网站的可用性和用户体验。

    8 天前
  • 如何使用 Next.js 部署至 Kubernetes 集群

    介绍 Kubernetes 是一个流行的容器编排平台，可以用于快速构建、部署和管理应用。Next.js 是一个流行的网站框架，可用于创建静态生成的 React 应用程序。

    8 天前
  • 使用 React 和 GraphQL 构建高效的 API

    前言 现代 Web 应用程序需要大量的 API 来支持其功能。 构建 API 的传统方法是使用基于 REST 的框架，如 Django，Rails 和 Flask。

    8 天前
  • Material Design 中实现全屏幕背景的方式

    在 Material Design 的设计中，全屏背景是非常常见的设计元素，可用于增加页面的视觉吸引力。如果您正在开发一个 Material Design 风格的网站或应用，您可能需要了解如何实现全屏...

    8 天前
  • Angular 中 leaflet.js 的集成及使用方法

    简介 Leaflet.js 是一个用于地图渲染的 JavaScript 库，它允许开发者在网站中嵌入地图，支持各种地图相关操作，如缩放、标记、路径绘制等。Angular 是一种前端框架，用于构建单页应...

    8 天前
  • 如何保护 RESTful API 的安全防护

    随着互联网技术的快速发展，基于 RESTful API 的应用越来越普及，我们需要保护 RESTful API 的安全，以防止黑客攻击和数据泄漏。本文将深入讨论如何保护 RESTful API 的安全...

    8 天前
  • Docker Swarm 揭秘：构建高可用、高可扩展的容器化集群

    随着现代化应用程序越来越复杂，以及云计算和容器技术的普及，一个高可用、高可扩展的容器化集群已经变得越来越重要。Docker Swarm 是 Docker 官方出品的容器编排工具之一，它为容器集群提供了...

    8 天前
  • Cypress 自动化测试中如何进行文件上传测试

    引言 作为一名前端工程师，我们通常需要进行自动化测试，以保证代码质量和项目可靠性。在自动化测试中，文件上传测试是非常常见的场景。但是，相比于其他自动化测试，文件上传测试的实现方式有些不同，需要使用特殊...

    8 天前
  • ES12 中处理二进制数据

    ES12 最近发布了一些新的特性，其中包括对处理二进制数据的支持。在本文中，我们将讨论这些改进及其用例，并提供一些示例代码来帮助您入门。 ArrayBuffer ArrayBuffer 是一种 Jav...

    8 天前
  • 在分布式系统中优化数据分片和数据分布

    在分布式系统中，数据的分片和分布对于系统的性能和扩展性具有至关重要的作用。在本文中，我们将深入探讨如何优化数据的分片和分布，以提高系统的性能和可扩展性。 数据分片 数据分片是将大型数据集合分解为较小的...

    8 天前
  • 如何在 GraphQL 中使用异步查询？

    GraphQL 是一种用于 API 构建的查询语言和运行时，它提供了一种更加高效、强大和灵活的方式来获取和操作数据。在 GraphQL 中，我们通常使用查询语句来请求需要的数据，然后服务器会返回一个由...

    8 天前
  • 使用 Mocha 和 Chai 测试 Redis 数据库

    引言 Redis 是一款经典的 NoSQL 数据库，它的轻量级和高性能使其成为开发者、架构师和数据科学家的趋之若鹜的选择。然而，当你开始构建你的应用程序并使用 Redis 作为数据存储时，你需要确保你...

    8 天前
  • 如何使用 Chai 和 Mocha 测试 JavaScript 的 Promise

    JavaScript 是一种非常流行的脚本语言，它的异步编程神器 Promise 被广泛应用于前端开发中。在编写异步代码时，如何确保代码的正确性和可靠性是一个很重要的问题。

    8 天前
  • 使用 ES8 的 async/await 处理异步操作

    在前端开发中，经常需要处理异步操作，例如从服务器获取数据或调用一些浏览器 API。在 JavaScript 中，通常会使用回调函数或 Promise 来解决这个问题。

    8 天前

相关推荐

    暂无文章