重生之我在学Vue–第13天 Vue 3 单元测试实战指南

前言

“未经验证的代码如同未系安全带的飙车，测试就是程序员的主动安全系统。” —— 测试驱动开发哲学

经过12天的开发与优化，我们的任务管理系统已具备完整功能。今天我们将为项目搭建质量防护网，使用Jest+Vue Test Utils实现单元测试全覆盖。

Vue3 官方中文文档传送点： 测试指南

Vue前端成仙之路：Vue 前端成仙之路_野生的程序媛的博客-CSDN博客

GO后端成神之路：Go 后端成神之路_野生的程序媛的博客-CSDN博客

一、测试环境搭建

1.1 测试框架配置

npm install jest @vue/test-utils @types/jest vue-jest@next -D

Jest配置文件（jest.config.js）：

javascript">module.exports = {preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',testMatch: ['**/__tests__/**/*.[jt]s?(x)'],moduleNameMapper: {'^@/(.*)$': '<rootDir>/src/$1'},collectCoverage: true,coverageReporters: ['html', 'text-summary']
}

1.2 测试文件结构

src/
├─ components/
│  └─ TaskList/
│     ├─ TaskList.vue
│     └─ __tests__/
│        └─ TaskList.spec.ts
└─ store/└─ __tests__/└─ taskStore.spec.ts

二、组件测试实战

2.1 基础渲染测试

// TaskList.spec.ts
import { mount } from '@vue/test-utils'
import TaskList from '../TaskList.vue'describe('TaskList组件测试', () => {const tasks = [{ id: 1, title: '学习Vue3', completed: false },{ id: 2, title: '编写测试用例', completed: true }]test('正确渲染任务列表', () => {const wrapper = mount(TaskList, {props: { tasks }})// 验证渲染数量const items = wrapper.findAll('.task-item')expect(items.length).toBe(tasks.length)// 验证内容展示expect(wrapper.text()).toContain('学习Vue3')})
})

2.2 事件触发测试

test('正确触发删除事件', async () => {const wrapper = mount(TaskList, {props: { tasks }})// 查找第一个删除按钮并点击const deleteBtn = wrapper.find('.delete-btn')await deleteBtn.trigger('click')// 验证emit事件expect(wrapper.emitted('delete-task')).toBeTruthy()expect(wrapper.emitted('delete-task')![0]).toEqual([1])
})

2.3 异步操作测试

test('加载状态显示正确', async () => {const wrapper = mount(TaskList, {props: { tasks: [],loading: true }})expect(wrapper.find('.loading-spinner').exists()).toBe(true)
})

三、Pinia Store测试

3.1 Store初始化配置

import { setActivePinia, createPinia } from 'pinia'
import { useTaskStore } from '@/store/taskStore'beforeEach(() => {setActivePinia(createPinia())
})

3.2 Action测试用例

test('addTask添加新任务', async () => {const store = useTaskStore()const newTask = { title: '新任务' }// 模拟API请求jest.spyOn(axios, 'post').mockResolvedValue({ data: { ...newTask, id: 1 } })await store.addTask(newTask)expect(store.tasks).toHaveLength(1)expect(store.tasks[0].title).toBe('新任务')
})

3.3 错误处理测试

test('deleteTask处理网络错误', async () => {const store = useTaskStore()store.tasks = [{ id: 1, title: '待删除任务', completed: false }]// 模拟API失败jest.spyOn(axios, 'delete').mockRejectedValue(new Error('网络错误'))await expect(store.deleteTask(1)).rejects.toThrow('删除失败')expect(store.tasks).toHaveLength(1) // 确保未删除
})

四、高级测试技巧

4.1 快照测试

test('组件渲染快照', () => {const wrapper = mount(TaskList, {props: { tasks }})expect(wrapper.html()).toMatchSnapshot()
})

4.2 路由状态模拟

import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(),routes: []
})test('带路由的组件测试', async () => {const wrapper = mount(Component, {global: {plugins: [router]}})
})

4.3 测试覆盖率优化

配置package.json：

{"scripts": {"test:coverage": "jest --coverage"}
}

总结

通过今天的测试实战，我们为项目实现了：

1. 核心组件100%覆盖率：所有关键交互均有测试保障
2. Store层完整验证：数据流变化可追踪
3. 错误场景全面覆盖：网络异常等边界情况妥善处理

明日预告：国际化方案落地，让应用走向世界舞台！