使用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.mzph.cn/diannao/59130.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

根据关键字搜索商品API返回值解析:深入解析与代码实践

在电子商务和数据集成领域&#xff0c;API&#xff08;应用程序编程接口&#xff09;扮演着至关重要的角色。通过API&#xff0c;开发者可以访问和利用平台的数据资源&#xff0c;实现自动化和智能化的数据交互。本文将探讨如何根据关键字搜索商品API的返回值进行解析&#xff…

哈尔滨华时信息技术有限公司,特色之处见怎么样

哈尔滨华时信息技术有限公司的特色之处体现在以下几个方面&#xff1a; 1. **技术优势**&#xff1a; - **无线网络技术专长**&#xff1a;在无线网络领域有深厚的技术积累和优势。具备高度的灵活性与移动性&#xff0c;能为客户提供灵活的网络解决方案&#xff0c;满足如移动…

【书生.浦语实战营】——入门岛

【书生.浦语实战营】——入门岛_第一关_Linux基础 任务分布1. 本地vscode远程连接并进行端口映射端口映射What——何为端口映射How——怎么进行端口映射 2. Linux基础命令touch &#xff1a;创建文件mkdir &#xff1a;创建目录cd:进入 退出 目录pwd :确定当前所在目录cat:可以…

KubeVirt 安装和配置 Windows虚拟机

本文将将介绍如何安装 KubeVirt 和使用 KubeVirt 配置 Windows 虚拟机。 前置条件 准备 Ubuntu 操作系统&#xff0c;一定要安装图形化界面。 安装 Docker&#xff08;最新版本&#xff09; 安装 libvirt 和 TigerVNC&#xff1a; apt install libvirt-daemon-system libvir…

RHCE——DNS域名解析服务器、selinux、防火墙

1、DNS简介 DNS &#xff08; Domain Name System &#xff09;是互联网上的一项服务&#xff0c;它作为将域名和 IP 地址相互映射的一个分布式 数据库&#xff0c;能够使人更方便的访问互联网。 DNS 系统使用的是网络的查询&#xff0c;那么自然需要有监听的 port 。 DNS 使…

11.Three.js使用indexeddb前端缓存模型优化前端加载效率

11.Three.js使用indexeddb前端缓存模型优化前端加载效率 1.简述 在使用Three.js做数字孪生应用场景时&#xff0c;我们常常需要用到大量模型或数据。在访问我们的数字孪生应用时&#xff0c;每次刷新都需要从web端进行请求大量的模型数据或其他渲染数据等等&#xff0c;会极大…

智慧城市的守护者——智能井盖监测终端

城市化进程的加速推进使得基础设施建设成为提升城市品质的关键环节。然而&#xff0c;在这一进程中&#xff0c;市政公用设施中的井盖与地下线缆的安全问题却日益凸显。由于缺乏有效的实时监控与管理体系&#xff0c;给犯罪分子留下了可趁之机&#xff0c;频繁发生的井盖被盗及…

零基础玩转IPC之——如何实现远程实时查看监控视频(P2P)

P2P是peer-to-peer的简称&#xff0c;又称为点对点技术&#xff0c;是没有中心服务器、依靠用户群节点进行信息交换的对等式网络。区别于传统的C/S中央服务器结构&#xff0c;P2P网络中每一个用户节点即是客户端又是服务端&#xff0c;能同时作为服务器给其他节点提供服务。 优…

开源OCR免费助力法律文档数字化,提升文档管理效率

一、在法律行业&#xff0c;每天需要处理大量纸质文件&#xff0c;从合同到判决书&#xff0c;手动录入不仅费时&#xff0c;还容易出错。为解决这一问题推出了一款免费开源的OCR智能识别平台&#xff0c;通过先进的光学字符识别&#xff08;OCR&#xff09;技术&#xff0c;将…

华为OD七日集训第5期 - 按算法分类,由易到难,循序渐进,玩转OD(Python/JS/C/C++)

