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

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

news 来源：原创 2025/9/19 14:11:22

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

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

一、单元测试是什么？

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

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

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

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

特点：

零配置：安装即用，自带断言库
自动监测变化：修改代码后实时重新测试
模拟函数：可虚拟一个数据库，避免真实操作

快速入门：

安装：

npm install jest --save-dev

编写测试文件（sum.test.js）：

function sum(a, b) { return a + b; }test('1 + 2等于3', () => {expect(sum(1, 2)).toBe(3);  // 类似“断言”：期望结果是否符合
});

运行测试：

npx jest  # 自动找到所有.test.js文件执行

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

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

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

使用步骤：

安装核心包+断言库：

npm install mocha chai --save-dev

编写测试（test.js）：

const { expect } = require('chai');
const sum = require('./sum');describe('加法函数测试', () => {it('应该返回3，当输入1和2时', () => {expect(sum(1, 2)).to.equal(3);  // 使用Chai的语法});
});

运行测试：

npx mocha test.js

四、QUnit：轻量简单的选择 ¹

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

脚注

《JavaScript高级程序设计（第5版）》说明QUnit简单易用且与jQuery解耦 ↩︎ ↩︎ ↩︎
《JavaScript高级程序设计（第5版）》指出Jest支持函数模拟和并行测试，Mocha提供可配置性 ↩︎ ↩︎

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

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

编程日记 2025/9/19 14:11:22

视觉分析AI赋能智慧水务多场景应用

利用视觉分析的方式智慧水务的AI算法方案一、背景在传统水务监管中，面临着诸多痛点。例如，对于河道污染、水面异常、河湖四乱问题以及水生态环境差等情况，传统监管效率低下，预警不及时，资源分散，监控功…...

编程日记 2025/9/17 18:57:09

网络2 IP与MAC IP地址

IP地址与MAC地址一 1.关系： 网卡有唯一的物理地址：MAC地址，IP是配置在网卡上的逻辑地址。 IP地址、MAC地址是进行网络通信必不可少的 2.MAC地址是物理地址，不可更改，通常与IP地址绑定 3.MAC地址：48位 IP地…...

编程日记 2025/9/18 20:08:31

spark-Core

运行架构核心组件由上图可以看出，对于 Spark 框架有两个核心组件： Driver，Spark 驱动器节点其中Spark 驱动器节点，用于执行 Spark 任务中的 main 方法，负责实际代码的执行工作。 Driver 在 Spark 作业执行时主要…...

编程日记 2025/9/19 14:06:24

前端开发中的问题排查与定位：HTML、CSS、JavaScript（报错的解决方式）

目录 1.html 1. 结构错误调试：标签未正确嵌套 2. 语法问题调试：缺失引号 3. 断点调试：动态生成内容时的 JavaScript 错误 4. 网络调试：资源加载错误 5. 性能调试：页面加载性能总结： 2.CSS 1. 定位…...

编程日记 2025/9/18 17:21:42

VMware Fusion Pro 13 for Mac虚拟机

VMware Fusion Pro 13 for Mac虚拟机文章目录 VMware Fusion Pro 13 for Mac虚拟机一、介绍二、效果下载一、介绍 VMware Fusion Pro for Mac，是一款mac虚拟机软件，跟Parallels Desktop一样，都可以让你的 Mac 同时运行一个或多个不同的操作…...

编程日记 2025/9/19 13:50:17

使用cline(VSCode插件)、continue（IDEA插件）、cherry-studio玩转MCP

安装环境 uv（python） 为什么不用pip？ 使用 uv 时无需进行特定安装。使用 uvx 直接运行。 ⚡️ 比pip快10-100x https://github.com/pypa/pip https://ossinsight.io/analyze/pypa/pip?vsastral-sh%2Fuv#overview 安装 https://github…...

编程日记 2025/9/17 21:25:42

Kotlin FragmentTransaction多容器管理多个fragment

在Activity中管理五个Fragment的切换显示和隐藏，并且希望将这部分逻辑进行封装。之前已经教过他们如何在Kotlin中使用FragmentTransaction进行基本的添加、隐藏、显示和替换操作，现在需要进一步封装这些操作，提高代码的可维护性和复用性。管…...

编程日记 2025/9/17 20:45:39

PyCharm显示主菜单和工具栏

显示主菜单新版 PyCharm 是不显示主菜单的，要想显示主菜单和工具栏，则通过 “视图” → “外观” ，勾选 “在单独的工具栏中显示主菜单” 和 “工具栏” 即可。设置工具栏此时工具栏里并没有什么工具，因此我们需要自定义工具…...

编程日记 2025/9/18 8:06:06

WebView2最低支持.NET frame4.5,win7系统

WebView2最低支持.NET frame什么版本 ‌WebView2 对 .NET Framework 的最低版本要求‌ ‌基础支持范围‌ WebView2 官方支持的 .NET Framework ‌最低版本为 4.5‌，同时兼容 ‌.NET Core 3.0‌ 及以上版本‌18。对于 WPF、WinForms 等桌面应用开发，需确…...

编程日记 2025/9/14 20:46:19

ClickOnce 部署

1、在远程服务器172.16.9.252共享文件文件夹Bluetooth. 2、设置版本自动更新. 3、设置部署 4、设置创建桌面菜单二、远程发布IIS即可...

编程日记 2025/9/19 11:39:53

Kotlin 中集合 Collection 的扩展方法完全指南

Kotlin 中 Collection 的扩展方法完全指南 “代码是最美的诗篇”——本文将带你进入 Kotlin 集合扩展函数的世界，帮助你写出既高效又优雅的代码 🚀 一、引言 🤔 在 Android 开发中，集合（Collection）的操作…...

编程日记 2025/9/18 11:59:02

STM32F407使用ESP8266连接阿里云并上传数据

文章目录前言一、ESP01S介绍1.ESP01S2.MQTT固件烧录3.WIFI连接二、阿里云平台介绍1.创建产品及添加设备2.连接云平台三、数据上报四、命令下发五、完整工程前言在实现OTA功能我们必须学会如何连接云平台，本文会仔细介绍使用STM32F407和ESP8266连接阿里云平台&…...

编程日记 2025/9/16 3:22:53

TorchServe部署模型-index_to_name.json

在TorchServe部署模型时，若要将模型输出结果映射到指定标签（如分类任务的类别名称），需通过index_to_name.json文件定义索引与标签的映射关系，并在打包模型时将其作为额外文件包含。以下是完整流程和命令示例&#xff1…...

编程日记 2025/9/16 17:55:48

每日一题——BMN3 小红炸砖块

“落下”操作只会对y轴有影响，所以注意y轴的变化即可只要给出的坐标有砖块，就遍历查找他的上面是否有砖块，每一层都是这样，直到到没有砖块的那一层； 注意：定义矩阵时要注意，给出的坐标都是大…...

编程日记 2025/9/18 23:24:13

AWS服务器磁盘空间升级到100G后，怎么使其生效？

在AWS（Amazon Web Services）上扩展EBS（Elastic Block Store）卷的大小后，服务器操作系统并不会自动识别新增的空间。要使操作系统识别并使用新增的磁盘空间，您需要进行一些额外的步骤。以下是详细的指导和说…...

编程日记 2025/9/17 13:48:03

AWS弹性容器服务（AWS Elastic Container Service，ECS）概述

李升伟编译标签：AWS | ECS | 容器 | Docker AWS弹性容器服务（AWS Elastic Container Service，ECS）简介 AWS弹性容器服务（ECS）是一项完全托管的容器编排服务，支持运行、管理和扩展容器化应用…...

编程日记 2025/9/18 8:54:02

【消息队列kafka_中间件】一、快速入门分布式消息队列

在当今大数据和分布式系统盛行的时代，消息队列作为一种关键的中间件技术，发挥着举足轻重的作用。其中，Apache Kafka 以其卓越的性能、高可扩展性和强大的功能，成为众多企业构建分布式应用的首选消息队列解决方案。本篇文章将带你深…...

编程日记 2025/9/17 16:24:13

【Axure元件分享】移动端滑动拨盘地区级联选择器

在移动端产品设计中，地区级联选择器（省/市/区）是用户信息录入场景的核心组件，尤其在电商收货地址、政务信息填报等高频业务中直接影响表单转化率。本文将介绍一款基于Axure的三级动态联动机型地区选择器，通过仿真级联滚…...

编程日记 2025/9/19 12:03:18

宁德时代25年校招演绎数字推理SHL测评题库题型及真题分析

非常感谢您对宁德时代的关注。祝贺您通过宁德时代校园招聘的专业面试环节，现邀请您参与完成以下测评。本轮共两份测评，每份测评对您的最终结果都非常重要，请务必在收到测评后48小时内完成!本测评需要进行远程监考，如果您无法或不愿…...

编程日记 2025/9/17 5:21:25

Python-Django+vue宠物服务管理系统功能说明

❥(^_-) 上千个精美定制模板，各类成品Java、Python、PHP、Android毕设项目，欢迎咨询。 ❥(^_-) 程序开发、技术解答、代码讲解、文档，💖文末获取源码+数据库+文档💖 💖软件下载 | 实战案例 💖文章底部二维码，可以联系获取软件下载链接，及项目演示视频。本项目…...

编程日记 2025/9/18 22:44:17

洛谷普及B3691 [语言月赛202212] 狠狠地切割(Easy Version)

题目：[语言月赛202212] 狠狠地切割(Easy Version) 题号：B3691 难度：普及一末尾包含对二分法优化的详细解释题目分析最后一句应该是本题的考查关键，关于筛选算法的时间优化， 但从功能理论上，我找到了…...

编程日记 2025/9/19 0:22:17

FPGA_BD Block Design学习（一）

PS端开发流程详细步骤 1.第一步：打开Vivado软件，创建或打开一个工程。 2.第二步：在Block Design中添加arm核心，并将其配置为IP核。 3.第三步：配置arm核心的外设信息，如DDR接口、时钟频率、UART接口等。 …...

编程日记 2025/9/17 11:42:15

Collection vs Collections：核心区别与面试指南

Collection vs Collections：核心区别与面试指南一、本质区别（核心记忆点） 维度CollectionCollections身份集合框架的根接口操作集合的工具类包位置java.utiljava.util是否可实例化❌ 接口✅ 类（但构造器私有，不可实…...

编程日记 2025/9/9 3:01:06

sqlite3基本语句

创建表 CREATE TABLE student ( id INTEGER PRIMARY KEY, -- 学号，主键 name TEXT NOT NULL, -- 姓名，不能为空 age INTEGER, -- 年龄 gender TEXT -- 性别 ); SQLite常用数据类型主键 …...

编程日记 2025/9/18 22:49:53

jupyter notebook 显示conda虚拟环境

使用 nb_conda_kernels 安装 nb_conda_kernels：这个包可以自动从你的 Conda 环境中发现并列出内核。 conda activate base # 确保你在 base 环境或任何其他环境中安装 conda install nb_conda_kernels显示jupyternotebook当前所在的位置。...

编程日记 2025/9/17 15:12:00

华为海思IC前端中后端(COTXPU)岗位笔试机考题

近期华为海思即将开始IC设计实现实习岗位机考。小编今天给大家分享下华为海思相关机考题目。华为海思2025届校招笔试面试经验分享每年IC秋招笔试其实也是从题库中随机抽出一些题。华为海思2025届校招笔试面试经验分享华为海思机考主要分三个方向，分别是物理方向…...

编程日记 2025/9/18 18:12:28

HarmonyOS NEXT 实现滑动拼图验证码功能

大家好，我是 V 哥。在 Gitee 上看到一个用 Java 实现的 HarmonyOS 滑动拼图验证码功能，已经太老了，鸿蒙开发推荐使用 ArkTS 语言，V 哥来改造一下。以下是基于 ArkTS 的实现方案。由于鸿蒙系统的特性差异，这里提供核…...

编程日记 2025/9/19 4:33:35

【XML基础-1】深入理解XML：介绍、语法规则与实际应用

XML（可扩展标记语言）作为数据表示和交换的标准格式，自1998年问世以来已成为现代计算领域不可或缺的一部分。本文将全面介绍XML的基础概念、详细语法规则以及它在各领域中的实际应用。 1. 什么是XML？ XML（eXtensible …...

编程日记 2025/9/18 5:10:29

STM32 HAL库扩大USB CDC的输入缓冲区

STM32 HAL库，使用USB, 扩大输入暂存区的方法使用STM32的USB通讯CubeMX建立配置Serial Wire时钟配置USB配置时钟频率设置代码编写运行效果总结使用STM32的USB通讯 STM32可以不用使用串口转换直接和USB通讯。这给串口调试提供了极大的方便。编程，我使用了STM32CubeIDE编程。这…...

编程日记 2025/9/16 1:10:57

迭代器模式深度解析与实战案例

一、模式定义迭代器模式（Iterator Pattern） 是一种行为设计模式，提供一种方法顺序访问聚合对象的元素，无需暴露其底层表示。核心思想是将遍历逻辑从聚合对象中分离，实现遍历与存储的解耦。二、核心组件组件作用…...

编程日记 2025/9/18 19:42:38

Kotlin协程实用模版合集

目录 ✅ Kotlin 协程实用模板合集（适合 Android 项目） 📦 1. 基础挂起函数封装（Repository 层） ⚙️ 2. ViewModel 中使用协程状态处理 ⏱️ 3. 带超时控制的挂起操作 🤝 4. 并发请求合并&#xff0…...

编程日记 2025/9/19 13:18:09

基于Flask的Windows事件ID查询系统开发实践

基于Flask的Windows事件ID查询系统开发实践一、项目背景与功能概述 Windows操作系统的事件日志系统记录了数百种不同的事件ID，每个ID对应特定的系统事件。本文介绍如何构建一个基于Web的事件ID查询系统，主要实现以下功能： 数据可视化展示…...

编程日记 2025/9/15 19:15:52

机器人编程基础---C语言中的运算符

C语言中的运算符算术运算符关系运算符逻辑运算符位运算符C语言提供了多种运算符来执行不同的操作。算术运算符 + 加法- 减法* 乘法/ 除法% 取模（求余）++ 自增-- 自减int a = 10, b = 5; int sum = a + b;...

编程日记 2025/9/18 6:15:47

设计模式之迭代器模式：遍历的艺术与实现

引言迭代器模式（Iterator Pattern）是一种行为型设计模式，它提供了一种顺序访问聚合对象中各个元素的方法，而又不暴露其底层实现。迭代器模式将遍历逻辑与聚合对象解耦，使得我们可以用统一的方式处理不同的集合结构。…...

编程日记 2025/9/16 6:32:34

React七案例中

代码下载地图找房模块顶部导航栏封装NavHeader组件实现城市选择，地图找房页面的复用，在 components 目录中创建组件 NavHeader，把之前城市列表写过的样式复制到 NavHeader.scss 下，在该组件中封装 antd-mobile 组件库中的 N…...

编程日记 2025/9/19 4:19:04

消息中间件篇——RabbitMQ，Kafka

RabbitMQ 如何保证消息不丢失？ 生产者确认机制消息持久化消费者确认机制 RabbitMQ如何保证消息不丢失？ RabbitMQ的重复消费问题如何解决？ RabbitMQ中死信交换机（RabbitMQ延迟队列有了解过吗？） 延迟队列…...

编程日记 2025/9/16 19:31:07

HOW - 实现 useClickOutside 或者 useClickAway

场景在开发过程中经常遇到需要点击除某div范围之外的区域触发回调：比如点击 dialog 外部区域关闭。手动实现 import { useEffect } from "react"/*** A custom hook to detect clicks outside a specified element.* param ref - A React ref object…...

编程日记 2025/9/16 22:10:36

青少年编程考试 CCF GESP Python七级认证真题 2025年3月

Python 七级 2025 年 03 月题号 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 答案 B C A B B A A B C A B B A B A 1 单选题（每题 2 分，共 30 分） 第 1 题下列哪个选项是python中的关键字？ A. function B. class C. method D. object…...

编程日记 2025/9/17 10:51:22

兆讯MH2103系列pin to pin替代STM32F103，并且性能超越

MH2103 是一款高性能的 32 位微控制器，由兆讯恒达推出，主要用于替代 STM32F103 系列产品。以下是关于 MH2103 芯片的详细介绍： 技术规格内核与主频： 采用高性能 32 位 Cortex-M3 内核，最高工作频率可达 216 MHz。支…...

编程日记 2025/9/18 4:50:21

h5使用dsBridge与原生app通信--桥方法

dsBridge是一个轻量级的 JS 和原生 App 的通信桥梁库,使用起来比原生方便不少支持： 1.H5 调用 Native 方法（JS → Native） 2.Native 调用 H5 方法（Native → JS） 3.支持参数传递和异步回调 4.支持 Android、iOS、以…...

编程日记 2025/9/10 0:44:43

package.json配置项积累

peerDependencies 用途：peerDependencies 主要用于声明一个包在其宿主项目中期望安装的依赖版本。它通常用于确保插件或库与特定版本的其他库兼容。行为： 在 npm v7之前，如果宿主项目未安装 peerDependencies 中列出的依赖，则不…...

编程日记 2025/9/18 13:35:47

Python安装软件包报错 fatal error: Python.h: No such file or directory

Python安装软件包报错 fatal error: Python.h: No such file or directory Failed to import transformers.integrations.integration_utils because of the following error (look up to see its traceback): Failed to import transformers.modeling_utils because of the f…...

编程日记 2025/9/14 1:19:38

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

一、单元测试是什么？

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

特点：

快速入门：

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

使用步骤：

四、QUnit：轻量简单的选择 1

示例（需HTML页面）：

五、横向对比：该选哪个？

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

脚注

相关文章：

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

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

四、QUnit：轻量简单的选择 ¹

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