当前位置： 首页 > article >正文

红宝书第三十四讲：零基础学会单元测试框架：Jest、Mocha、QUnit

article 2026/1/25 17:11:58

红宝书第三十四讲：零基础学会单元测试框架：Jest、Mocha、QUnit

资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲

一、单元测试是什么？

就像给代码做“体检”，帮你检查每个函数是否能独立正常运行 1。

  • 场景举例：写了一个计算器函数，单元测试能自动验证加法是否正确
  • 核心价值：快速发现BUG，避免手动逐个测试

二、Jest：开箱即用的全能选手 12

Facebook 开发，适合 React/Vue 等现代项目。

特点：
  1. 零配置：安装即用，自带断言库
  2. 自动监测变化：修改代码后实时重新测试
  3. 模拟函数：可虚拟一个数据库，避免真实操作
快速入门：
  1. 安装：
npm install jest --save-dev
  1. 编写测试文件（sum.test.js）：
function sum(a, b) { return a + b; }test('1 + 2等于3', () => {expect(sum(1, 2)).toBe(3);  // 类似“断言”：期望结果是否符合
});
  1. 运行测试：
npx jest  # 自动找到所有.test.js文件执行

→ 控制台显示✔️通过 或 ❌失败信息

三、Mocha：灵活的拼装工具 2

需要搭配其他库（如Chai断言库），适合定制化需求。

使用步骤：
  1. 安装核心包+断言库：
npm install mocha chai --save-dev
  1. 编写测试（test.js）：
