Jest 设置与基础测试
安装 Jest，编写 describe/it/expect 测试，使用 toBe 和 toEqual 等匹配器，并在开发期间以监视模式运行测试。
Jest 设置与基础测试 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。
为什么要测试前端代码
代码变更时，测试可以捕获回归问题。测试能够记录预期行为，让您有信心进行重构。没有测试，每次变更都像是在赌某些其他功能没有被破坏。
安装 Jest
对于 Vite + React 项目，请使用 Vitest（原生支持 Vite 且兼容 Jest 的测试运行器）。对于其他配置，请安装 Jest，并使用 babel-jest 或 ts-jest 支持 TypeScript。
# Vitest (preferred for Vite projects):
npm install -D vitest
# Or Jest with TypeScript:
npm install -D jest @types/jest ts-jest测试文件命名
将测试文件放在源文件旁边：Button.test.ts、utils.spec.ts。也可以放在 __tests__/ 文件夹中。Jest 会查找匹配 *.test.* 或 *.spec.* 的文件。
describe、it、expect
使用 describe 块（分组）和 it/test 函数（单个测试）来组织测试。使用 expect 进行断言。
import { add, formatCurrency } from './utils';
describe('Math utils', () => {
it('adds two numbers', () => {
expect(add(2, 3)).toBe(5);
});
it('handles negative numbers', () => {
expect(add(-1, 1)).toBe(0);
});
});
describe('Currency formatting', () => {
it('formats USD', () => {
expect(formatCurrency(1234.5, 'USD')).toBe('$1,234.50');
});
});常用匹配器
Jest 提供了许多匹配器：toBe（严格相等）、toEqual（深度相等）、toContain、toHaveLength、toBeNull、toBeTruthy、toBeFalsy、toThrow、toBeGreaterThan。
expect([1,2,3]).toHaveLength(3);
expect({ a: 1, b: 2 }).toEqual({ a: 1, b: 2 });
expect('hello world').toContain('world');
expect(() => { throw new Error('boom'); }).toThrow('boom');
expect(null).toBeNull();
expect(true).toBeTruthy();测试异步代码
返回 Promise，或在测试中使用 async/await。Jest 会在 Promise 解析后，才将测试标记为完成。
it('fetches user data', async () => {
const user = await fetchUser(1);
expect(user.name).toBe('Alice');
});
// Or with resolves/rejects matchers:
it('resolves with user', () => {
return expect(fetchUser(1)).resolves.toMatchObject({ name: 'Alice' });
});beforeEach 和 afterEach
在每次测试前后运行设置和清理操作，以保持测试相互隔离。
describe('User service', () => {
beforeEach(() => {
db.seed();
});
afterEach(() => {
db.clear();
});
it('creates a user', async () => {
const user = await userService.create({ name: 'Alice' });
expect(user.id).toBeDefined();
});
});运行测试
npm test 会运行所有测试。npm test -- --watch（Jest）或处于监视模式的 vitest 会在文件变更时重新运行测试。Vitest 的界面（vitest --ui）提供基于浏览器的测试运行器。
测试覆盖率
jest --coverage（或 vitest run --coverage）会生成覆盖率报告，显示哪些代码行经过了测试。70% 以上的覆盖率是团队常见的目标。100% 的覆盖率并不意味着没有错误。
编写易于测试的代码
纯函数（没有副作用）很容易测试。保持函数简短且专注。注入依赖，而不是直接导入它们——这样便于替换测试替身。
测试隔离
每个测试都应完全独立。依赖彼此副作用的测试很脆弱。避免在测试之间共享可变状态。在 afterEach 中重置所有模拟。
快速检查
哪个 Jest 匹配器可以检查两个对象的深度相等？
回顾：Jest 基础
describe 用于将测试分组。it/test 用于定义单个测试。expect 加匹配器用于断言结果。toBe 用于基本类型。toEqual 用于对象/数组。异步测试使用 async/await，或返回 Promise。beforeEach/afterEach 用于隔离。覆盖率报告显示哪些代码行经过了测试。纯函数最容易测试。
常见问题解答
「Jest 设置与基础测试」课时是免费的吗？
是的 — 「Jest 设置与基础测试」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。
「Jest 设置与基础测试」这节课中我会学到什么？
安装 Jest，编写 describe/it/expect 测试，使用 toBe 和 toEqual 等匹配器，并在开发期间以监视模式运行测试。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Frontend Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「Jest 设置与基础测试」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Frontend Academy 课中编写并运行代码吗？
能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。