npm 包 nonly 使用教程

在前端开发中,我们经常需要对某些功能模块进行单元测试,而单元测试需要模拟某些环境变量或操作,这时候就需要使用一些 mock 工具库了。今天我们介绍一个非常实用的 npm 包 nonly。

nonly 是什么?

nonly 是一款轻量级 mock、spy 库,可以像 sinon 一样轻松地定义和测试依赖项的行为,并在测试时控制每个依赖项的行为。

安装

在使用 nonly 之前,我们需要先将其安装到项目中,可以使用 npm 命令进行安装:

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

快速示例

下面我们通过一个快速示例来展示 nonly 的基本使用方法。

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

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

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

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

该示例中,我们定义了一个 fetchData 函数,其使用了 axios 来请求数据。在测试时,我们使用 nonly 来进行 mock,模拟 axios 的 get 方法,并返回指定的数据。最后再调用 fetchData 并断言返回的数据是否与预期一致。

API

nonly 提供的 API 有以下几种:

mock(target, methodName)

用于 mock 指定对象的 methodName 方法,返回一个 Mock 对象。

示例:

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

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

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

spy(target, methodName)

用于 spy 某个对象的指定方法,并返回一个 Spy 对象。

示例:

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

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

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

Mock

Mock 对象提供了以下方法和属性:

returns(value)

用于设置该 mock 操作的返回值,返回 Mock 对象实例本身。

示例:

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

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

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

throws(error)

用于指定该 mock 操作抛出的错误,返回 Mock 对象实例本身。

示例:

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

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

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

resolves(value)

用于将该 mock 操作返回 Promise 并指定 Promise 解析值,返回 Mock 对象实例本身。

示例:

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

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

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

rejects(error)

用于将该 mock 操作返回 Promise 并指定 Promise 拒绝错误,返回 Mock 对象实例本身。

示例:

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

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

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

called

用于判断该 mock 操作是否被调用,返回 Boolean 类型值。

args

用于获取该 mock 操作被调用时的参数列表,返回 Array 类型值。

Spy

Spy 对象提供了以下方法和属性:

called

用于判断该 spy 操作是否被调用,返回 Boolean 类型值。

args

用于获取该 spy 操作被调用时的参数列表,返回 Array 类型值。

总结

nonly 是一款非常好用的 mock 工具库,其 API 语法简洁优雅,非常容易上手。在前端开发中,使用 nonly 可以帮助我们更快更准确地进行单元测试。希望该文章可以对读者有所启发和帮助。

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


