使用 Jest 进行软件测试

2025-05-24

使用 Jest 进行软件测试

从开源项目到企业软件,大多数软件都有庞大的代码库。不信?事实就是如此!一些谷歌的代码库甚至超过 20 亿行!手动理解和调试每一行代码,恐怕只有超人才能做到。因此,在为项目做贡献时,务必记住,你的代码不会破坏现有功能。

什么是测试?🧪

在软件中,测试是发现任何差距、错误或缺失需求并验证其是否符合我们需求的过程。

假设你给一台直流电机输入一个输入。根据你的理论知识,你会得到一些预期的输出,对吗?但在实际生活中,输出可能会有所不同。因此,在测试中,我们通常会确定预期值和实际值之间的差异,并尽可能地修正它。

描述测试工作流程的流程图

软件测试主要分为3类:

  • 单元测试:测试单个功能
  • 集成测试:测试调用函数的函数
  • 端到端测试:验证 DOM(即检查所有内容是否同步)

在本文中,我们将重点介绍单元测试。为什么?因为它易于实现并且非常常用。

但是我们怎么知道该测试什么呢?🤓

说到测试,即使是一段简单的代码也可能让初学者不知所措。最常见的问题是“我怎么知道要测试什么?”

假设我们正在编写一个 Web 应用程序,一个好的起点是测试应用程序的每个页面和每个用户交互。但是,Web 应用程序也是由需要测试的代码单元(例如函数和模块)组成的。

在编写代码时,主要有两种情况:

  • 您继承了未经测试的遗留代码
  • 你必须凭空实现一个新功能

该怎么办?对于这两种情况,我们可以将测试视为检查给定函数是否产生预期结果的代码片段。典型的测试流程如下所示:

  • 导入要测试的函数
  • 给函数输入
  • 定义预期输出
  • 检查函数是否产生预期的输出

真的,就是这样!如果你这样想,测试就不再可怕了:

输入 - 预期输出 - 断言结果

Jest 是什么?✨

Jest 是一个由Meta支持的 JavaScript 测试框架。它更注重简洁性和对大型 Web 应用程序的支持。它用于测试使用 Babel、TypeScript、Nodejs、React、Angular、Vuejs 和 Svelte 的应用程序。Jest 是目前最流行的测试运行器之一,也是React 项目的默认选择

React 与 Jest

Jest 包含在 NPM 包中,您可以通过运行以下命令将其安装在任何 JavaScript 项目中:

npm install --save-dev jest 
Enter fullscreen mode Exit fullscreen mode

让我们看一个演示💥

设置项目

mkdir jestDemo
cd jestDemo
Enter fullscreen mode Exit fullscreen mode

现在您已进入目录,因此让我们使用 NPM 对其进行初始化。

npm init -y
Enter fullscreen mode Exit fullscreen mode

-y 标志可帮助您使用所有默认值进行初始化。现在,让我们安装 jest NPM 包。

npm install --save-dev jest
Enter fullscreen mode Exit fullscreen mode

项目结构非常重要,所以现在就开始做吧。

项目结构

为了进行测试,必须使用要测试的 JavaScript 文件的名称,并在其间连接单词 test 来命名测试文件。在此演示中,我们将测试一个脚本,用于减去两个元素。该脚本以 编写,subtract.js因此相应的测试文件将是subtract.test.js

打开package.json并配置一个名为test的脚本来运行 Jest:

"scripts": {
   "test": "jest"
},
Enter fullscreen mode Exit fullscreen mode

现在我们可以开始了😁让我们从 subtract.js 和 subtract.test.js 的脚本开始

在 subtract.js 中:

function subtract(a,b){
   return a-b
}
module.exports = subtract
Enter fullscreen mode Exit fullscreen mode

在 subtract.test.js 中:

const subtract = require('./subtract')
test("Must subtract properly",() =>{
   expect (subtract(1,2)).toBe(-1)
})
Enter fullscreen mode Exit fullscreen mode

就这样!现在让我们测试一下。

npm test
Enter fullscreen mode Exit fullscreen mode

测试结束后,它会给出一个输出,显示代码的状态,并将其与实际结果和指定的预期值进行比较。您将获得类似以下内容的输出:

输出状态

为了获得更详细、更结构化的测试可视化效果,请运行:

jest --coverage
Enter fullscreen mode Exit fullscreen mode

覆盖 CLI 图像

覆盖 GUI 图像

Jest coverage 命令可以更详细地分析测试失败的位置并相应地改进代码。

结尾💚

测试是一个庞大而引人入胜的话题。市面上有很多类型的测试和库可供测试。在本 Jest 教程中,您学习了如何配置 Jest 以生成覆盖率报告、如何组织和编写简单的单元测试以及如何测试 JavaScript 代码。没有比深入体验 Jest 更好的测试方式了。

本博客旨在提高对 Jest 及类似测试工具的认识。如需进一步了解,建议阅读 Jest 官方文档。如果您对本文有任何疑问,或想讨论其他话题,欢迎随时在LinkedIn上与我联系💕

如果您经营一家组织并希望我为您撰写文章,请联系我🙈

文章来源:https://dev.to/aniket762/getting-into-software-testing-with-jest-2ca0
PREV
5 个值得考虑的 React 组件库
NEXT
使用 RxJS 在 Angular 中进行简单而强大的状态管理