Jest - JavaScript 测试框架完整指南 #

简介 #

Jest 是由 Facebook（现 Meta）开发的 JavaScript 测试框架，专注于简洁性和性能。它是一个"零配置"的测试平台，开箱即用，无需复杂设置即可开始编写测试。

核心特点 #

  • 零配置 - 开箱即用，无需复杂配置
  • 快照测试 - 革命性的 UI 测试方式
  • 并行执行 - 自动并行运行测试
  • 内置覆盖率 - 无需额外工具
  • 优秀的 Watch 模式 - 智能监听文件变化
  • 强大的 Mock 功能 - 内置 Mock 支持

学习路径 #

text 
入门阶段
├── Jest 简介
├── 安装与配置
├── 基础测试
├── 断言匹配器
└── 测试生命周期

进阶阶段
├── 异步测试
├── Mock 功能
├── 快照测试
├── DOM 测试
└── 代码覆盖率

高级阶段
├── 高级配置
├── 性能优化
├── 调试技巧
└── 扩展与插件

实战阶段
├── React 测试
├── Vue 测试
├── Node.js 测试
└── 最佳实践

文档目录 #

入门篇 #

文档 描述
Jest 简介 了解 Jest 的历史、特点、核心概念
安装与配置 Jest 的安装方法、配置选项、TypeScript 支持
基础测试 测试结构、组织方式、命名规范
断言匹配器 各种断言方法，包括相等、布尔、数字、字符串等
测试生命周期 beforeAll、afterAll、beforeEach、afterEach 钩子

进阶篇 #

文档 描述
异步测试 回调、Promise、async/await、定时器测试
Mock 功能 函数 Mock、模块 Mock、Spy 监视
快照测试 UI 组件快照、快照更新、内联快照
DOM 测试 DOM 查询、用户交互、事件模拟
代码覆盖率 覆盖率收集、报告分析、阈值设置

高级篇 #

文档 描述
高级配置 预设、全局设置、自定义匹配器、多项目配置
性能优化 并行执行、缓存优化、增量测试
调试技巧 断点调试、日志输出、错误分析
扩展与插件 自定义匹配器、报告器、运行器

实战篇 #

文档 描述
React 测试 React 组件测试、Hooks 测试、Context 测试
Vue 测试 Vue 组件测试、Vuex/Pinia 测试、Composition API
Node.js 测试 Express/Koa 测试、数据库测试、API 测试
最佳实践 测试原则、代码组织、命名规范、CI/CD 集成

快速开始 #

安装 #

bash 
npm install --save-dev jest

编写测试 #

javascript 
// sum.js
function sum(a, b) {
  return a + b;
}
module.exports = sum;

// sum.test.js
const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

运行测试 #

bash 
npx jest

核心概念 #

测试结构 #

javascript 
describe('Calculator', () => {
  beforeAll(() => {
    // 所有测试之前执行一次
  });

  beforeEach(() => {
    // 每个测试之前执行
  });

  test('adds numbers', () => {
    // 单个测试
  });

  afterEach(() => {
    // 每个测试之后执行
  });

  afterAll(() => {
    // 所有测试之后执行一次
  });
});

断言 #

javascript 
test('example', () => {
  expect(1 + 1).toBe(2);
  expect(value).toEqual({ a: 1 });
  expect(value).toBeTruthy();
  expect(value).toContain('item');
});

Mock #

javascript 
// 函数 Mock
const mockFn = jest.fn();
mockFn.mockReturnValue(42);

// 模块 Mock
jest.mock('./axios');

常用命令 #

bash 
# 运行所有测试
jest

# 监听模式
jest --watch

# 生成覆盖率
jest --coverage

# 更新快照
jest --updateSnapshot

# 只运行修改的测试
jest --onlyChanged

# 清除缓存
jest --clearCache

适用场景 #

场景 描述
单元测试 测试独立的函数或模块
集成测试 测试多个模块协作
组件测试 测试 React/Vue 组件
快照测试 确保 UI 不会意外改变
API 测试 测试后端 API 端点

为什么选择 Jest？ #

与其他框架对比 #

特性 Jest Mocha Vitest
零配置 ✅ ❌ ✅
断言库 ✅ 内置 ❌ 需要 chai ✅ 内置
Mock 功能 ✅ 内置 ❌ 需要 sinon ✅ 内置
快照测试 ✅ 内置 ❌ 不支持 ✅ 内置
代码覆盖率 ✅ 内置 ❌ 需要额外工具 ✅ 内置
生态系统 ✅ 成熟 ✅ 成熟 🔄 发展中

开始学习 #

准备好开始学习 Jest 了吗？从 Jest 简介 开始你的测试之旅！

最后更新：2026-03-28