怎样进行JavaScript单元测试【教程】_技术教程

JavaScript单元测试应首选Jest，因其开箱即用、内置异步/定时器/模块模拟等功能；避免Mocha+Chai+Sinon组合，因配置复杂、兼容性差、缺
乏快照和覆盖率支持；初始化仅需三步：安装Jest、运行npx jest --init配置jsdom环境与setup文件、修改package.json test脚本。

JavaScript 单元测试不是“要不要写”，而是“怎么快速跑通第一个测试并持续维护”。用 Jest 是目前最省心的选择——它开箱即用，不需要你手动配 babel 或 jsdom，连异步、定时器、模块模拟都内置好了。

为什么别从 Mocha + Chai + Sinon 组合起步

这套组合曾经是主流，但现在会卡在几个实际问题上：

Mocha 本身不处理模块解析，import 语法默认报错，得额外加 esm 或配置 babel-register
Chai 的 expect 不支持 Jest 那种链式异步断言（比如 .resolves.toBe(42)），写 Promise 测试容易嵌套或漏 done()
Sinon 的 stub 和 spy 行为与 Jest 的 jest.fn() / mockImplementation() 不兼容，后期迁移到 Jest 时所有 mock 得重写
没内置快照测试、覆盖率报告、并发测试隔离，每项都要自己搭插件

初始化 Jest 只需三步（npm 项目）

假设你已有 package.json，且代码在 src/ 下：

npm install --save-dev jest
npx jest --init

回答几个问题后，会生成 jest.config.js。重点确认这两项：

testEnvironment: 'jsdom' —— 浏览器环境测试必需，否则 document 报错
setupFilesAfterEnv: ['/src/setupTests.js'] —— 在这里加全局 mock，比如 jest.mock('axios')

然后把 package.json 的 test 脚本改成："test": "jest"，再加一个 --watch 开发时更顺手。

写第一个测试：别测 console.log，测函数返回值

新手常把测试写成“调一下函数看有没有报错”，这不算单元测试。真正要验证的是：输入确定，输出确定，副作用可控。

比如有这样一个工具函数：

export const add = (a, b) => a + b;

对应测试文件 src/add.test.js：

import { add } from './add';

test('add returns sum of two numbers', () => {
  expect(add(2, 3)).toBe(5);
  expect(add(-1, 1)).toBe(0);
});

注意点：

文件名必须含 .test.js 或 .spec.js，Jest 才会自动识别
test 和 expect 全局可用，不用 import；但被测模块必须显式 import
不要用 console.log 调试测试——改用 jest.debug() 或直接在 IDE 里打断点（VS Code + Jest 插件支持单测调试）

模拟依赖：axios、localStorage、第三方 SDK 怎么 fake

真实请求或 DOM 操作会让测试变慢、不稳定、难复现。Jest 提供了统一的 jest.mock() API：

模拟 axios 返回固定数据：

jest.mock('axios');
import axios from 'axios';
axios.get.mockResolvedValue({ data: { id: 1 } });

模拟 localStorage（jsdom 默认提供，但方法是空实现）：

const mockStorage = {};
global.localStorage = {
  getItem: jest.fn((k) => mockStorage[k]),
  setItem: jest.fn((k, v) => { mockStorage[k] = v; }),
};

模拟整个模块导出：

jest.mock('./api', () => ({
  fetchUser: jest.fn().mockResolvedValue({ name: 'Alice' })
}));

关键提醒：所有 mock 必须在 import 被测模块之前执行，否则模块已加载，mock 失效。

最难的不是写第一个测试，而是让测试在 CI 里稳定运行、不因环境差异失败——比如时区、随机数、网络延迟。这些得靠 jest.useFakeTimers()、jest.setSystemTime()、Math.random = jest.fn(() => 0.5) 这类控制手段，而不是跳过测试。