Jest 测试时如何 mock setTimeout/setInterval?

在前端开发中,我们经常需要使用 setTimeoutsetInterval 待定时器来执行一些异步操作,但当进行单元测试时, 这样的异步操作会导致测试的不确定性,因为测试的结果取决于待定时器何时被执行,而测试端无法控制待定时器的执行时间。 Jest提供了一些API来帮助我们在测试时模拟这些待定时器。

Jest 提供的 mock 定时器 API

Jest 提供了两个事件轮询的 mock API:jest.useFakeTimers()jest.runAllTimers()jest.useFakeTimers() 主要用于直接替换 setInterval、setTimeout 和 clearTimeout / clearInterval,使得在我们不必等待实际速度而直接运行测试的情况下,重建我们的循环事件和时间逻辑。可以调用 jest.runAllTimers() 来强制执行所有待定的定时器或者 jest.runOnlyPendingTimers() 来只执行待执行的定时器。

当使用 jest.useFakeTimers()后,测试时周期事件轮询的定时器不再是真正的定时器,而是被完全控制的事件轮询模拟器。那么如何模拟setTimeoutsetInterval呢?

模拟 setTimeout

我们可以使用 jest.runAllTimers() 来模拟 setTimeout。它会立即将所有待执行的定时器达成的效果都执行,因此我们可以通过向 setTimeout 传递一个函数作为回调,然后手动的调用 jest.runAllTimers() 来立即执行定时器中的所有回调函数。

比如设在测试代码中,有一个函数 delayAndReturn ,它将在两秒后返回一个数字 1。函数实现如下:

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

在测试代码中,我们可以使用以下方式来测试该函数:

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

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

模拟 setInterval

我们也可以使用 jest.runOnlyPendingTimers() 命令来模拟 setInterval。它会只执行当前待执行的定时器,而不是所有。

比如设在测试代码中,有一个函数 logMessage ,它将每秒 log 一条 message。函数实现如下:

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

在测试代码中,我们可以使用以下方式来测试该函数:

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

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

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

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

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

总结

Jest 提供了事件轮询 mock API 来模拟待定时器,帮助我们在使用待定时器时进行单元测试。在测试中,我们使用jest.useFakeTimers来替换setTimeoutsetInterval ,使用jest.runAllTimers强制执行所有待执行的定时器,以执行回调函数,使用 jest.runOnlyPendingTimers()来强制执行所有待执行的定时器,以确保函数能够按预期工作。加入这些应该让你能够更方便地测试异步代码,并且保证它们能够在团队内部和客户内部进行工作。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/647ea88448841e9894e5c2f9


