npm 包 timemachine 使用教程

作为前端开发人员,难免会遇到一些需要测试时间相关函数的场景,比如测试一个月份加减的函数,或者一个需要指定特定日期的场景,这个时候就需要我们假装时间前进或回退,而这个过程会非常繁琐和不可靠。今天我们将介绍 npm 包 timemachine,它可以让我们轻松地指定时间,并且方便地进行测试。

timemachine 的安装

timemachine 是 npm 包,因此我们需要使用 npm 或者 yarn 进行安装。

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

或者

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

timemachine 的使用

timemachine 模块提供了一个全局方法,可以用来假设当前时间或日期。我们可以使用它来测试一些时间相关函数的返回值。

使用方法:

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

timemachine 提供了两种假设模式:时间模拟模式时间播放模式

时间模拟模式

在此模式下,我们可以假设当前的日期和时间,以便进行测试,类似于更改了系统的日期与时间。

我们可以先假设时间,并调用我们需要测试的函数,并感受时间前进的变化。在此之后,我们需要还原时间,以避免后续的测试出现干扰。

使用方法:

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

我们还可以使用更方便的方式在指定的假设时间段内测试单独的函数:

--------------------
  ----------- ----------- ----------
  ----- ----
--
-- ----- ---------- --------
-- --------------
---
-------------
-------------------
  • dateString: 假设的日期和时间字符串,可以是任何合法的日期字符串。
  • tick: 是否为时间齿轮模式,当设置为 true 时,时间会按照每个 cypress 触发器的速率前进。这通常用于 E2E 测试。

时间播放模式

在此模式下,我们可以模拟时间的流逝,并生成类似于时钟的时间点,以便进行动画测试。

使用方法:

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

----------------------- -- -
  -----------------
  -- -------------
-- -----
  • dateString: 假设的日期和时间字符串,可以是任何合法的日期字符串。
  • tick: 是否为时间齿轮模式,当设置为 true 时,时间会按照每个 cypress 触发器的速率前进。这通常用于 E2E 测试。
  • play(callback, interval): 开始 time 播放指定的时间点。每 2000ms 缩短一次时间流逝,函数 callback 会传递目前是什么时间。

示例代码

下面是一个简单的例子,演示了如何使用 timemachine 玩耍时间。我们可以调用 timemachine.config 方法,并指定一个日期字符串。这样,我们就可以假设当前时间到任何我们想要的点。其他任何关于时间的操作都将返回在我们指定的时间点结果。

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

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

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

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

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

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

进一步思考

使用 timemachine 相对于手动修改时间的优势在于简化了测试复杂性。另外,它还将允许我们进行非常复杂的测试,甚至稍有违反逻辑的功能也可以测试。无论您是在准备 API 的类似测试还是其他测试,我都推荐使用 timemachine。

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


