使用Jest进行JavaScript单元测试

💓 博客主页:瑕疵的CSDN主页
📝 Gitee主页:瑕疵的gitee主页
⏩ 文章专栏:《热点资讯》

使用Jest进行JavaScript单元测试

    • 引言
    • Jest 简介
      • 安装 Jest
      • 创建基本配置
      • 编写测试用例
      • 运行测试
      • 快照测试
      • 模拟函数
      • 代码覆盖率报告
      • 最佳实践
        • 保持测试独立
        • 使用描述性命名
        • 模拟外部依赖
        • 写测试先于写代码
      • 实际案例
      • 总结

引言

在现代软件开发中,测试是确保代码质量和稳定性的关键步骤。Jest 是一个流行的 JavaScript 测试框架,它提供了丰富的功能和易用的 API,使得编写和运行单元测试变得更加简单。本文将详细介绍如何使用 Jest 进行 JavaScript 单元测试,包括安装、配置、编写测试用例和最佳实践等内容。

Jest 简介

Jest 是一个 JavaScript 测试框架,由 Facebook 维护。它主要用于测试 JavaScript 代码,但也支持 React、Vue 等前端框架。Jest 的主要特点包括:

  • 零配置:开箱即用,无需复杂的配置即可开始编写测试。
  • 快照测试:支持快照测试,可以轻松捕获 UI 组件的变化。
  • 模拟函数:提供强大的模拟函数功能,可以模拟外部依赖。
  • 并行执行:支持并行执行测试,提高测试速度。
  • 代码覆盖率报告:生成详细的代码覆盖率报告,帮助开发者了解测试覆盖情况。

安装 Jest

在使用 Jest 之前,需要安装必要的依赖。假设你已经安装了 Node.js 和 npm,可以使用以下命令安装 Jest:

npm init -y
npm install jest --save-dev

创建基本配置

Jest 默认会查找 package.json 中的 test 脚本。你可以在 package.json 中添加一个测试脚本:

{"scripts": {"test": "jest"}
}

编写测试用例

在项目的 __tests__ 目录下创建一个测试文件,例如 sum.test.js

// __tests__/sum.test.js
const sum = require('../sum');it('adds 1 + 2 to equal 3', () => {expect(sum(1, 2)).toBe(3);
});

运行测试

使用以下命令运行测试:

npm test

这将根据配置文件运行所有的测试用例,并输出测试结果。

快照测试

快照测试是 Jest 的一个强大功能,可以捕获组件的输出并在后续测试中进行比较。例如,假设你有一个 React 组件:

// components/MyComponent.js
import React from 'react';const MyComponent = () => (<div><h1>Hello, World!</h1></div>
);export default MyComponent;

在测试文件中编写快照测试:

// __tests__/MyComponent.test.js
import React from 'react';
import renderer from 'react-test-renderer';
import MyComponent from '../components/MyComponent';it('matches the snapshot', () => {const component = renderer.create(<MyComponent />);const tree = component.toJSON();expect(tree).toMatchSnapshot();
});

模拟函数

Jest 提供了强大的模拟函数功能,可以模拟外部依赖。例如,假设你有一个函数需要调用外部 API:

// src/api.js
const fetchData = async () => {const response = await fetch('https://api.example.com/data');return response.json();
};module.exports = fetchData;

在测试文件中模拟 fetch 函数:

// __tests__/api.test.js
const fetchData = require('../src/api');jest.mock('node-fetch');it('calls the API and returns data', async () => {global.fetch = jest.fn(() =>Promise.resolve({json: () => Promise.resolve({ data: 'example' })}));const result = await fetchData();expect(result).toEqual({ data: 'example' });
});

代码覆盖率报告

Jest 可以生成详细的代码覆盖率报告。在 package.json 中添加一个覆盖率脚本:

{"scripts": {"test": "jest","coverage": "jest --coverage"}
}

使用以下命令生成覆盖率报告:

npm run coverage

最佳实践

保持测试独立
每个测试用例应该独立于其他测试用例,避免相互影响。

使用描述性命名
测试用例的名称应该清晰明了,便于理解测试的目的。

模拟外部依赖
使用模拟函数和模块,避免测试依赖外部环境。

写测试先于写代码
遵循测试驱动开发(TDD)的原则,先编写测试用例再编写实现代码。

实际案例

