两周内掌握JS单元测试只需四步：选Vitest工具、从纯函数入手写首个测试、隔离副作用、进阶测组件与异步逻辑。
学 JS 单元测试，不用从零啃文档，按这四步走，两周内就能写、能跑、能维护真实项目的测试。
选对工具，别在配置上卡三天
新项目直接用 Vitest：安装快（npm install -D vitest）、默认支持 ES 模块和 TypeScript、VS Code 点一下就能断点调试。老项目若已重度依赖 Jest 生态（比如用了大量 jest-circus 自定义 runner 或复杂 ts-jest 配置），可继续用 Jest，但新手起步不推荐——Mocha+Chai+Sinon 组合更不建议，光配 babel 和 jsdom 就容易出错，mock 行为还不兼容后续迁移。
从一个函数开始，写第一个真正有效的测试
别一上来测组件或 API 调用。找一个纯逻辑函数，比如：
export const formatDate = (date, format) => { /* 返回格式化字符串 */ };
对应写 formatDate.test.js：
- 文件名必须含
.test.js或.spec.js，Vitest/Jest 才自动识别 - 用
import { formatDate } from './formatDate'显式引入被测模块 - 用
expect(formatDate(new Date('2023-01-01'), 'YYYY-MM-DD')).toBe('2023-01-01')断言结果 - 至少覆盖正常输入、边界值（如 null、空字符串）、错误输入（如非法日期）
让测试稳住的关键：隔离副作用
函数里如果调了 fetch、localStorage、Date.now() 或直接改了传入对象，测试就会不可靠。解决方法是：
- 把外部依赖变成参数，例如
fetchUser(id, client = fetch) - 用
vi.mock('./api.js')（Vitest）或jest.mock('axios')（Jest）替换整个模块 - 用
vi.fn().mockReturnValue(...)控制 mock 函数返回值和调用记录 - 测试完加
vi.clearAllMocks()或jest.clearAllMocks()，避免测试间状态污染
进阶但实用：测组件和异步逻辑
Vue/React 项目中，重点不是“渲染出来没”，而是“行为是否受控”：
- 用
shallowMount（Vue Test Utils）或render（React Testing Library）挂载组件 - 测试 props 变化是否触发对应更新：
wrapper.setProps({ count: 5 })→expect(wrapper.text()).toContain('5') - 测试事件是否正确发出：
await wrapper.find('button').trigger('click')→expect(wrapper.emitted('submit')).toBeTruthy() - 异步请求测试，先 mock 接口返回，再
await waitFor(() => expect(...).toBeInTheDocument())等待 DOM 更新