猜你喜欢

  • npm 包 vue-cropper-cailw 使用教程

    介绍 vue-cropper-cailw 是一个基于 Vue.js 和 cropperjs 的图像裁剪组件。它可以帮助开发者快速实现图像裁剪功能,支持缩放、旋转、裁剪以及输出图片等多种操作。

    3 年前
  • npm 包 xy-imagemin-gifsicle 使用教程

    在前端开发中,图片优化是一个非常重要的问题。我们需要通过压缩、裁剪、转换等方式来减小图片的大小,从而加快页面加载速度,提高用户体验。而 npm 包 xy-imagemin-gifsicle 就是一款能...

    3 年前
  • npm 包 xy-gifsicle 使用教程

    前言 很多前端开发者都会在项目中用到 GIF 图片,但是 GIF 格式的图片往往比较占用带宽。而 xy-gifsicle 这个 npm 包就是为了解决这个问题而生的。

    3 年前
  • npm 包 cordova-gizwits-download-media 使用教程

    介绍 cordova-gizwits-download-media 是一个用于在 Cordova 应用中下载媒体文件的 npm 包。它可以帮助开发者实现在应用内部下载图片、音频、视频等媒体文件的功能,...

    3 年前
  • 使用 vuemojify 包来制作表情包

    在前端开发中,要制作表情包是非常常见的需求。如果需要在 Vue 中使用表情包,可以使用 npm 包 vuemojify。本文将介绍 vuemojify 的使用方法和示例代码。

    3 年前
  • npm 包 zdsh-loader 使用教程

    在前端开发过程中,我们会经常使用 webpack 进行代码打包和构建。在此过程中,我们可能需要加载一些非标准的资源文件,如 .scss、.vue、.tsx 等,此时就可以使用 zdsh-loader ...

    3 年前
  • NPM包EverExport使用教程

    简介 EverExport是一个高效、方便的文件导出工具,可以将前端项目中的JS、CSS、HTML等文件打包导出。它不仅支持常见的“打包任务”,还支持自定义打包规则,可以让您更加灵活地进行文件导出操作...

    3 年前
  • npm 包 fnif 使用教程

    介绍 fnif 是一个适用于前端 JavaScript 开发的 npm 包,用于根据条件返回不同的结果。fnif 可以接收多个条件,可以使用函数或者值来判断条件,返回匹配条件的结果。

    3 年前
  • npm 包 alseo 使用教程

    1. 什么是 alseo alseo 是一个用于前端页面性能优化的 npm 包。它提供了一系列的功能,帮助我们优化页面的加载速度和交互体验。 主要功能包括: 推迟加载非必要脚本 压缩和合并 CSS ...

    3 年前
  • npm 包 docka 使用教程

    简介 docka 是一款基于 Docker 的本地开发环境管理工具,可以帮助我们轻松地搭建和管理多个本地开发环境。 它提供了一个简单的命令行接口,方便我们在本地快速创建、启动、停止和删除开发环境,也可...

    3 年前
  • npm 包 detachjs 使用教程

    前言 detachjs 是一个轻量级的 JavaScript 库,用于帮助开发者在浏览器中创建可拖拽、可调整大小和可分离的面板。它具有易于使用、高度自定义和兼容性良好等优点,因此在前端开发过程中非常实...

    3 年前
  • npm 包 react-native-toast-test3 使用教程

    简介 react-native-toast-test3 是一款为 React Native 应用提供简单易用的 Toast 提示框的 npm 包。利用该包,开发者可以在应用中展示各种信息提示,从而提高...

    3 年前
  • NPM 包 Caroufredsel 使用教程

    Caroufredsel 是一个轻量级的 jQuery 插件,可以帮助我们快速地创建滑动和旋转的轮播。“Caroufredsel” 由 Carousel(旋转木马)和 Fred(一个人名)组成。

    3 年前
  • npm 包 harbour-client 使用教程

    前言 在前端开发中,我们常常需要与后端进行交互,而在与后端的交互中,HTTP 是一种常见的协议。然而,使用原生的 HTTP 处理这些请求十分繁琐,需要手动构建请求、处理响应等。

    3 年前
  • npm 包 harbour-server 使用教程

    前言 在前端开发中,我们经常会需要模拟一个后台服务,以便测试我们的前端页面。但是,搭建一个后台服务是一件比较麻烦的事情。这时,npm 包 harbour-server 就派上了用场。

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

    简介 现在,所有人都知道搜索引擎的重要性。然而,只有很少的人知道如何显示其整体效果。在这里,我们将介绍一个 npm 包——js-seopreview。这个 npm 包使您可以在搜索引擎结果页面中轻松地...

    3 年前
  • npm 包 meepo-footer 使用教程

    前言 在前端开发中,我们经常会使用一些第三方的开源工具或是库,npm 是 Node.js 的包管理器,可以方便地管理和使用这些工具和库。在这篇文章中,我将介绍如何使用一个名为 meepo-footer...

    3 年前
  • npm 包 webassembly-floating-point-hex-parser 使用教程

    简介 webassembly-floating-point-hex-parser 是一个用于解析十六进制浮点数的 JavaScript 库,可以在前端开发中用来对浮点数进行转换和处理。

    3 年前
  • npm 包 css-elevation 使用教程

    在前端开发中,有许多常用的 UI 组件需要使用阴影效果来增强视觉层次,如卡片、模态框等等。css-elevation 是一个可以方便地生成阴影效果的 npm 包,它可以让我们省去手写繁琐的 CSS 样...

    3 年前
  • npm 包 `ember-cli-global-eval-patch` 使用教程

    在前端开发中,有时需要使用eval函数来动态执行代码。但是,由于eval的执行环境会影响到全局作用域,会带来一些潜在的安全隐患。因此,出现了一些用于修补这一缺陷的 npm 包,例如 ember-cli...

    3 年前

相关推荐

    暂无文章