vue3单元测试推荐vitest搭配vue test utils，无需复杂配置即可直接运行.vue和ts文件；通过mount/shallowmount挂载组件，结合nexttick处理异步更新，专注验证可观察输出而非内部状态。
Vue3 单元测试用 Vitest 搭配 Vue Test Utils 是当前最主流、最高效的做法。它不依赖复杂配置，能直接跑 .vue 和 TypeScript 文件，专注验证组件行为是否符合预期。
安装与基础配置
确保项目基于 Vite（推荐），执行以下命令即可完成集成：
- 安装依赖：
npm install -D vitest @vue/test-utils@next - Vite 项目开箱即用，无需额外配置 Babel 或 ts-jest
- 在
package.json中添加脚本："test": "vitest" - 测试文件命名建议为
xxx.spec.ts或xxx.test.ts，Vitest 默认识别
挂载组件并验证渲染结果
使用 mount 渲染组件，通过 wrapper 获取 DOM 内容或状态：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
mount(Component, { props: { ... } })传入 props 初始化组件 -
wrapper.text()获取渲染文本，适合检查内容是否正确显示 -
wrapper.find('.error').exists()判断特定元素是否存在 - 避免断言内部状态（如
data或computed的值），只关注可观察输出
模拟用户交互并处理异步更新
Vue 响应式更新是异步的，触发事件后需等待 DOM 刷新再断言：
- 用
await wrapper.find('button').trigger('click')触发事件 - 后续断言前加
await nextTick()，或直接依赖 Vitest + VTU v2 自动等待机制 - 对
ref、computed或onMounted中的异步逻辑，同样需要等待更新完成 - 例如点击后计数变化，不能立刻检查
wrapper.text()，必须等响应式更新生效
按需选择 shallowMount 提升测试效率
当组件包含大量子组件（尤其是第三方 UI 库组件）时，优先用 shallowMount：
- 子组件会被自动 stub，不渲染模板、不执行逻辑
- 聚焦当前组件自身行为，避免因子组件变更导致测试失败
- 适合大多数业务组件单元测试，CI 环境中显著提速
- 仅在需验证父子通信（如
$emit是否被触发）或子组件直接影响父状态时，才用mount
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
