npm包snapsjot使用教程

在前端开发中,以 JavaScript 为主导的软件生态系统中,npm 是一个相当重要的工具。它是 Node.js 的包管理器,允许您从 npm 仓库中安装和管理软件包。其中一个经常使用的工具是 Snapsjot。

什么是 Snapsjot

Snapsjot是npm的另一个软件包,它允许您轻松比较 JavaScript 项目中的输出。这是一个非常有用的工具,因为它可以让您快速查看有所更改是否会破坏当前项目。

安装 Snapsjot

要安装 Snapsjot,请在控制台中运行以下命令:

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

值得注意的是,Snapsjot应该作为开发依赖项安装( --save-dev)。

如何使用 Snapsjot

让我们假设您有一个名为 add.js 的文件,其中包含以下内容:

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

接下来,让我们创建一个测试文件 add.test.js,其中包含以下代码:

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

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

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

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

以上代码将 add.js 文件中的 add 函数作为模块导入,并测试函数能否正常执行。

让我们运行 npm test。由于此时我们没有添加 Snapsjot 的配置,命令会输出以下结果:

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

我们现在需要在项目根目录中创建一个名为 __snapshots__ 的文件夹。

现在,我们在测试文件 add.test.js 中引入 Snapsjot:

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

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

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

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

此代码将在每次运行测试时自动创建一个快照文件。快照文件将保存在 __snapshots__/ 文件夹中。输出应如下所示:

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

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

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

  -

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

您可以在控制台中看到一个叫做 __snapshots__/add.test.js.snap 的文件,它包含测试结果。

如果我们(故意或无意间)更改了 add.js 中的函数,则在下次测试运行时,我们会收到类似下面的错误:

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

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

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

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

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

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

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

这表明一个测试用例已失败,因为快照与修改后的输出不一致。新行 exports [ 'adds 1 + 2 to equal 3 1' ] = '4'; 显示了快照的实际内容。

运行 jest -unpm test -- -u 可以更新快照。

总结

在本文中,我们简要介绍了 Snapsjot 的工作原理,并提供了一个具体的案例来演示如何使用它。尝试在自己的项目中集成 Snapsjot,您可能会发现它是一个非常有用的工具,可以帮助您减少破坏已有代码的风险,提高代码质量和可靠性。

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


