JavaScript单元测试教程详解

JavaScript单元测试的核心早已超越“是否必要”的讨论，直击工具选型、实操避坑与工程落地三大痛点：新项目推荐轻量高效的Vitest（尤其适配Vite生态，零配置、启动快、ESM原生友好），旧大型项目可沿用Jest；关键在于规范文件命名、严谨处理异步逻辑、善用vi.mock()/vi.stubGlobal()等安全mock机制避免污染，并针对CI环境精准配置--run标志、Node版本及DOM环境——真正决定测试成败的，是这些让mock不泄漏、异步不超时、错误可定位的细节。

JavaScript 单元测试不是“要不要做”的问题，而是“用什么工具、测什么、怎么避免写完测不了”的实操问题。主流选择是 Vitest（推荐）或 Jest，二者都能跑在 Node 或浏览器环境，但 Vitest 启动快、API 更贴近原生 ES 模块，且与 Vite 项目零配置打通。

选 Vitest 还是 Jest？看你的项目类型

如果是新项目、尤其基于 Vite 构建，直接用 Vitest；它默认支持 import.meta.env、top-level await 和原生 .ts，不用额外配 ts-jest。Jest 更适合已有大型 React/Next.js 项目（尤其用了大量 jest.mock() 手动模拟的场景），但启动慢、配置分散、ESM 支持仍需调教。

• Vitest 的 test() 和 expect() 行为与 Jest 高度兼容，迁移成本低
• Jest 的 jest.fn() 和 jest.mock() 语义更重，Vitest 用 vi.fn() 和 vi.mock()，API 几乎一致
• 若项目含大量 Web API 调用（如 fetch、localStorage），Vitest 的 vi.stubGlobal() 和 vi.stubEnv() 更轻量

怎样写一个可运行的 test 文件？

不需要入口文件或全局 setup。新建 src/utils/formatDate.test.ts，内容如下：

import { formatDate } from './formatDate';

test('returns YYYY-MM-DD for Date object', () => {
  const date = new Date('2023-10-05T14:30:00Z');
  expect(formatDate(date)).toBe('2023-10-05');
});

test('handles invalid date gracefully', () => {
  expect(formatDate(null as any)).toBe('');
});

关键点：

• 文件名必须含 .test. 或 .spec.（如 utils.test.ts）
• 测试函数里不能用 async/await 除非函数本身返回 Promise，否则 test() 不会等它结束
• expect().toBe() 是严格相等（===），对象比较要用 toEqual()

mock 外部依赖时最常踩的坑

比如 formatDate 内部调了 Intl.DateTimeFormat，你想控制它的输出。别直接改 Intl 全局对象 —— Vitest 提供更安全的方式：

• 用 vi.mock('module-name') 模拟整个模块（适用于第三方包）
• 用 vi.stubGlobal('Intl', { DateTimeFormat: mockConstructor }) 替换全局构造器
• 绝对不要在 beforeEach 里反复 vi.restoreAllMocks()，Vitest 默认每个 test 隔离，自动清理
• 如果 mock 了 fetch，记得在 test 结束后调用 vi.unstubAllGlobals()，否则可能影响下一个 test

CI 里跑不起来？检查这三个地方

Vitest 在 CI（如 GitHub Actions）失败，90% 出在环境假设上：

• 没加 --run 标志：本地 vitest 是 watch 模式，CI 必须显式加 vitest --run
• Node 版本太低：Vitest v2+ 要求 Node 18+，检查 .node-version 或 CI 的 setup-node 步骤
• 测试里用了 DOM API（如 document.createElement）但没启用 DOM 环境：在 vitest.config.ts 加 environment: 'jsdom'（或 'happy-dom'）

真实项目里，最难的从来不是“怎么写断言”，而是让 mock 不泄漏、让异步不超时、让 CI 报错信息能准确定位到哪一行 —— 这些细节比语法更重要。

到这里，我们也就讲完了《JavaScript单元测试教程详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！