Jest 使用手册:如何做单元测试?

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

在前端开发中,单元测试是非常重要的一环。它可以让我们更加自信地改进代码,减少错误和不必要的回归测试,甚至可以使我们更加愉快地编写代码。

在本文中,我们将讨论 Jest 单元测试库的使用,它是一个由 Facebook 开发的优秀测试库。我们将学习 Jest 的基础知识、如何安装和设置 Jest,以及如何编写和运行单元测试。

什么是 Jest?

Jest 是一个基于 Jasmine 的单元测试库,适用于 JavaScript 应用程序。它是一个开源的框架,由 Facebook 维护和发展。它通过提供一个简单易用的 API、快速且可靠地运行测试、断言错误的显示、快速运行测试以及对 ES6+ 模块、Babel、TypeScript、Webpack、Node.js 进行了广泛的支持,使测试易于编写和维护。

Jest 的特点包括:

  • 自动拦截,即不需要手动模拟任何模块。
  • 利用沙盒运行,通过运行测试来统计代码覆盖率。
  • 灵活的配置选项,使您能够为您的应用程序进行更细粒度的定制。

安装 Jest

在开始编写单元测试之前,我们需要先安装 Jest。安装 Jest 很简单,您可以使用 npm 或 yarn 来进行安装。

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

或者

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

安装完成后,您可以在项目的 package.json 文件中找到 Jest。

编写单元测试

现在我们已经安装了 Jest,现在就可以开始编写单元测试了。

一个简单的测试示例可以像这样:

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

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

在上面的示例中,我们定义了一个简单的函数 sum,然后编写了一个名为“adds 1 + 2 to equal 3”的测试。在测试中,我们使用 expect 函数来断言 sum 函数的返回值是否等于 3。

运行单元测试可以使用以下命令:

--- ----

或者

---- ----

测试 Matchers

在上面的示例中,我们使用了 toBe Matcher。Matchers 是 Jest 的基本概念之一,它们是用来断言实际结果和预期结果之间的关系的函数。

下面是一些常用的 Matchers:

  • expect(a).toBe(b):a 和 b 是严格相等的。
  • expect(a).toEqual(b):a 和 b 的内容应该是相等的。
  • expect(a).toStrictEqual(b):a 和 b 的内容应该是严格相等的。
  • expect(a).toBeDefined():a 已定义。
  • expect(a).toBeUndefined():a 未定义。
  • expect(a).toBeNull():a 是 null。
  • expect(a).toBeTruthy():a 将强制转换为 true。
  • expect(a).toBeFalsy():a 将强制转换为 false。
  • expect(a).toContain(b):a 包含 b。
  • expect(a).toHaveLength(b):a 的长度为 b。
  • expect(a).toMatch(/regex/):a 匹配正则表达式。
  • expect(a).toThrow():a 抛出异常。

模拟函数

在测试中,有时候我们需要模拟函数并检查其行为是否符合预期。Jest 提供了一种称为 Jest.fn() 的函数,它允许我们轻松地模拟函数并进行判断。

以下是一个模拟函数的示例:

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

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

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

在上面的示例中,我们定义了一个空的模拟函数 myMock。然后我们调用它两次,并在每次调用后检查 mock.calls 属性中的参数是否正确。

异步测试

在异步测试中,我们需要等待异步操作完成,然后才能进行后续的测试。Jest 提供了多种处理异步操作的方法:

  • 回调函数
  • Promises
  • async/await

以下是使用 Promises 的异步测试示例:

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

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

在上面的示例中,我们定义了一个名为 fetchData 的 Promise,然后编写了一个名为“the data is peanut butter”的测试。在测试中,我们用 expect 函数断言 fetchData 返回值是否等于 'peanut butter'。由于 fetchData 函数是一个 Promise,因此我们需要使用 return 关键字对其进行处理。

版本控制

Jest 支持代码覆盖率,它可以帮助我们发现应用程序中的未使用代码和覆盖率不足的代码。要使用 Jest 的代码覆盖率功能,我们需要将 --coverage 标志添加到 Jest 命令行接口中。

例如:

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

Jest 将生成一个 coverage 文件夹,其中包含有关应用程序代码覆盖率的详细信息。

结论

单元测试是前端开发过程中不可或缺的一部分。Jest 是一个功能强大且易于使用的测试库,可以让我们轻松地编写和运行测试。在本文中,我们已经学习了 Jest 的基本原理、安装过程、单元测试、Matchers、模拟函数以及异步测试。现在,我们可以将这些知识应用到我们的项目中,并确保我们的代码质量和健壮性。

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