猜你喜欢

  • npm 包 pocket-sync 使用教程

    简介 Pocket-Sync 是一个 npm 包,用于在浏览器中进行数据持久化存储。它可以帮助你更高效地管理你的本地存储数据,并且支持多种数据格式。本篇文章将详细介绍 Pocket-Sync 的使用方...

    3 年前
  • npm 包 popbox 使用教程

    在前端开发中,我们常常需要一些弹出框来实现交互效果。而 popbox 就是一款优秀的 npm 包,它提供了快速、简单、灵活地创建弹出框的功能。本文将详细介绍 popbox 的使用教程,包括安装、配置、...

    3 年前
  • npm包react-sliding-sidemenu使用教程

    在前端的开发工作中,我们常常需要使用到一些方便快捷的组件库以提高开发效率。而在组件库中,我们相信有不少人用过react-sliding-sidemenu这个npm包。

    3 年前
  • npm 包 xont-ventura-classification-selector 使用教程

    介绍 xont-ventura-classification-selector 是一个前端开发工具,用于创建一个分类选择器,在处理商品分类等内容时非常有用。它使用 React 和 TypeScript...

    3 年前
  • 使用 npm 包 @write-for-christ/fs-array:一款强大的处理文件数组的工具

    如果你是一位前端开发者,你一定知道在前端开发中,文件操作非常常见。你可能使用了很多的库来处理文件数组中的某些操作。但是,很多时候这些库的操作过于繁琐,需要大量的代码才能完成一些简单的文件操作。

    3 年前
  • npm 包 google-trans-api-cn 使用教程

    简介 google-trans-api-cn 是一个基于 Node.js 的 npm 包,它使用 Google Translate API 来实现文本的自动翻译功能。

    3 年前
  • npm 包 javascript-utility-fuction 使用教程

    JavaScript 是一种广泛使用的编程语言,前端开发中经常需要使用许多工具函数来提高代码的效率和可读性。javascript-utility-fuction 就是一个非常实用的 JavaScrip...

    3 年前
  • npm 包 react-native-signature-view 使用教程

    介绍 react-native-signature-view 是一款 React Native 的 npm 包,可以用于实现签名的功能。在移动应用领域,签名功能是非常重要且常见的一个功能,比如在电子合...

    3 年前
  • npm包:avet-styled-jsx使用教程

    前言 在现代网站开发中,CSS不仅仅是美化页面的手段,还是提升用户体验和网站性能的关键。然而,CSS的样式处理在开发过程中往往需要处理大量的代码,特别当适用的样式相当零散,文件结构相当复杂时,我们仅仅...

    3 年前
  • npm 包 descanso 使用教程

    在前端开发中,我们经常需要和后端进行交互,而 RESTful API 是现在比较流行的交互方式。为了方便地创建 RESTful API,我们可以使用 descanso 这个 npm 包。

    3 年前
  • npm 包 ngx-multi-utils 使用教程

    ngx-multi-utils 是一个用于 Angular 前端开发的 npm 包,其包含了一系列常用的工具函数和指令,以帮助开发者更方便地进行前端开发。在本文中,我们将详细介绍如何使用 ngx-mu...

    3 年前
  • npm 包 pw-node-plantuml 使用教程

    什么是 pw-node-plantuml? pw-node-plantuml 是一个基于 Node.js 的 npm 包,它是一个用于生成 UML 图的库。它可以将 UML 代码转换成 PNG、SVG...

    3 年前
  • npm 包 redux-whenever 使用教程

    随着前端应用的复杂度越来越高,状态管理也变得越来越重要。Redux 是一个很流行的状态管理库,它有着良好的架构和可拓展性,但是在某些情况下,使用 Redux 可能会引入一些不必要的复杂度。

    3 年前
  • npm 包 Vue-data-loading 使用教程

    在 Vue.js 开发中,我们经常需要对页面中的一些数据加载状态进行处理,通常情况下,我们会使用 loading 动画或者提示文字来进行表达。但是这些实现方式需要我们自己手写,而 Vue-data-l...

    3 年前
  • npm 包 vue-simple-popup 使用教程

    简介 vue-simple-popup 是一个轻量级的 Vue.js 弹出框组件,支持自定义样式和回调函数。使用 vue-simple-popup 可以快速实现各种弹窗组件,提高开发效率。

    3 年前
  • 使用 npm 包 wilster-doc 记录你的前端技术笔记

    wilster-doc 是一款先进的 npm 包,它可以帮助前端开发者记录和管理自己的技术笔记,并且支持多种文件格式,例如 Markdown 和 HTML。下面我们就来看一看怎样使用 wilster-...

    3 年前
  • npm 包 alehos 使用教程

    简介 alehos 是一个是一个基于 Node.js 的 Amazon Alexa 技能框架的 npm 包。使用该框架,您可以通过编写 JavaScript 代码快速创建 Alexa 技能,并将其部署...

    3 年前
  • npm 包 aor-language-catalan 使用教程

    在前端开发中,我们经常会使用各种开源工具来提高我们的开发效率和代码品质。npm 是一个非常流行的 JavaScript 包管理工具,可以帮助我们快速搜索、安装和升级依赖项。

    3 年前
  • npm 包 js-pattern-match 使用教程

    如果你写过一些复杂的 JavaScript 应用程序,你一定会发现在某些情况下使用条件语句和嵌套函数变得非常笨拙和难以管理。这种情况下使用模式匹配可以让你的代码更加清晰简洁,而 npm 包 js-pa...

    3 年前
  • npm 包 key-sort 使用教程

    前言 在 JavaScript 中,我们常常需要对对象进行排序。常见的排序方式有按照属性值升序、降序排列等。然而,如果在开发过程中需要对具有多个属性的对象进行排序,传统的排序方法就会变得十分复杂。

    3 年前

相关推荐

    暂无文章