猜你喜欢

  • npm 包 @shopify/stylelint-plugin 使用教程

    在前端开发中,代码规范的作用越来越被重视。我们可以使用一些工具来帮助我们检测代码规范的问题,这里我们介绍一个工具,即 @shopify/stylelint-plugin。

    4 年前
  • npm 包 @shopify/translation-platform-utilities 使用教程

    背景介绍 在前端开发中多语言处理是很常见的任务,虽然有些人依赖于后端返回不同语言的 html 页面或通过字段从后端传递数据来处理不同语言,但这种方法存在很大的局限性,如果所有的多语言处理都依赖后端的话...

    4 年前
  • npm包@shopify/typescript-configs使用教程

    前言 TypeScript作为现代前端项目开发不可或缺的一部分,已经逐渐成为了前端开发者们的首选语言。而在使用TypeScript时,对于代码规范的统一和管理也是非常重要的一部分。

    4 年前
  • npm 包 @shopify/integrity-sha-utils 使用教程

    在前端开发中,数据的安全性是至关重要的。而哈希摘要是一种能够保障数据完整性和安全性的方法。npm 包 @shopify/integrity-sha-utils 就是一个很好的工具,它提供了 SHA-2...

    4 年前
  • npm 包 @shopify/webpack-asset-metadata-plugin 使用教程

    前言 在前端开发中,使用 webpack 进行代码打包是必不可少的一个环节。而 @shopify/webpack-asset-metadata-plugin 这个 npm 包,则提供了一种快速、简便地...

    4 年前
  • npm 包 @shopify/webpack-asset-sri-hash-verification-plugin 使用教程

    随着前端应用的复杂度不断提高,我们需要一些更加安全和可靠的方式来保护我们的应用。SRI(Subresource Integrity)就是这样一种方式。SRI 允许我们使用一个哈希值来保证外部资源的完整...

    4 年前
  • npm包 @shopify/webpack-ignore-typescript-export-warnings-plugin 使用教程

    在前端开发过程中,使用TypeScript进行开发时,有时可能会出现TypeScript导出类型不一致的警告。这些警告可能会对我们的开发造成影响,因此我们需要一种方法来忽略这些警告。

    4 年前
  • npm 包 @shopify/webpack-no-react-jsx-loader 使用教程

    在前端开发中,许多项目都使用了 React 框架来构建 UI 界面。但是,有时候我们并不需要使用 React 的全部功能,只需要使用 React 提供的 virtual DOM 和组件化能力等部分功能...

    4 年前
  • npm 包 @shopify/webpack-no-typescript-ts-loader 使用教程

    在前端开发中,Webpack 是一个非常重要的工具。而 TypeScript 的流行更是让很多人选择使用这种静态类型的 JavaScript 趋势。尽管如此,仍有很多人喜欢仅使用 JavaScript...

    4 年前
  • npm 包 @shopify/webpack-persisted-graphql-plugin 使用教程

    概述 @shopify/webpack-persisted-graphql-plugin 是一个 Webpack 插件,它可以帮助前端开发人员在开发过程中使用 GraphQL 进行 API 数据查询,...

    4 年前
  • npm 包 @shopify/webpack-runtime-sri-verification-plugin 使用教程

    简介 在前端开发中,我们经常需要引用第三方的 JavaScript 或 CSS 文件,以实现一些复杂功能。然而,有些恶意攻击者可能会利用这些文件来注入恶意代码,从而危害到用户的浏览器安全。

    4 年前
  • npm 包 @shopify/webpack-section-focus-loader 使用教程

    前言 前端工程化的发展让我们的项目多了很多自动化的工具,其中 webpack 作为最为流行的打包工具之一,被众多前端开发者所认可。而 @shopify/webpack-section-focus-lo...

    4 年前
  • npm 包 graphql-config-utilities 使用教程

    GraphQL 是一种强类型的查询语言,它允许前端和后端通过一个定义好的 schema 进行沟通。随着 GraphQL 在前端开发中的应用越来越广泛,使用它管理大型项目的配置成了一件非常麻烦的事情。

    4 年前
  • npm 包 graphql-mini-transforms 使用教程

    前言 GraphQL 是一种用于 API 的查询语言,它可以高效地获取所需的数据,并且具有描述性强、类型安全、易于缓存等优点,因此在前端领域有着广泛的应用。然而,GraphQL 的语法相对于 REST...

    4 年前
  • npm 包 graphql-typed 使用教程

    GraphQL 是一种新兴的查询语言,用于 API 的开发,它使得数据的获取更加准确,可控,可扩展。如果你想在前端领域使用 GraphQL,那么 npm 包 graphql-typed 就是你需要掌握...

    4 年前
  • npm 包 graphql-typescript-definitions 使用教程

    GraphQL 是一种优秀的查询语言,在前端开发中受到了广泛的应用。使用 TypeScript 可以让代码更加的规范和易于维护。在这篇文章中,我们将介绍如何使用 npm 包 graphql-types...

    4 年前
  • npm 包 graphql-tool-utilities 使用教程

    什么是 graphql-tool-utilities? graphql-tool-utilities 是一个 npm 包,可以帮助你更好地使用 graphql 工具集。

    4 年前
  • npm 包 graphql-validate-fixtures 使用教程

    GraphQL 在前端开发领域中越来越受欢迎。在实际开发中,我们通常使用一些工具来验证我们的 GraphQL 查询和变异是正确的。graphql-validate-fixtures 是一款优秀的 np...

    4 年前
  • npm 包 @shopify/sewing-kit 使用教程

    前言 在前端领域,使用工具库和框架可以提高开发效率,其中前端构建工具越来越受欢迎。而 @shopify/sewing-kit 是一个提供完整且可定制化的构建工具的 npm 包,适用于 React/We...

    4 年前
  • npm 包 @rowanmanning/make 使用教程

    简介 @rowanmanning/make 是一个基于 JavaScript 和 Node.js 的轻量级构建工具,它提供了一种简洁、强大且易于定制的构建系统,并且是完全基于任务流的。

    4 年前

相关推荐

    暂无文章