vue2单元测试使用vue test utils搭配jest，核心是挂载组件、模拟交互、断言行为与渲染结果，需正确配置、合理选用mount/shallowmount、处理异步、触发事件并检查响应。
Vue2 的单元测试通常使用 Vue Test Utils（简称 VTU）搭配 Jest 进行，核心是挂载组件、模拟交互、断言行为与渲染结果。重点在于正确配置、合理使用 mount / shallowMount、处理异步、触发事件和检查响应。
安装与基础配置
确保项目已集成 Jest，并安装对应版本的 Vue Test Utils（Vue 2 推荐使用 @vue/test-utils@1.x）：
- 运行
npm install --save-dev @vue/test-utils@1.3.0 jest @vue/vue2-jest（注意版本兼容性） - 在
jest.config.js中配置transform，让 Jest 能处理 .vue 文件："transform": { "^.+\.vue$": "@vue/vue2-jest" } - 若组件含样式或
require资源，可加moduleNameMapper忽略非 JS 资源
挂载组件并验证初始渲染
用 shallowMount（只渲染当前组件，不递归子组件）或 mount（完整渲染，适合测试插槽、事件冒泡等）：
- 导入组件和 VTU：
import { shallowMount } from '@vue/test-utils' - 挂载后通过
wrapper.vm访问实例，wrapper.html()查看渲染结构 - 例如测试一个显示 msg 的
HelloWorld.vue：const wrapper = shallowMount(HelloWorld, { propsData: { msg: 'Test' } })expect(wrapper.text()).toContain('Test')
模拟用户交互与响应校验
触发事件（如 click、input）、修改 prop 或 data，再断言 DOM 变化或方法调用：
- 触发事件：
wrapper.find('button').trigger('click') - 设置 data：
wrapper.setData({ count: 5 }) - 验证方法是否被调用：
const spy = jest.fn(); wrapper.vm.handleClick = spy; wrapper.find('button').trigger('click'); expect(spy).toHaveBeenCalled() - 监听自定义事件：
wrapper.vm.$emit('submit'); expect(wrapper.emitted().submit).toBeTruthy()
处理异步逻辑（如 API 调用、$nextTick）
Vue 更新是异步的，DOM 变更需等待 $nextTick；若组件内有 Promise，需配合 async/await：
- 更新后等待 DOM 刷新：
await wrapper.vm.$nextTick() - 模拟接口返回：
jest.mock('@/api/user', () => ({ fetchUser: jest.fn().mockResolvedValue({ id: 1 }) })) - 测试异步方法：
await wrapper.vm.loadUser(); expect(wrapper.vm.user.id).toBe(1) - 注意：Jest 默认支持 Promise，无需额外配置，但需确保测试函数标记为
async
不复杂但容易忽略的是挂载选项的一致性（比如 provide/inject、全局过滤器、router/mock）和清理副作用（如定时器、事件监听）。每次测试后建议调用 wrapper.destroy()，尤其在 watch 或生命周期中注册了资源时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