目录 一、适合人群二、本期训练时间三、如何参加四、7日集训五、精心挑选21道高频100分经典题目&#xff0c;作为入门。第1天、逻辑分析第2天、数组第3天、双指针第4天、滑动窗口第5天、贪心算法第6天、二分查找第7天、分治递归 六、集训总结 大家好&#xff0c;我是哪吒。 最…

【数据分享】2024年我国省市县三级的休闲娱乐设施数量(免费获取/18类设施/Excel/Shp格式)

KTV、棋牌室、音乐厅等休闲服务设施的配置情况是一个城市公共基础设施完善程度的重要体现&#xff0c;一个城市休闲服务设施种类越丰富&#xff0c;数量越多&#xff0c;通常能表示这个城市的公共服务水平越高&#xff01; 本次我们为大家带来的是我国各省份、各地级市、各区县…

串口接收,不定长数据接收

###1.CUBE-MX配置串口 2.我采用串口中断接收&#xff0c;打开中断接口 3.时钟同样8倍频&#xff0c;1分频&#xff0c;使用内部时钟 打开串口中断 main() { __HAL_UART_ENABLE_IT(&huart1, UART_IT_IDLE); // 启用空闲中断__HAL_UART_ENABLE_IT(&huart1, UART_IT_R…

如何在Linux系统中使用SSH进行安全连接

如何在Linux系统中使用SSH进行安全连接 SSH简介 安装SSH 在Debian/Ubuntu系统中安装 在CentOS/RHEL系统中安装 启动SSH服务 验证SSH是否安装成功 SSH配置 配置监听端口 配置登录方式 SSH客户端 安装SSH客户端 使用SSH客户端 SSH密钥认证 生成SSH密钥对 复制公钥到远程服务器…

使用 Elasticsearch 进行语义搜索

Elasticsearch 是一款功能强大的开源搜索引擎&#xff0c;可用于全文搜索、分析和数据可视化。传统上&#xff0c;Elasticsearch 以其执行基于关键字/词汇的搜索的能力而闻名&#xff0c;其中文档基于精确或部分关键字匹配进行匹配。然而&#xff0c;Elasticsearch 已经发展到支…

Kubeadm搭建k8s

一、架构 节点名称规格IP地址安装组件master012C/4G&#xff0c;cpu核心数要求大于2192.168.88.76docker、kubeadm、kubelet、kubectl、flannelnode012C/2G192.168.88.20docker、kubeadm、kubelet、kubectl、flannelnode022C/2G192.168.88.21docker、kubeadm、kubelet、kubect…

WordPress伪静态设置

为什么要设置WordPress伪静态&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;中&#xff0c;静态URL通常被认为更易于搜索引擎爬虫抓取和索引&#xff0c;有助于提高网站的搜索引擎排名。 WordPress伪静态设置方法主要依赖于服务器环境&#xff0c;以下是针对不同服务器…

【简道云 -注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

太速科技-712-6U VPX飞腾处理器刀片计算机

6U VPX飞腾处理器刀片计算机 一、产品概述 该产品是一款基于国产飞腾FT-2000四核处理器或D2000八核处理器的高性能6U VPX刀片式计算机。产品提供了可支持全网状交换的高速数据通道&#xff0c;其中P1、P2均支持1个PCIe x16 Gen3或2个PCIe x8 Gen3或4个PCIe x4 Gen3总…

安卓设备adb执行AT指令控制电话卡

文章目录 AT指令起源与发展&#xff1a;基本格式&#xff1a;常见应用领域及功能&#xff1a;不同设备中的应用&#xff1a; 安卓获取modem设备输入符入口安卓设备输入AT指令 AT指令 AT 指令是 Attention 的缩写&#xff0c;是一种用于控制调制解调器等通信设备的指令集。 起…

c++模板入门

c系列模板入门 文章目录 c系列模板入门一、模板概念引入二、函数模板2.1、函数模板的概念2.2、函数模板的定义格式2.3、函数模板的使用 三、类模板1.1、什么是类模板1.2、类模板的定义格式1.3、类模板于函数模板的区别 一、模板概念引入 在程序设计中我们经常需要对两个数据进…