const { expect } = require('chai');
const sum = require('./sum');describe('加法函数测试', () => {it('应该返回3，当输入1和2时', () => {expect(sum(1, 2)).to.equal(3);  // 使用Chai的语法});
});
  1. 运行测试：
npx mocha test.js
四、QUnit：轻量简单的选择 1

jQuery 团队开发，适合小项目或库测试。

示例（需HTML页面）：
<!DOCTYPE html>
<!-- 引入QUnit的CSS和JS -->
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.19.1.css">
<script src="https://code.jquery.com/qunit/qunit-2.19.1.js"></script><script>
// 被测试代码
function sum(a, b) { return a + b; }// 测试用例
QUnit.test("加法测试", function(assert) {assert.equal(sum(1, 2), 3, "1+2=3");  // 断言描述
});
</script>

→ 浏览器打开页面，自动显示测试结果（绿色表示通过）

五、横向对比：该选哪个？
框架特点适用场景
Jest✔️自带工具链
✔️适合前端项目		React/Vue项目，快速验证功能
Mocha✔️灵活搭配插件
❌需自行配置		复杂项目，需要自定义测试流程
QUnit✔️简单易用
❌功能较少		小型JS库或jQuery插件测试

目录：总目录
上篇文章：红宝书第三十三讲：新手也能懂的转译工具指南：Babel vs TypeScript
下篇文章：红宝书第三十五讲：新手也能懂的静态代码分析指南：ESLint vs JSHint

脚注

  1. 《JavaScript高级程序设计（第5版）》说明QUnit简单易用且与jQuery解耦 ↩︎ ↩︎ ↩︎

  2. 《JavaScript高级程序设计（第5版）》指出Jest支持函数模拟和并行测试，Mocha提供可配置性 ↩︎ ↩︎

相关文章：

红宝书第三十四讲：零基础学会单元测试框架：Jest、Mocha、QUnit

红宝书第三十四讲&#xff1a;零基础学会单元测试框架&#xff1a;Jest、Mocha、QUnit 资料取自《JavaScript高级程序设计&#xff08;第5版&#xff09;》。 查看总目录&#xff1a;红宝书学习大纲 一、单元测试是什么&#xff1f; 就像给代码做“体检”&#xff0c;帮你检查…...

编程日记 2026/1/22 17:53:18

【JDBC-54.1】MySQL JDBC连接字符串常用参数详解

在Java应用程序中连接MySQL数据库时&#xff0c;JDBC连接字符串是建立连接的关键。一个配置得当的连接字符串不仅能确保连接成功&#xff0c;还能优化性能、增强安全性并处理各种连接场景。本文将深入探讨MySQL JDBC连接字符串的常用参数及其最佳实践。 1. 基本连接字符串格式…...

编程日记 2025/12/25 2:15:58

swagger 注释说明

一、接口注释核心字段 在 Go 的路由处理函数&#xff08;Handler&#xff09;上方添加注释&#xff0c;支持以下常用注解&#xff1a; 注解名称用途说明示例格式Summary接口简要描述Summary 创建用户Description接口详细说明Description 通过用户名和邮箱创建新用户Tags接口分…...

编程日记 2025/11/27 23:15:45

CST1019.基于Spring Boot+Vue智能洗车管理系统

计算机/JAVA毕业设计 【CST1019.基于Spring BootVue智能洗车管理系统】 【项目介绍】 智能洗车管理系统&#xff0c;基于 Spring Boot Vue 实现&#xff0c;功能丰富、界面精美 【业务模块】 系统共有三类用户&#xff0c;分别是&#xff1a;管理员用户、普通用户、工人用户&…...

编程日记 2026/1/23 15:44:39

【前端网络请求】XHR封装，支持文件上传、进度监控、混合字段传输

网络请求介绍 XMLHttpRequest（XHR）是前端开发中用于发起网络请求的基础技术。虽然现代开发中常用fetch或axios，但掌握XHR的封装技巧仍能让你更灵活地应对复杂需求。本文将通过一个可复用、功能全面的XHR封装工具，教你实现以下功能： 📤 文件上传（单个/多个文件）📊 实…...

编程日记 2025/11/28 2:28:56

# Shell脚本参数设计规范（DeepSeek指导）

Shell脚本参数设计规范&#xff08;DeepSeek指导&#xff09; 文章目录 Shell脚本参数设计规范&#xff08;DeepSeek指导&#xff09;A 我问&#xff1a;Q DeepSeek回答&#xff1a;**命令行参数表示规范****标准化表示示例**情况1&#xff1a;必选选项参数值情况2&#xff1a;…...

编程日记 2026/1/21 21:57:00

学习SqlSugar的跨库查询基本用法

使用SqlSugar操作数据库通常都是单库操作&#xff0c;跨库查询的情况要么是单个系统数据不完整&#xff0c;需要其它系统的关联业务数据支撑&#xff0c;要么就是需要整合汇总多个系统的数据进行数据数据分析、处理、展示。遇到上述情况&#xff0c;可以要求另外的系统提供查询…...

编程日记 2025/11/30 13:52:03

HTTP：五.WEB服务器

web服务器 定义：实现提供资源或应答的提供者都可以谓之为服务器！web服务器工作内容 接受建立连接请求 接受请求 处理请求 访问报文中指定的资源 构建响应 发送响应 记录事务处理过程 Web应用开发用到的一般技术元素 静态元素：html， img，js，Css，SWF，MP4 动态元素：PHP，…...

编程日记 2026/1/25 7:22:38

5.3 GitHub订阅系统核心架构解密：高并发设计与SQLite优化实战

GitHub Sentinel 分析报告功能实现：订阅管理核心逻辑解析 关键词：GitHub API 订阅管理, SQLite 数据库设计, RESTful API 开发, 原子操作封装, 异常处理机制 1. 订阅管理功能架构设计 订阅管理模块采用分层架构设计，通过清晰的接口隔离实现高内聚低耦合： #mermaid-svg-bW…...

编程日记 2025/11/28 9:35:13

CSI-PVController-volumeWorker

volumeWorker() 与claim worker流程一样&#xff0c;从volumeQueue中取数据&#xff0c;也就是取出的都是PV&#xff0c;如果informer中有这个pv&#xff0c;就进入update流程。 定义workFunc&#xff1a;首先&#xff0c;定义了一个匿名函数workFunc&#xff0c;这个函数是实…...

编程日记 2025/11/26 18:36:26

0基础 | 硬件滤波 C、RC、LC、π型

一、滤波概念 &#xff08;一&#xff09;滤波定义 滤波是将信号中特定波段频率滤除的操作&#xff0c;是抑制和防止干扰的重要措施。通过滤波器实现对特定频率成分的筛选&#xff0c;确保目标信号的纯净度&#xff0c;提升系统稳定性。 &#xff08;二&#xff09;滤波器分…...

编程日记 2025/12/30 23:20:56

图论基础理论

在我看来&#xff0c;想要掌握图的基础应用&#xff0c;仅需要三步走。 什么是图&#xff08;基本概念&#xff09;、图的构造&#xff08;打地基&#xff09;、图的遍历方式&#xff08;应用的基础&#xff09; 只要能OK的掌握这三步、就算图论入门了&#xff01;&#xff0…...

编程日记 2025/12/30 1:12:07

leaflet 之 获取中国某个行政区的经纬度边界（latLngBounds）

思路 在json文件中获取下面的四个点 组成东北,西南两组 { “southwest”: { “lat”: 35.950, “lng”: 120.000 },//西南方 “northeast”: { “lat”: 36.200, “lng”: 120.300 }//东北方 } 最西点经度&#xff08;minLng&#xff09; 最东点经度&#xff08;maxLng&#x…...

编程日记 2025/11/26 17:17:05

企业级低代码平台的架构范式转型研究

在快速迭代的数字时代&#xff0c;低代码平台如同一股清流&#xff0c;悄然成为开发者们的新宠。 它利用直观易用的拖拽式界面和丰富的预制组件&#xff0c;将应用程序的开发过程简化到了前所未有的程度。通过封装复杂的编程逻辑和提供强大的集成能力&#xff0c;低代码平台让…...

编程日记 2025/12/30 15:27:04

怎么免费下载GLTF/GLB格式模型文件，还可以在线编辑修改

​ 现在非常流行glb格式模型&#xff0c;和gltf格式文件&#xff0c;可是之类模型网站非常非常少 1&#xff0c;咱们先直接打开http://glbxz.com 官方glb下载网站 glbxz.com 2 可以搜索&#xff0c;自己想要的模型关键词 3&#xff0c;到自己想下载素材页面 4&#xff0c;…...

编程日记 2025/12/30 5:19:36

MyBatis 中 Mapper 传递参数的多种方法

# MyBatis Mapper 传递参数的多种方法及其优势 在使用 MyBatis 进行数据库操作时&#xff0c;Mapper 接口的参数传递是一个非常基础但又十分重要的部分。不同的参数传递方式适用于不同的场景&#xff0c;合理选择可以大大提高代码的可读性和维护性。本文将详细介绍几种常见的 …...

编程日记 2025/11/28 13:21:16

大模型到底是怎么产生的？一文揭秘大模型诞生全过程

前言 大模型到底是怎么产生的呢？ 本文将从最基础的概念开始，逐步深入，用通俗易懂的语言为大家揭开大模型的神秘面纱。 大家好，我是大 F，深耕AI算法十余年，互联网大厂核心技术岗。 知行合一，不写水文，喜欢可关注，分享AI算法干货、技术心得。 【专栏介绍】： 欢迎关注《…...

编程日记 2026/1/23 16:37:03

2025年3月 Scratch图形化三级 真题解析 中国电子学会全国青少年软件编程等级考试

2025年3月Scratch图形化编程等级考试三级真题试卷 一、选择题 第 1 题 默认小猫角色&#xff0c;scratch运行程序后&#xff0c;下列说法正确的是&#xff1f;&#xff08; &#xff09; A.小猫的颜色、位置在一直变化 B.小猫在舞台中的位置在一直变化&#xff0c;颜色…...

编程日记 2026/1/25 7:24:46

判断两个 IP 地址是否在同一子网 C

#include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> // 将点分十进制的 IP 地址转换为 32 位无符号整数 unsigned int ip_to_uint(const char *ip) { struct in_addr addr; if (inet_pton(AF_INET, ip, &am…...

编程日记 2025/11/26 22:33:25

DHCP中继

前言&#xff1a; DHCP Relay即DHCP中继&#xff0c;它是为解决DHCP服务器和DHCP客户端不在同一个广播域而提出的 DHCP中继 DHCP协议依赖广播通信&#xff08;如客户端发送DHCP Discover报文&#xff09;&#xff0c;但广播报文无法跨越子网&#xff0c;因为&#xff1a; 路由…...

编程日记 2025/11/27 7:32:42

02 - spring security基于配置文件及内存的账号密码

spring security基于配置的账号密码 文档 00 - spring security框架使用01 - spring security自定义登录页面 yml文件中配置账号密码 spring:security:user:name: adminpassword: 123456yml文件中配置账号密码后&#xff0c;控制台将不再输出临时密码 基于内存的账号密码 …...

编程日记 2025/11/27 10:36:28

【贪心之摆动序列】

题目&#xff1a; 分析&#xff1a; 这里我们使用题目中给的第二个实例来进行分析 题目中要求我们序列当中有多少个摆动序列&#xff0c;摆动序列满足一上一下&#xff0c;一下一上&#xff0c;这样是摆动序列&#xff0c;并且要输出摆动序列的最长长度 通过上面的图我们可以…...

编程日记 2026/1/25 7:22:52

Spring Boot 中应用的设计模式

Spring Boot 中应用的设计模式详解 Spring Boot 作为 Spring 框架的扩展&#xff0c;广泛使用了多种经典设计模式。以下是主要设计模式及其在 Spring Boot 中的具体应用&#xff1a; 一、创建型模式 1. 工厂模式 (Factory Pattern) 应用场景&#xff1a; BeanFactory 和 Ap…...

编程日记 2026/1/18 21:17:59

0x25广度优先搜索+0x26广搜变形

1.一般bfs AcWing 172. 立体推箱子 #include<bits/stdc.h> using namespace std; int n,m; char s[505][505]; int vis[3][505][505]; int df[3][4]{{1,1, 2,2},{0,0,1,1}, {0,0,2,2}}; int dx[3][4]{{0,0,1,-2},{0,0,1,-1},{2,-1,0,0}}; int dy[3][4]{{1,-2,0,0},{2,…...

编程日记 2026/1/25 7:22:43

java面向对象02：回顾方法

回顾方法及加深 定义方法 修饰符 返回类型 break&#xff1a;跳出switch和return的区别 方法名 参数列表 package com.oop.demo01;//Demo01类 public class Demo01 {//main方法public static void main(String[] args) {}/*修饰符 返回值类型 方法名(...){//方法体return…...

编程日记 2026/1/25 7:22:55

数据结构day05

一 栈的应用&#xff08;括号匹配&#xff09; 各位同学大家好&#xff0c;在之前的小结中&#xff0c;我们学习了栈和队列这两种数据结构&#xff0c;那从这个小节开始&#xff0c;我们要学习几种栈和队列的典型应用。这个小节中&#xff0c;我们来看一下括号匹配问题&#xf…...

编程日记 2026/1/1 23:06:38

windows中搭建Ubuntu子系统

windows中搭建虚拟环境 1.配置2.windows中搭建Ubuntu子系统2.1windows配置2.1.1 确认启用私有化2.1.2 将wsl2设置为默认版本2.1.3 确认开启相关配置2.1.4重启windows以加载更改配置 2.2 搭建Ubuntu子系统2.2.1 下载Ubuntu2.2.2 迁移位置 3.Ubuntu子系统搭建docker环境3.1安装do…...

编程日记 2025/12/30 6:12:35

ImgTool_0.8.0：图片漂白去底处理优化工具

ImgTool_0.8.0 是一款专为Windows设计的‌免费、绿色便携式图片处理工具‌&#xff0c;支持 Windows 7/8/10/11 系统‌。其核心功能为‌漂白去底‌&#xff0c;可高效去除扫描件或手机拍摄图片中的泛黄、灰底及阴影&#xff0c;同时提供智能纠偏、透视校正等辅助功能&#xff0…...

编程日记 2026/1/25 7:22:40

BGP路由协议之对等体

IGP 可以通过组播报文发现直连链路上的邻居&#xff0c;而 BGP 是通过 TCP&#xff1a;179 来实现的。BGP 需要手工的方式去配置邻居。不需要直连&#xff0c;只要路由能通就可以建立邻居 IBGP 与 EBGP IBGP :(Internal BGP) :位于相同自治系统的 BGP 路由器之间的 BGP 邻接关…...

编程日记 2026/1/1 21:30:10

Python代码相关关系矩阵的三种展示热力图-条形图

本文将深入探讨三种常用的展示技巧：corr()函数、热力图和条形图。通过这些技术，可以更直观地理解数据中的关联性，为进一步的分析和决策提供有力支持。 一、corr()函数：基础相关性分析 1. corr()函数的基本用法 corr()函数是Pandas库中用于计算数据帧（DataFrame）中两两…...

编程日记 2025/11/29 9:18:12