使用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.rhkb.cn/news/463084.html

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

相关文章

机器学习算法之回归算法

一、回归算法思维导图 二、算法概念、原理、应用场景和实例代码 1、线性回归 1.1、概念 ‌‌线性回归算法是一种统计分析方法&#xff0c;用于确定两种或两种以上变量之间的定量关系。‌ 线性回归算法通过建立线性方程来预测因变量&#xff08;y&#xff09;和一个或多个自变量…

Android中同步屏障(Sync Barrier)介绍

在 Android 中&#xff0c;“同步屏障”&#xff08;Sync Barrier&#xff09;是 MessageQueue 中的一种机制&#xff0c;允许系统临时忽略同步消息&#xff0c;以便优先处理异步消息。这在需要快速响应的任务&#xff08;如触摸事件和动画更新&#xff09;中尤为重要。 在 An…

突破职场瓶颈,实现个人成长

在职场生涯中&#xff0c;我们总会遇到各种各样的瓶颈。这些瓶颈如同成长道路上的荆棘&#xff0c;让我们感到困惑、焦虑甚至恐惧。然而&#xff0c;瓶颈并非无法逾越&#xff0c;只要我们掌握正确的方法&#xff0c;勇敢面对&#xff0c;就能顺利突破&#xff0c;实现个人成长…

ubuntu 24.04中安装 Easyconnect,并解决版本与服务器不匹配问题

下载安装包 下载地址 https://software.openkylin.top/openkylin/yangtze/pool/all/ 页面搜索 easyconnect 选择 easyconnect_7.6.7.3.0_amd64.deb安装 sudo dpkg --install easyconnect_7.6.7.3.0_amd64.deb卸载 sudo dpkg --remove easyconnect出现的问题 安装以后第…

判断是否是变位词

题目&#xff1a;给定两个单词&#xff0c;判断这两个单词是否是变位词。如果两个单词的字母完全相同&#xff0c;只是位置有所不同&#xff0c;则称这两个单词为变位词。例如eat和tea是变位词。 答&#xff1a;问题分析&#xff1a;判断是否为变位词&#xff0c;只需要分别统计…

解决python matplotlib画图无法显示中文的问题

在用matplotlib做一个简单的可视化统计时&#xff0c;由于标签是中文&#xff0c;无法显示&#xff0c;只是显示出来一些方框&#xff08;如图&#xff09; 问题在于&#xff0c;当前matplotlib使用的字体不支持中文&#xff0c;我们进行替换就可以了 我想替换为黑体&#xff…

Docker:网络

Docker&#xff1a;网络 Docker 网络架构CNMLibnetwork驱动网络类型 命令docker network lsdocker network inspectdocker network createdocker network connectdocker network disconnectdocker network prunedocker network rm 网络操作bridgehostcontainernone Docker 网络…

力扣排序268题 数字丢失

题目&#xff1a; 丢失的数字 给定一个包含[0,n]中n各数的数组nums&#xff0c;找出[0,n]这个范围 内没有出现在数组中的那个数。 示例1&#xff1a; 输出&#xff1a;n 3,因为有3个数字&#xff0c;所以所有的数字都在范围 [0,3]内。2是丢失的数字&#xff0c;因为它没有出现…

自动化测试类型与持续集成频率的关系

持续集成是敏捷开发的一个重要实践&#xff0c;可是究竟多频繁的集成才算“持续”集成&#xff1f; 一般来说&#xff0c;持续集成有3种常见的集成频率&#xff0c;分别是每分钟集成、每天集成和每迭代集成。项目组应当以怎样的频率进行集成&#xff0c;这取决于测试策略&…

Gitlab-runner running on Kubernetes - hostAliases

*Config like this. *That in your helm values.yaml.

从头开始学PHP之面向对象

首先介绍下最近情况&#xff0c;因为最近入职了且通勤距离较远&#xff0c;导致精力不够了&#xff0c;而且我发现&#xff0c;人一旦上了班&#xff0c;下班之后就不想再进行任何脑力劳动了&#xff08;对大部分牛马来说&#xff0c;精英除外&#xff09;。 话不多说进入今天的…

【综合算法学习】(第十五篇)

目录 图像渲染&#xff08;medium&#xff09; 题目解析 讲解算法原理 编写代码 岛屿数量&#xff08;medium&#xff09; 题目解析 讲解算法原理 编写代码 图像渲染&#xff08;medium&#xff09; 题目解析 1.题目链接&#xff1a;. - 力扣&#xff08;LeetCode&…

教育技术革新:SpringBoot在线试题库系统开发

2 相关技术 2.1 Spring Boot框架简介 Spring Boot是由Pivotal团队提供的全新框架&#xff0c;其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置&#xff0c;从而使开发人员不再需要定义样板化的配置。通过这种方式&#xff0c;Sprin…

OTFS延迟多普勒信道模型(信道模型代码)

一、信道模型公式 1、延迟多普勒域信道模型 在一个M*N维的延迟多普勒域中&#xff0c;定义M为子载波数&#xff0c;子载波间隔为 对应倒数时隙长度为&#xff0c;信号总长度为,L-1表示最大径数。 公式中冲激响应延迟域移动的分辨率&#xff0c;如下图中Delay轴的一格也就是即,多…

Failed to search for file: Cannot update read-only repo

今天在读《Linux就该这么学》并上机操作RedHat Linux 8。结果在执行指令时却出现了问题: 我明明已经是root权限了&#xff0c;我于是上网去找&#xff0c;但也没看到合适的解答。为什么会和书上的操作结果不一样。 后来我突然意识到是不是我打了不该打的空格&#xff0c;于是…

Android中SurfaceView与GLSurfaceView 的关系

SurfaceView 与 GLSurfaceView 的关系 在 Android 开发中&#xff0c;SurfaceView 和 GLSurfaceView 是实现自定义渲染效果的关键组件。它们提供了不同的渲染方式&#xff0c;适用于不同的应用场景。我们将通过以下几个方面详细说明 SurfaceView 和 GLSurfaceView 的特点及实现…

游戏引擎中的颜色科学

游戏引擎中的渲染组件的作用是生成一个二维图片&#xff0c;在特定的时间从给定的视点观察的方向看到的一个三维空间的状态。他们的生成每一张图片都会被称为帧&#xff0c;他们生成的速度称为帧率。 像素 在每一帧中&#xff0c;游戏引擎的视觉输出基本上是一大堆彩色像素&a…

计算机网络-以太网小结

前导码与帧开始分界符有什么区别? 前导码--解决帧同步/时钟同步问题 帧开始分界符-解决帧对界问题 集线器 集线器通过双绞线连接终端, 学校机房的里面就有集线器 这种方式仍然属于共享式以太网, 传播方式依然是广播 网桥: 工作特点: 1.如果转发表中存在数据接收方的端口信息…

D56【python 接口自动化学习】- python基础之异常

day56 异常的产生与分类 学习日期&#xff1a;20241102 学习目标&#xff1a;模块与标准库 -- 72 初始异常&#xff1a;异常的产生与分类 学习笔记&#xff1a; 什么是异常 异常的分类 总结 引发异常时&#xff0c;代码会进行中断exception-所有内置的非系统退出类异常都派…

轴承性能对步进电机的影响

步进电机作为一种重要的电动机类型&#xff0c;在工业自动化、机器人技术以及各种机械设备中得到了广泛应用。步进电机的性能直接关系到其控制精度、响应速度和可靠性&#xff0c;而其中一个关键的组成部分——轴承&#xff0c;往往被认为是影响步进电机性能的一个重要因素。 一…