猜你喜欢

  • 如何在 Hapi 应用程序中集成 Passport.js

    在现代 web 应用程序中,用户认证和授权是一个必不可少的部分。Passport.js 是一个强大的身份认证库,支持多种第三方身份验证策略,并且容易集成到中间件框架中。

    1 年前
  • 使用 ES9 标准方法重构轮询

    在前端开发中,轮询技术是一个非常常见而又有实际意义的技术。轮询,是指定时查询服务器或者去检查某个任务是否完成的技术。尤其在某些需要实时数据的场景,轮询可以有效地提高用户体验。

    1 年前
  • PWA 实践:添加主题功能

    什么是 PWA? PWA 全称 Progressive Web App,是一种结合了传统网页和原生移动应用优点的应用程序。PWA 应用可以像普通网页一样通过浏览器访问,但同时又具备了类似原生应用的离线...

    1 年前
  • 如何正确地使用 Promise 的 then

    在前端开发中,异步操作是必不可少的,而 Promise 就是其中一种非常实用的异步编程的方式。Promise 对象代表一个异步操作的最终完成(或失败)及其结果值。通过 Promise,我们可以更加优雅...

    1 年前
  • 使用 TypeScript 如何规范项目中的命名和注释?

    作为一种静态类型语言,TypeScript 在前端开发领域已经得到广泛的应用。在编写代码时,规范的命名和注释可以让代码更易于维护和迭代。本文将介绍如何使用 TypeScript 来规范项目中的命名和注...

    1 年前
  • Flexbox 如何实现基础网格系统

    随着响应式设计和移动设备的流行,灵活的网格系统变得越来越流行,因为它们可以适应不同的屏幕尺寸和方向。Flexbox 是一个强大的 CSS 布局工具,可以实现多个方向和尺寸的元素布局。

    1 年前
  • 解决 Docker 容器内无法使用定时任务的问题

    背景 在前端工程中,有时需要使用定时任务来自动化地执行某些操作,如生成静态资源、启动服务、同步数据等。但在 Docker 容器内,由于一些限制,定时任务无法正常运行,给开发带来了很多不便。

    1 年前
  • Webpack 的 Loader 开发入门

    概述 在现代前端开发中,Webpack 已经成为了一种不可或缺的构建工具。而 Loader 则是 Webpack 中非常重要的一个概念,用于对输入的模块进行转换。我们可以将一些非 JavaScript...

    1 年前
  • 无障碍 Web 网站最新设计技术分享

    在互联网日益普及的今天,无障碍 Web 网站已经成为了重要的设计标准。无障碍 Web 网站能够为所有人提供良好的浏览体验,包括那些视觉、运动、听觉或认知方面存在障碍的人群。

    1 年前
  • ES7 中的 Reflect 和 Reflect Decorator

    ES7 中的 Reflect 对象提供了一组用于操作 JavaScript 对象的原始方法,这些方法的行为与语言内部提供的方法类似,但 Reflect 方法是可拦截的,这使得我们可以对它们进行自定义处...

    1 年前
  • 《Camper Book》学习 Node.js 上手 ES10 新特性

    在前端领域,Node.js 是一个备受关注的技术,它可以让开发者使用 JavaScript 在服务端构建高性能的 Web 应用程序。近些年来,Node.js 也不断更新迭代,并加入了越来越多的新特性。

    1 年前
  • 如何在 Chai.js 中使用 sinon 来模拟方法

    在前端开发中,测试是一个非常重要的环节,它能够保证代码的质量,减少出错的概率。而在测试中,模拟方法是一个非常实用的技术,它能够有效地降低测试的复杂度。本文将介绍如何在 Chai.js 中使用 sino...

    1 年前
  • 使用 Fastify 框架实现大规模应用程序

    在前端领域,使用框架可以大大提高开发效率和代码质量。Fastify 是一个快速、低开销的 Web 框架,特别适合于构建高性能、大规模的应用程序。它的优势在于提供了插件式的体系结构,可以根据需求动态加载...

    1 年前
  • ES6 中的函数 rest 参数的使用方法及其实现

    在 JavaScript 语言中,函数是一等公民,函数参数也是函数设计中一个重要的方面。在 ES6 版本中,引入了一个新的函数参数写法——rest 参数。它可以让你轻松地处理一个可变长度的参数列表。

    1 年前
  • Sequelize 如何实现路由控制?

    在前端开发中,路由控制是非常重要的一个概念。Sequelize 是一个强大的 ORM 库,可以方便地实现路由控制。本文将深入介绍 Sequelize 中如何实现路由控制,包括数据模型定义、路由配置、参...

    1 年前
  • 如何在 Enzyme 中测试 React 组件中的路由

    随着 React 越来越流行,大量的前端开发者开始使用它来开发单页面应用程序。在多数情况下,这意味着您需要在 React 组件中实现路由,以导航页面并组织应用程序的 UI 等元素。

    1 年前
  • Cypress 录制与编写测试用例的最佳实践总结

    Cypress 录制与编写测试用例的最佳实践总结 Cypress 是一个基于 JavaScript 的前端自动化测试框架,它具有简单易用、快速稳定等特点。在使用 Cypress 进行自动化测试时,合理...

    1 年前
  • Koa2 中如何使用 koa-bodyparser 进行 POST 请求解析和处理

    在 web 开发中,我们经常需要处理 POST 请求中包含的请求体数据。在 Koa2 框架中,我们可以使用 koa-bodyparser 中间件来帮助我们解析 POST 请求的请求体数据。

    1 年前
  • Sass 应用:grid 与栅格化布局

    前端开发中,布局是相当重要的一环,而 grid 布局又是一种非常常见的布局方式。相信大多数前端开发者都已经使用过或者听说过 CSS3 的 grid 属性,但是,我们在使用 CSS3 的 grid 属性...

    1 年前
  • PM2 进程 CPU 占用过高问题解决方案

    问题背景 在进行前端项目开发的过程中,我们常常需要使用到 PM2 进行进程管理和部署。然而,在实际使用中,我们可能会遇到 PM2 进程 CPU 占用过高的问题,这会导致系统性能下降,严重时甚至会导致服...

    1 年前

相关推荐

    暂无文章