猜你喜欢

  • 使用 ES9 的 Regular Expression Lookbehind Assertions 来匹配相邻字符

    正则表达式是编写复杂字符串匹配模式的强大工具,而 ES9 中的 Regular Expression Lookbehind Assertions 则使得正则表达式匹配更加强大和灵活。

    15 天前
  • 如何利用 MongoDB 创建分布式 applications

    如何利用 MongoDB 创建分布式 applications 随着云计算和大数据技术的不断发展,分布式系统已经成为了越来越多企业构建复杂应用程序的首选技术。MongoDB 作为一个开源的 NoSQL...

    15 天前
  • 解决 Socket.io 断开连接后仍然可以发送数据的问题

    在使用 Socket.io 进行实时通信时,可能会遇到一种情况:当客户端与服务器建立连接后,客户端断开连接,但服务器仍然可以向客户端发送数据。这个问题可能会导致一些不必要的麻烦,例如服务器不知道客户端...

    15 天前
  • 如何快速升级 Next.js 版本

    随着前端技术的快速发展,Next.js 作为一款非常流行的 React 框架也在不断更新。如果你正在使用 Next.js,那么升级版本是非常重要的。本文将向您介绍如何快速升级 Next.js 版本,并...

    15 天前
  • Vue.js 中如何使用 computed 属性

    Vue.js 中如何使用 computed 属性 在 Vue.js 中,computed 属性是一种非常有用的特性,它可以让我们轻松地计算出某个属性的值,并将其绑定到模板中展示。

    15 天前
  • Angular 中使用 ngAfterViewInit 来操作视图组件

    Angular 中使用 ngAfterViewInit 来操作视图组件 在 Angular 应用中,除了组件初始化完成时,我们还需要在视图加载完成后才能够进行操作。

    15 天前
  • 使用 ES11 update() 方法更新对象属性时遇到的坑点

    前言 JavaScript 语言不断地更新和进化,为前端开发者提供了更好的开发工具和框架。ES11 的 update() 方法是一个值得关注的新特性,可以让前端开发者更优雅地更新对象属性。

    15 天前
  • CSS Grid 布局与响应式设计

    CSS Grid 是一种用于创建网格布局的 CSS 模块。它提供了一种创建复杂布局的方式,同时具备灵活性和响应式设计的能力。本文将介绍 CSS Grid 布局以及如何使用它进行响应式设计。

    15 天前
  • 使用 Fastify 框架构建 Nest.js 应用程序的方法

    Nest.js 是一个基于 Node.js 平台的快速、可扩展的应用程序框架,它使用了许多标准和现代技术和设计模式。Nest.js 提供了一种简洁的架构、简单的编程形式和强大的模块化机制,可以大大提高...

    15 天前
  • Java 应用程序性能优化的 Best Practices

    介绍 Java 是一种常用的编程语言,被广泛应用于企业应用开发、移动端应用开发、游戏开发等领域。Java 应用程序性能优化是一个重要的话题,它涉及到许多方面,如代码质量、算法复杂度、内存管理、线程安全...

    15 天前
  • Flexbox 布局中的五种 flex-shrink 策略

    在 Flexbox 布局中,flex-shrink 属性指定了弹性盒中一个项目在空间不足时该如何缩小。当容器空间不足以容纳所有项目时,flex-shrink 属性控制每个项目缩小的程度。

    15 天前
  • 是时候学习 Progressive Web App (PWA) 技术了!

    近年来,随着移动设备的普及和技术的进步,Web 应用的使用率不断增加。然而,传统的 Web 应用在某些方面依然存在着劣势,如需要网络连接、页面加载速度较慢等等。因此,为了提供更优秀的用户体验,又兼顾 ...

    15 天前
  • Material Design 中图形的选择、调整和搭配技巧分析

    前言 在设计 UI 时,图形元素是不可缺少的一部分。Material Design 带来了更加直观、连贯和有意义的设计语言,并提供了一系列的设计准则,以协助设计师更好的选用图形元素。

    15 天前
  • 让 Babel 自动挖掘代码中的 ES6 语法

    在现代前端开发中,ES6 已经成为了标配。然而,我们在编写代码时难免会忘记或者忽略某些 ES6 的语法,这就导致了我们的代码在可读性、可维护性、性能优化等方面存在着不足。

    15 天前
  • Hapi.js中的路由优化技巧

    Hapi.js 是一款构建服务端应用程序的框架,它提供了一整套工具和插件,用于管理服务器上的路由、请求和响应。在构建服务器应用时,路由的性能是非常关键的因素之一。本文将介绍 Hapi.js 中的路由优...

    15 天前
  • 如何使用 Enzyme 测试 Redux 中的异步 Action Creator

    Redux 是一个非常流行的状态管理库,而 Enzyme 是一种常用的测试工具,用于测试 React 组件。在编写前端应用程序时,需要使用测试工具来测试 Redux 异步 Action Creator...

    15 天前
  • 解决 ES6 的 class 关键字无法继承 Array 的问题

    在 ES6 中,使用 class 关键字来创建类已经成为了一种普遍的方式。但是,当我们尝试继承 Array 类时,会遇到一些问题:Array 类的一些方法(例如 push、slice 等)无法通过子类...

    15 天前
  • Vue.js 中如何使用父子组件通信

    在 Vue.js 中,父子组件通常是一起工作的,需要进行交互和通信。因为 Vue.js 基于组件化开发,组件之间的通信是至关重要的。Vue.js 提供了多种方式实现父子组件通信,本文将着重介绍其中的两...

    15 天前
  • Kubernetes 中如何实现弹性伸缩?

    Kubernetes 是当今最流行的容器编排平台之一,它可以帮助我们轻松地管理和部署容器化应用程序。其中的一个主要功能是弹性伸缩,即自动缩放应用程序的数量来适应流量变化。

    15 天前
  • GraphQL 中的分布式架构实践

    GraphQL 作为一种新兴的 API 查询语言,被越来越多的开发者所使用。它不仅仅能够提高前后端开发效率,同时还支持分布式架构。 下面,我们将深入探讨 GraphQL 的分布式架构实践,探索如何使用...

    15 天前

相关推荐

    暂无文章