Vitest 完整指南：让 Vite 驱动的前端测试快 10 倍

Vitest 完整指南让 Vite 驱动的前端测试快 10 倍【免费下载链接】vitestNext generation testing framework powered by Vite.项目地址: https://gitcode.com/GitHub_Trending/vi/vitest你有没有这种经历本地改一行代码测试框架要冷启动好几秒才出结果CI 上跑一遍全量测试队列排得比开发时间还长。慢的根子在于传统测试工具自己维护一套转换管道和应用构建各走各的配置冗余、启动迟钝。Vitest 就是为此而生的下一代测试框架它直接复用 Vite 的转换能力和插件生态让你用熟悉的 Vite 配置跑单元测试、集成测试和基准测试。接下来我会带你走完一遍真实项目里的学习路径从接入项目到跑通第一个用例再到覆盖典型业务场景、规模化调优和排障。环境要求Vite ≥ 6.4.0、Node ≥ 22.12.0。本文基于 Vitest 5.0.0-rc.3不同版本细节可能略有差异。一、接入项目到跑通第一个用例问题手上有个 Vite 项目怎么让测试跑起来解法装一个依赖写一个用例加一条脚本三步就能出结果。# npm / pnpm / yarn 任选其一 npm install -D vitestexport function sum(a, b) { return a b }import { expect, test } from vitest import { sum } from ./sum.js test(adds 1 2 to equal 3, () { expect(sum(1, 2)).toBe(3) }){ scripts: { test: vitest } }运行npm run test你会看到✓ src/sum.test.js (1) ✓ adds 1 2 to equal 3 Test Files 1 passed (1) Tests 1 passed (1)两条默认规则要记住测试文件名必须包含.test.或.spec.默认匹配**/*.{test,spec}.?(c|m)[jt]s?(x)本地默认进 watch 模式改文件自动重跑CI 或非交互终端会自动退化成单次运行如果项目已有vite.config.*Vitest 会直接读取现有插件和别名开箱即用也可以单独放一份vitest.config.ts只给测试用。vitest run # 只跑一次不进 watchCI 常用 vitest sum # 只跑文件名含 sum 的用例 npx vitest --help # 查看全部命令命令速查命令作用典型场景vitest开发模式默认 watch本地持续开发vitest run单次运行不监听CI、提交前校验vitest related src/a.ts只跑覆盖了指定源文件的测试配合 lint-stagedvitest list列出匹配的用例不执行写用例前先摸清结构官方文档docs/guide/cli.md二、写业务测试断言、Mock 与快照问题真实业务不是加法器要测异步、要隔离依赖、要防回归怎么写才稳解法Vitest 的断言 API 与 Jest 高度兼容再配上vi命名空间就能覆盖绝大多数场景。import { describe, test, expect, vi, beforeEach } from vitest import { fetchUser } from ./api // 1. 组织用例 describe(user API, () { beforeEach(() { vi.useFakeTimers() // 假定时器可控时间推进 }) // 2. 模拟外部依赖隔离网络 test(returns user by id, async () { global.fetch vi.fn(() Promise.resolve({ json: () Promise.resolve({ name: Alice }) })) const user await fetchUser(1) expect(user.name).toBe(Alice) expect(fetch).toHaveBeenCalledTimes(1) }) // 3. 快照防止意外回归 test(snapshot of list, () { expect([1, 2, 3]).toMatchSnapshot() }) })常用能力对照场景写法说明模块级 Mockvi.mock(./module)整个模块替换成假实现函数级 Mockvi.spyOn(obj, method)只替换某个方法异步断言await expect(p).resolves.toBe(...)等待 Promise 结果类型断言expectTypeOf(x).toBeNumber()编译期校验类型想让全局直接能用describe/test/expect而不必逐个 import可开启globals: true。但更推荐显式 importIDE 补全更稳。Mock 体系详解docs/guide/mocking.md、断言 APIdocs/api/expect.md三、覆盖率快速开启方法问题CI 怎么知道你的测试到底够不够而不是只信全绿解法装一个覆盖率提供器跑--coverage报告落到coverage/目录。默认用v8提供器速度快、免预编译。npm install -D vitest/coverage-v8vitest run --coverageimport { defineConfig } from vitest/config export default defineConfig({ test: { coverage: { provider: v8, // 或 istanbul reporter: [text, html], // 控制台 可点开看的网页 include: [src/**/*.{ts,tsx}], exclude: [src/**/*.d.ts], }, }, })v8 提供器自 3.2.0 起采用 AST 感知的重映射报告精度已接近 Istanbul同时保留速度优势。如果运行环境不是 V8如 Firefox、Bun、Cloudflare Workers再换istanbul。配置项全表docs/config/coverage.md四、项目变大之后性能调优与并行问题测试文件攒到几百个全量跑越来越慢怎么提速解法先读报告里的Duration行定位瓶颈再对症下药。Vitest 会把耗时拆成几个阶段Duration 3.76s (environment 79%, import 13%, transform 6%, tests 1%)environment 高大量文件在起jsdom/happy-dom考虑能跑node环境的就别上 DOM 环境import 高文件都在 import 同一批 barrel 文件每个文件都重复求值共享依赖tests 高慢在用例本身改配置帮助不大得优化测试逻辑两个见效最快的开关import { defineConfig } from vitest/config export default defineConfig({ test: { fileParallelism: true, // 默认开多个文件并行forks/threads 池 isolate: false, // 状态隔离良好的 node 项目可关省掉每文件初始化成本 maxConcurrency: 8, // 单个文件内并发测试上限配合 test.concurrent }, })并行分两层文件级并行默认开每个文件独立环境互不干扰和文件内测试并发默认串行可用test.concurrent或describe.concurrent让相互独立的异步用例并跑受maxConcurrency约束。同步用例并跑没意义只有在等待网络、定时器、文件 IO的场景才受益。调优详解docs/guide/improving-performance.md、并行机制docs/guide/parallelism.md五、常见报错排查问题一跑就红到底卡在哪解法下面几个是最频繁的坑对照处理。报错现象根因处理Cannot find module ./xxx路径拼错或依赖了tsconfig.json的baseUrlVite 默认不读 tsconfig 路径改用相对路径或装vite-tsconfig-pathsDOM 相关代码在 Node 下报错没配浏览器/DOM 环境设environment: jsdom或happy-domFailed to Terminate Workerpool: threads下用了fetch换回默认的pool: forks第三方 ESM 包加载异常没做依赖内联配置server.deps.inline: [包名]排障文档汇总了更多案例建议先查这里再动手docs/guide/common-errors.md下一步现在你就可以在现有 Vite 项目里执行npm install -D vitest照第一节把第一个用例跑绿然后按覆盖率那一节给 CI 加上vitest run --coverage。本文示例基于Vitest 5.0.0-rc.3命令与配置以你本地版本的npx vitest --help为准遇到版本差异参考发布说明docs/blog/。【免费下载链接】vitestNext generation testing framework powered by Vite.项目地址: https://gitcode.com/GitHub_Trending/vi/vitest创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考