Vue 测试入门：使用 Vitest 和 Vue Test Utils 编写单元测试

快速概述

单元测试是保障 Vue 组件质量与可维护性的关键手段。本教程将指导你使用 Vitest 与 Vue Test Utils 为 Vue 组件编写单元测试，解决组件逻辑回归、重构风险高、手动验证效率低等核心问题。该方案适用于所有 Vue 3 项目，尤其适合组件库开发、复杂交互页面以及多人协作的中大型项目。前置环境要求：已安装 Node.js 与 npm，并拥有一个基于 Vite 构建的 Vue 3 项目。

核心概念与原理

Vitest 是一个基于 Vite 的下一代测试运行器，它利用 Vite 的转换能力，无需额外配置即可处理 ES 模块与 Vue 单文件组件。Vue Test Utils 是 Vue 官方提供的测试工具库，提供 mount、shallowMount、find、trigger 等核心 API，用于挂载组件、查询 DOM 元素并模拟用户交互。其工作流程遵循经典的“安排-执行-断言”模式：先挂载组件并设置初始状态，再通过 trigger 触发事件，最后断言组件数据或 DOM 是否符合预期。

实战步骤与代码

第一步：安装依赖

在项目根目录执行以下命令安装测试所需依赖：

npm install --save-dev vitest @vue/test-utils @vitejs/plugin-vue jsdom

第二步：配置 Vitest

在 vite.config.js 中添加测试配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({ plugins: [vue()], test: { environment: 'jsdom', // 模拟浏览器 DOM 环境 globals: true,        // 启用全局测试 API，无需手动导入 }, })

第三步：编写被测组件

创建一个简单的计数器组件 Counter.vue：

<template>
  <div>
    <h1>Count: {{ counter }}</h1>
    <button @click="counter++">+1</button>
  </div>
</template>
<script setup> import { ref } from 'vue' const counter = ref(0) </script>

第四步：编写测试用例

创建 Counter.spec.js 测试文件：

import { mount } from '@vue/test-utils'
import Counter from './Counter.vue'
describe('Counter 组件', () => { it('初始计数为 0', () => { const wrapper = mount(Counter) expect(wrapper.find('h1').text()).toContain('0') })
it('点击按钮后计数增加', async () => { const wrapper = mount(Counter) await wrapper.find('button').trigger('click') expect(wrapper.find('h1').text()).toContain('1') }) })

测试中，mount 将组件挂载到内存 DOM，find 定位元素，trigger 触发点击事件，最后通过断言验证组件状态变化。

第五步：运行测试

在 package.json 的 scripts 中添加命令：

"test": "vitest"

执行 npm run test 即可运行全部测试，Vitest 会依据默认的 testMatch 规则查找测试文件。

常见坑点与优化

• 异步更新问题：Vue 的 DOM 更新是异步的，触发事件后必须使用 await 等待更新完成，否则断言会失败。
• 环境配置缺失：未设置 environment: 'jsdom' 会导致组件无法在 Node 环境中正常挂载，报错提示找不到 document。
• 过度依赖快照测试：快照测试虽然能快速获得覆盖率，但维护成本高，建议对关键交互逻辑编写显式断言。
• 性能优化：对于大型组件树，使用 shallowMount 仅挂载当前组件，避免渲染子组件，可显著提升测试速度。