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

重生之我在学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）：

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. 错误场景全面覆盖：网络异常等边界情况妥善处理

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