目录1. 开篇：测试等得想睡觉的痛苦2. Vitest vs Jest：性能对比与特性差异3. Vitest核心优势：与Vite原生集成4. 实战：编写单元测试5. 实战：组件测试6. Mock与Spy技巧7. 测试覆盖率配置8. 文末三件套开篇：测试等得想睡觉的痛苦你是否遇到过Jest跑测试等得想睡觉的痛苦场景？项目一大，跑个测试套件动不动就10分钟起步，严重影响开发效率。网上搜到的测试方案要么配置复杂，要么与Vite项目集成困难。本文将从原理到实战，给出一个生产级解决方案，包含完整代码和避坑指南。💡效率技巧：测试速度每提升1倍，开发者的幸福感提升10倍——这不是玄学，是心理学。Vitest vs Jest：性能对比与特性差异性能对比┌─────────────────────────────────────────────────────────────┐ │测试框架性能对比│ ├──────────────┬──────────────┬──────────────┬────────────────┤ │框架│启动时间│执行时间│内存占用│ ├──────────────┼──────────────┼──────────────┼────────────────┤ │Jest│8-12s│10分钟│1.2GB│ ├──────────────┼──────────────┼──────────────┼────────────────┤ │Vitest│1-2s│3分钟│400MB│ ├──────────────┼──────────────┼──────────────┼────────────────┤ │提升幅度│6-10倍│3倍+│3倍│ └──────────────┴──────────────┴──────────────┴────────────────┘核心特性对比特性JestVitestESM支持需额外配置原生支持TypeScript需ts-jest原生支持Vite集成需适配零配置热更新(HMR)❌ 不支持✅ 支持并行执行进程级线程级浏览器模式jsdom真实浏览器⚠️避坑警告：Jest的ESM支持一直是个老大难问题，各种transformIgnorePatterns配置让人头大。Vitest直接原生支持，省下的时间够你多喝几杯咖啡。Vitest核心优势：与Vite原生集成架构图┌─────────────────────────────────────────────────────────────┐ │Vite生态│ ├─────────────────────────────────────────────────────────────┤ ││ │┌─────────────┐┌─────────────┐┌─────────────┐│ ││开发服务器││构建工具││测试框架││ ││ViteDev│◄──►│ViteBuild│◄──►│Vitest││ │└─────────────┘└─────────────┘└─────────────┘│ │││n