Vue Test Utils 基础介绍

Vue Test Utils 是 Vue 官方推出的组件测试工具库，专门用于测试 Vue 组件的行为、状态和交互逻辑。它提供了简洁的 API，能够模拟组件挂载、DOM 操作、用户交互等场景，让开发者无需依赖真实浏览器环境，就能高效验证组件功能的正确性，是 Vue 项目单元测试的核心工具（适配 Vue 2 的 v1 版本和 Vue 3 的 v2 版本）。

Vue Test Utils 中文官网

其核心作用主要有三点：

• 组件隔离测试：将目标组件与其他依赖（如子组件、全局插件）解耦，专注验证组件自身逻辑。
• 模拟真实场景：支持模拟用户交互（点击、输入等）、全局对象（route、message）和异步操作（接口请求、定时器）。
• 简化断言逻辑：提供组件专属的查询、操作 API，配合 Jest 等测试框架，快速断言组件状态、DOM 结构和事件触发。

相关知识点清单（从基础到进阶）

1. Vue Test Utils 简介与核心作用
2. 测试环境搭建（Vue 2 + v1 / Vue 3 + v2）
3. 组件挂载方法（mount 与 shallowMount 区别）
4. Wrapper 基础：获取组件实例与 DOM 元素
5. 元素与组件查询（find / findAll / findComponent）
6. 基础交互模拟（trigger 触发点击、输入等事件）
7. 表单操作（setValue 设置输入框、单选框等值）
8. 组件状态验证（text / html / props 等 API）
9. 自定义事件断言（emitted 方法使用）
10. WrapperArray 批量处理多个元素/组件
11. 异步操作测试（await 处理更新与事件）
12. 全局配置模拟（mocks 模拟 $route、$store 等）
13. 子组件 Stub 与 Mock 策略
14. 插槽测试（普通插槽与作用域插槽验证）
15. 组件生命周期与钩子函数测试
16. 复杂场景测试（如表单校验、条件渲染）
17. Vue 2 到 Vue 3 测试代码迁移指南
18. 测试覆盖率统计与优化
19. 常见测试问题与调试技巧
20. 大型项目组件测试最佳实践