Jest 已经被广泛应用于各种 JavaScript 项目,例如:

  • 前端应用:测试 React、Vue 等前端框架的组件和逻辑。
  • 后端应用:测试 Node.js 应用的业务逻辑和 API。
  • 库和框架:测试第三方库和框架的功能和性能。

总结

通过本文,你已经学会了如何使用 Jest 进行 JavaScript 单元测试。Jest 的零配置、快照测试、模拟函数和代码覆盖率报告等功能使其成为现代 JavaScript 开发的强大工具。
Jest 测试流程图

Jest 支持快照测试和模拟函数,可以更好地管理和验证代码的行为。
Jest 代码覆盖率报告示意图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/5986.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Node.js 应用程序中的文件写入提升为 RCE

在这篇博文中,我们将强调代码安全基础的重要性。我们会展示一个技术案例:攻击者如何能够把 Node.js 应用中的文件写入漏洞转化为远程代码执行,即便目标系统的文件系统是以只读方式挂载的。这个技术通过利用暴露的管道文件描述符来获得代码执行能力,从而绕过了这类加固环境中的限…

Oracle视频基础1.4.5练习

1.4.5 看bbk的框架 ls env | grep ORA cd /u01/oradata ls ll cd bbk ll cd /u01/admin/ ll ll bbk cd cd db cd dbs ls vi initbbk.ora clear ls ll env | grep ORA执行创建数据库语句。 sqlplus /nolog conn /as sysdba create spfile from pfile ! ls ll exit startup nom…

Echats柱状图的横坐标用图片显示

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>图片作为横坐标示例 - ECharts</title><!-…

vscode php Launch built-in server and debug, PHP内置服务xdebug调试,自定义启动参数配置使用示例

在vscode中&#xff0c;当我们安装了插件 PHP Debug&#xff08;xdebug.php-debug&#xff09;或者 xdebug.php-pack 后 我们通过内置默认的 php xdebug配置启动php项目后&#xff0c;默认情况下我们在vscode中设置断点是不会生效的&#xff0c;因为我们的内置php服务默认启动时…

城镇保障性住房管理:SpringBoot系统创新点

5系统详细实现 5.1 用户信息管理 管理员可以对用户信息进行添加&#xff0c;修改&#xff0c;删除操作。具体界面的展示如图5.1所示。 图5.1 用户信息管理界面 5.2 房屋类型管理 管理员可以对房屋类型信息进行添加&#xff0c;修改&#xff0c;删除操作。具体界面如图5.2所示…

积极助力信创工作,爱加密荣获麒麟系统优秀合作伙伴

近日&#xff0c;麒麟软件安全生态联盟2024年第三次工作会议顺利举行。麒麟软件安全生态联盟由工业和信息化部网络安全产业发展中心指导成立&#xff0c;旨在联合打造原创性、引领性的自主操作系统内生安全技术体系和自主创新安全生态。会上&#xff0c;麒麟软件相关领导为爱加…

用图说明 CPU、MCU、MPU、SoC 的区别

CPU CPU 负责执行构成计算机程序的指令&#xff0c;执行这些指令所指定的算术、逻辑、控制和输入/输出&#xff08;I/O&#xff09;操作。 MCU (microcontroller unit) 不同的 MCU 架构如下&#xff0c;注意这里的 MPU 表示 memory protection unit MPU (microprocessor un…

navicat pg库安装mysql fdw 外表扩展

在Windows上手动安装mysql_fdw&#xff08;MySQL Foreign Data Wrapper&#xff09;通常涉及一系列步骤&#xff0c;包括下载源码、编译、配置和测试。以下是一个详细的指南&#xff1a; 一、下载mysql_fdw源码 访问mysql_fdw的GitHub发布页面&#xff0c;选择最新版本的源码…

LongVU :Meta AI 的解锁长视频理解模型,利用自适应时空压缩技术彻底改变视频理解方式

Meta AI在视频理解方面取得了令人瞩目的里程碑式成就&#xff0c;推出了LongVU&#xff0c;这是一种开创性的模型&#xff0c;能够理解以前对人工智能系统来说具有挑战性的长视频。 研究论文 "LongVU&#xff1a;用于长视频语言理解的时空自适应压缩 "提出了一种革命…

Oracle OCP认证考试考点详解082系列09

