上海手机网站案例网站建设咨询服务合同
红宝书第三十四讲：零基础学会单元测试框架：Jest、Mocha、QUnit
资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲
一、单元测试是什么？
就像给代码做“体检”，帮你检查每个函数是否能独立正常运行 1。
- 场景举例：写了一个计算器函数，单元测试能自动验证加法是否正确
- 核心价值：快速发现BUG，避免手动逐个测试
二、Jest：开箱即用的全能选手 12
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：灵活的拼装工具 2
需要搭配其他库（如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：轻量简单的选择 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
脚注
《JavaScript高级程序设计（第5版）》说明QUnit简单易用且与jQuery解耦 ↩︎ ↩︎ ↩︎
《JavaScript高级程序设计（第5版）》指出Jest支持函数模拟和并行测试，Mocha提供可配置性 ↩︎ ↩︎