vitest 是 vue 官方推荐、专为 vite 生态设计的现代单元测试框架，启动快、配置轻、typescript 原生支持且 api 与 jest 高度兼容；它共享 vite 转换管道，实现开发、构建、测试三者一致。
Vitest 是 Vue 官方推荐、专为 Vite 生态设计的现代单元测试框架，启动快、配置轻、TypeScript 原生支持，且 API 与 Jest 高度兼容。它不只是“更快的 Jest”，而是从底层与 Vite 共享转换管道，避免重复配置，真正实现开发、构建、测试三者一致。
如何快速上手 Vitest
安装只需一条命令：
- npm install -D vitest（或使用 pnpm/yarn）
- 在 package.json 中添加脚本："test": "vitest"
- 测试文件命名建议为 *.test.ts 或 *.spec.ts，通常放在 src/__tests__/ 或 tests/unit/ 目录下
- 无需额外配置即可运行基础测试；如需扩展能力（如全局 API、jsdom 环境），可在 vite.config.ts 的 test 字段中声明
Vue 组件测试关键操作
搭配 @vue/test-utils，可完成真实组件挂载与交互验证：
- 用 mount 渲染组件，传入 props、slots、emitted 等选项
- 用 find 或 findAll 查询 DOM 元素，例如 wrapper.find('button')
- 触发事件：如 await wrapper.trigger('click')，注意异步操作需 await
- 断言输出：检查类名、文本、 emitted 事件、props 变化等，例如 expect(wrapper.emitted()).toHaveProperty('submit')
覆盖率分析配置与解读
Vitest 内置基于 V8 的覆盖率工具（c8），无需额外插件即可生成多格式报告：
- 在 vite.config.ts 中启用：
coverage: { reporter: ['text', 'html', 'json'] } - 运行 npm run test -- --coverage 生成报告，默认输出到 coverage/ 目录
- HTML 报告打开 coverage/lcov-report/index.html，可逐文件查看语句、分支、函数、行覆盖率
- 常见低覆盖点包括：条件分支未覆盖所有路径、错误边界未模拟、slot 默认内容未测试、defineModel 的双向绑定场景遗漏
提升覆盖率的实用策略
达到 80%+ 覆盖率不靠堆用例，而靠结构化补全：
- 对每个 prop 类型组合写一个测试（如 disabled=true/false、size='small'|'large'）
- 主动触发异常路径：如传入非法参数、mock 接口失败、模拟 emit 抛错
- 验证副作用：watch、onMounted、provide/inject 在组件生命周期中的行为
- 针对 Composition API 提取的逻辑（composables），单独测试其返回值与响应式更新
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