题记&#xff1a; 本系列主要讲解Oracle OCP认证考试考点&#xff08;题目&#xff09;&#xff0c;适用于19C/21C,跟着学OCP考试必过。 41. 第41题&#xff1a; 题目 41.Examine the description of the EMPLOYEES table NLS_DATE_FORMAT is set to DD-MON-YY Which query…

【NOIP提高组】引水入城

【NOIP提高组】引水入城 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 在一个遥远的国度&#xff0c;一侧是风景秀美的湖泊&#xff0c;另一侧则是漫无边际的沙漠。该国的行政 区划十分特殊&#xff0c;刚好构成一个N行M列的矩形&#xff…

apache poi 实现下拉框联动校验

apache poi 提供了 DataValidation​ 接口 让我们可以轻松实现 Excel 下拉框数据局校验。但是下拉框联动校验是无法直接通过 DataValidation ​实现&#xff0c;所以我们可以通过其他方式间接实现。 ‍ 步骤如下&#xff1a; 创建一个隐藏 sheet private static void create…

盘点和嗨格式一样好用的10款数据恢复!!

亲爱的朋友们&#xff0c;相信大家都知道&#xff0c;一旦不小心删除了重要文件或者遇到了硬盘故障&#xff0c;心情简直如同坐过山车一般此起彼伏&#xff0c;那么这个时候就需要一款好的数据恢复工具来解救我们的数据危机。今天就来给大家推荐嗨格式数据恢复以及另外这10款我…

【Python】怎么创建一个新的conda环境,并在其中安装所需的软件包

最近在运行前同事留下的包的时候&#xff0c;遇到了numpy包和pandas包不匹配的问题&#xff0c;见前一篇&#xff1a; 屋漏偏逢连夜雨&#xff0c;今天打开spyder的时候&#xff0c;也没法运行spyder了。 于是&#xff0c;痛定思痛&#xff0c;打算换一个conda环境&#xff0…

通讯录(C 语言)

目录 一、通讯录设计思路1. 伪代码设计思路2. 代码设计思路 二、代码实现三、程序运行演示四、整体分析 一、通讯录设计思路 1. 伪代码设计思路 通讯录可以用来存储 100 个人的信息&#xff0c;每个人的信息包括&#xff1a;姓名、性别、年龄、电话、住址。 提供方法&#x…

海明码校验和纠错

1.计算1011海明码的校验位 根据公式nk<-1 &#xff08;n是信息码位数&#xff0c;1011就是4&#xff09; 则 k3 43<-1 由上可知校验码有3个 又因为 4 2 1 可以列出下列表格 7654321d3d2d1x2d0x1x01011 x0 x1 x2 分别为3个校验码的位置 又因为 7421 642 541…

SpringMVC的执行流程以及运行原理

文章目录 SpringMVC的执行流程以及运行原理一、引言二、SpringMVC核心组件与执行流程1、SpringMVC核心组件1.1、DispatcherServlet配置 2、SpringMVC执行流程 三、SpringMVC配置文件及注解四、总结 SpringMVC的执行流程以及运行原理 一、引言 SpringMVC作为Spring框架的核心模…

Unity XR Interaction Toolkit 开发教程(4)XR Origin:追踪参考系与相机高度【3.0以上版本】

获取完整课程以及答疑&#xff0c;工程文件下载&#xff1a; https://www.spatialxr.tech/ 视频试看链接&#xff1a; 4.XR Origin&#xff1a;追踪参考系与相机高度【Unity XR Interaction Toolkit 跨平台开发教程】&#xff08;3.0以上版本&#xff09; 系列教程专栏&#…

【基于Zynq FPGA对雷龙SD NAND的测试】

一、SD NAND 特征 1.1 SD 卡简介 雷龙的 SD NAND 有很多型号&#xff0c;在测试中使用的是 CSNP4GCR01-AMW 与 CSNP32GCR01-AOW。芯片是基于 NAND FLASH 和 SD 控制器实现的 SD 卡。具有强大的坏块管理和纠错功能&#xff0c;并且在意外掉电的情况下同样能保证数据的安全。 …

小程序与服务器通信webSocket和UDPSocket

UDPSocket 官方文档链接UDPSocket webSocket 官方文档链接 WebSocket 任务 先用webSocket 测试成功后&#xff0c;由于WSS的问题最后决定用UDPSocket&#xff0c;两个都记录一下。 UDPSocket 项目里主要就使用了以下几个方法, 先用wx.createUDPSocket创建UDP Socket 实例&a…