单元测试的原则是「隔离 + 快」：测一个纯函数就只测它的输入输出，不碰网络、不碰 DOM、不碰数据库——外部依赖一律 mock 掉。前端工具链是 Vitest/Jest（ runner + 断言 + mock 三合一），配合 Vue Test Utils 或 React Testing Library 测组件。Vitest 与 Vite 同款配置，开箱即用、速度快，已是新项目首选。
写它最大的收益不是「找 bug」而是「敢重构」：有覆盖的代码你才敢放心改实现。实践上不必追覆盖率数字，优先覆盖纯工具函数、复杂状态逻辑与边界条件；组件层只测交互行为（点击、输入、断言渲染结果），不测内部实现细节，否则改两行样式就一堆用例失败，测试反而成了负担。测试文件与源码就近放置并统一命名，配合流水线上的一条测试命令，就能守住每次合并的质量底线。
// sum.test.js —— Vitest 风格（API 与 Jest 几乎一致） import { describe, it, expect, vi } from 'vitest'; import { calcTotal } from './cart'; describe('calcTotal', () => { it('普通求和', () => { expect(calcTotal([10, 20])).toBe(30); }); it('空数组返回 0', () => { expect(calcTotal([])).toBe(0); }); it('折扣时会调用外部接口（被 mock）', () => { const fetchRate = vi.fn(() => 0.9); // 假装远程折扣率 expect(calcTotal([100], fetchRate)).toBe(90); expect(fetchRate).toHaveBeenCalled(); }); }); // 命令：npx vitest 监视模式 // npx vitest run 单次跑全部（CI 用）