Vue3单元测试实践案例详解提升代码质量与开发效率通过真实项目案例学习测试驱动开发掌握Vue3测试核心技能与最佳实践

威震华夏关云长

引言

在现代前端开发中，单元测试已经成为保证代码质量、提高开发效率的重要手段。随着Vue3的发布，其组合式API（Composition API）为组件逻辑复用和代码组织带来了全新的可能性，同时也对单元测试提出了新的要求。本文将通过真实项目案例，详细介绍Vue3单元测试的实践方法，探讨测试驱动开发（TDD）在Vue3项目中的应用，帮助开发者掌握Vue3测试的核心技能与最佳实践，从而提升代码质量与开发效率。

Vue3单元测试基础

什么是单元测试

单元测试是对软件中最小可测试单元进行检查和验证的过程。在Vue3应用中，单元测试主要针对组件、工具函数、模块等进行独立测试，确保它们在各种输入条件下都能产生预期的输出。

Vue3单元测试的重要性

• 提高代码质量：通过测试发现潜在问题，减少生产环境中的bug
• 促进重构：有测试保障的情况下，开发者可以更自信地重构代码
• 文档作用：测试用例可以作为代码使用的示例和文档
• 设计改进：编写测试的过程会促使开发者思考代码设计，提高代码可测试性

Vue3单元测试工具栈

在Vue3生态中，常用的单元测试工具包括：

1. Vitest：专为Vite设计的测试框架，与Vue3完美兼容
2. Vue Test Utils：官方提供的Vue组件测试工具库
3. Jest：流行的JavaScript测试框架，也可用于Vue3测试
4. Cypress：端到端测试工具，也可用于组件测试
5. Testing Library：提供更贴近用户行为的测试方法

环境搭建

创建Vue3测试项目

首先，我们需要创建一个带有测试配置的Vue3项目。可以使用Vite来快速搭建：

2. # 创建Vue3项目
3. npm create vite@latest vue3-testing-demo -- --template vue
4. cd vue3-testing-demo
6. # 安装依赖
7. npm install
9. # 安装测试相关依赖
10. npm install -D vitest @vue/test-utils jsdom @vitest/coverage-v8

复制代码

配置Vitest

在项目根目录创建vitest.config.ts文件：

2. import { defineConfig } from 'vitest/config'
3. import vue from '@vitejs/plugin-vue'
5. export default defineConfig({
6.   plugins: [vue()],
7.   test: {
8.     // 启用类似全局的Vue Test Utils API
9.     globals: true,
10.     // 模拟DOM环境
11.     environment: 'jsdom',
12.     // 支持Vue组件测试
13.     include: ['src/**/*.test.{js,ts,jsx,tsx}'],
14.     // 覆盖率配置
15.     coverage: {
16.       provider: 'v8',
17.       reporter: ['text', 'json', 'html'],
18.       exclude: [
19.         'node_modules/',
20.         'src/main.js',
21.         '**/*.d.ts',
22.       ],
23.     },
24.   },
25. })

复制代码

配置package.json

在package.json中添加测试脚本：

2. {
3.   "scripts": {
4.     "dev": "vite",
5.     "build": "vite build",
6.     "preview": "vite preview",
7.     "test": "vitest",
8.     "test:run": "vitest run",
9.     "test:coverage": "vitest run --coverage"
10.   }
11. }

复制代码

Vue3组件测试基础

编写第一个组件测试

让我们创建一个简单的计数器组件并为其编写测试。

Counter.vue 组件:

2. <template>
3.   <div class="counter">
4.     <h2>Counter: {{ count }}</h2>
5.     <button @click="increment">Increment</button>
6.     <button @click="decrement">Decrement</button>
7.     <button @click="reset">Reset</button>
8.   </div>
9. </template>
11. <script setup>
12. import { ref } from 'vue'
14. const count = ref(0)
16. const increment = () => {
17.   count.value++
18. }
20. const decrement = () => {
21.   count.value--
22. }
24. const reset = () => {
25.   count.value = 0
26. }
27. </script>

复制代码

Counter.test.js 测试文件:

2. import { describe, it, expect } from 'vitest'
3. import { mount } from '@vue/test-utils'
4. import Counter from '../components/Counter.vue'
6. describe('Counter.vue', () => {
7.   it('renders initial count value', () => {
8.     const wrapper = mount(Counter)
9.     expect(wrapper.text()).toContain('Counter: 0')
10.   })
12.   it('increments count when increment button is clicked', async () => {
13.     const wrapper = mount(Counter)
14.     const incrementButton = wrapper.find('button:nth-child(2)')
15.    
16.     await incrementButton.trigger('click')
17.    
18.     expect(wrapper.text()).toContain('Counter: 1')
19.   })
21.   it('decrements count when decrement button is clicked', async () => {
22.     const wrapper = mount(Counter)
23.     const decrementButton = wrapper.find('button:nth-child(3)')
24.    
25.     await decrementButton.trigger('click')
26.    
27.     expect(wrapper.text()).toContain('Counter: -1')
28.   })
30.   it('resets count when reset button is clicked', async () => {
31.     const wrapper = mount(Counter)
32.     const incrementButton = wrapper.find('button:nth-child(2)')
33.     const resetButton = wrapper.find('button:nth-child(4)')
34.    
35.     // 先增加计数
36.     await incrementButton.trigger('click')
37.     expect(wrapper.text()).toContain('Counter: 1')
38.    
39.     // 然后重置
40.     await resetButton.trigger('click')
41.     expect(wrapper.text()).toContain('Counter: 0')
42.   })
43. })

复制代码

测试组件Props

让我们创建一个接收props的组件并测试它。

Greeting.vue 组件:

2. <template>
3.   <div>
4.     <h1>Hello, {{ name }}!</h1>
5.     <p v-if="showMessage">{{ message }}</p>
6.   </div>
7. </template>
9. <script setup>
10. defineProps({
11.   name: {
12.     type: String,
13.     required: true
14.   },
15.   message: {
16.     type: String,
17.     default: 'Welcome to our app'
18.   },
19.   showMessage: {
20.     type: Boolean,
21.     default: true
22.   }
23. })
24. </script>

复制代码

Greeting.test.js 测试文件:

2. import { describe, it, expect } from 'vitest'
3. import { mount } from '@vue/test-utils'
4. import Greeting from '../components/Greeting.vue'
6. describe('Greeting.vue', () => {
7.   it('renders name prop correctly', () => {
8.     const name = 'John Doe'
9.     const wrapper = mount(Greeting, {
10.       props: { name }
11.     })
12.    
13.     expect(wrapper.text()).toContain(`Hello, ${name}!`)
14.   })
16.   it('renders default message when showMessage is true', () => {
17.     const wrapper = mount(Greeting, {
18.       props: { name: 'John' }
19.     })
20.    
21.     expect(wrapper.text()).toContain('Welcome to our app')
22.   })
24.   it('does not render message when showMessage is false', () => {
25.     const wrapper = mount(Greeting, {
26.       props: {
27.         name: 'John',
28.         showMessage: false
29.       }
30.     })
31.    
32.     expect(wrapper.find('p').exists()).toBe(false)
33.   })
35.   it('renders custom message when provided', () => {
36.     const customMessage = 'This is a custom message'
37.     const wrapper = mount(Greeting, {
38.       props: {
39.         name: 'John',
40.         message: customMessage
41.       }
42.     })
43.    
44.     expect(wrapper.text()).toContain(customMessage)
45.   })
46. })

复制代码

测试组件事件

创建一个发出事件的组件并测试它。

LoginForm.vue 组件:

2. <template>
3.   <form @submit.prevent="handleSubmit">
4.     <div>
5.       <label for="username">Username:</label>
6.       <input
7.         id="username"
8.         v-model="username"
9.         type="text"
10.         required
11.       />
12.     </div>
13.     <div>
14.       <label for="password">Password:</label>
15.       <input
16.         id="password"
17.         v-model="password"
18.         type="password"
19.         required
20.       />
21.     </div>
22.     <button type="submit">Login</button>
23.   </form>
24. </template>
26. <script setup>
27. import { ref } from 'vue'
29. const username = ref('')
30. const password = ref('')
32. const emit = defineEmits(['login'])
34. const handleSubmit = () => {
35.   emit('login', {
36.     username: username.value,
37.     password: password.value
38.   })
39. }
40. </script>

复制代码

LoginForm.test.js 测试文件:

2. import { describe, it, expect } from 'vitest'
3. import { mount } from '@vue/test-utils'
4. import LoginForm from '../components/LoginForm.vue'
6. describe('LoginForm.vue', () => {
7.   it('emits login event with username and password when form is submitted', async () => {
8.     const wrapper = mount(LoginForm)
9.    
10.     // 设置表单数据
11.     const usernameInput = wrapper.find('#username')
12.     const passwordInput = wrapper.find('#password')
13.    
14.     await usernameInput.setValue('testuser')
15.     await passwordInput.setValue('password123')
16.    
17.     // 提交表单
18.     await wrapper.find('form').trigger('submit')
19.    
20.     // 验证事件是否被触发
21.     expect(wrapper.emitted()).toHaveProperty('login')
22.    
23.     // 验证事件参数
24.     const loginEvent = wrapper.emitted('login')
25.     expect(loginEvent).toHaveLength(1)
26.     expect(loginEvent[0]).toEqual([
27.       {
28.         username: 'testuser',
29.         password: 'password123'
30.       }
31.     ])
32.   })
34.   it('does not emit login event when form is not valid', async () => {
35.     const wrapper = mount(LoginForm)
36.    
37.     // 不设置必填字段，直接提交表单
38.     await wrapper.find('form').trigger('submit')
39.    
40.     // 验证事件未被触发
41.     expect(wrapper.emitted()).not.toHaveProperty('login')
42.   })
43. })

复制代码

测试组合式函数（Composables）

在Vue3中，组合式函数（Composables）是复用逻辑的重要方式。测试组合式函数对于保证逻辑正确性至关重要。

创建一个可测试的组合式函数

useCounter.js:

2. import { ref, computed } from 'vue'
4. export function useCounter(initialValue = 0) {
5.   const count = ref(initialValue)
6.   
7.   const double = computed(() => count.value * 2)
8.   
9.   const increment = () => {
10.     count.value++
11.   }
12.   
13.   const decrement = () => {
14.     count.value--
15.   }
16.   
17.   const reset = () => {
18.     count.value = initialValue
19.   }
20.   
21.   return {
22.     count,
23.     double,
24.     increment,
25.     decrement,
26.     reset
27.   }
28. }

复制代码

测试组合式函数

useCounter.test.js:

2. import { describe, it, expect } from 'vitest'
3. import { useCounter } from '../composables/useCounter'
5. describe('useCounter', () => {
6.   it('starts with initial value', () => {
7.     const { count } = useCounter(5)
8.     expect(count.value).toBe(5)
9.   })
11.   it('defaults to 0 if no initial value is provided', () => {
12.     const { count } = useCounter()
13.     expect(count.value).toBe(0)
14.   })
16.   it('increments the count', () => {
17.     const { count, increment } = useCounter()
18.     increment()
19.     expect(count.value).toBe(1)
20.   })
22.   it('decrements the count', () => {
23.     const { count, decrement } = useCounter()
24.     decrement()
25.     expect(count.value).toBe(-1)
26.   })
28.   it('resets to initial value', () => {
29.     const { count, increment, reset } = useCounter(10)
30.     increment()
31.     increment()
32.     expect(count.value).toBe(12)
33.     reset()
34.     expect(count.value).toBe(10)
35.   })
37.   it('computes double value correctly', () => {
38.     const { count, double } = useCounter(3)
39.     expect(double.value).toBe(6)
40.    
41.     count.value = 5
42.     expect(double.value).toBe(10)
43.   })
44. })

复制代码

测试异步组合式函数

useFetch.js:

2. import { ref, onMounted } from 'vue'
4. export function useFetch(url) {
5.   const data = ref(null)
6.   const error = ref(null)
7.   const loading = ref(false)
9.   const fetchData = async () => {
10.     loading.value = true
11.     error.value = null
12.    
13.     try {
14.       const response = await fetch(url)
15.       if (!response.ok) {
16.         throw new Error(`HTTP error! status: ${response.status}`)
17.       }
18.       data.value = await response.json()
19.     } catch (err) {
20.       error.value = err.message
21.     } finally {
22.       loading.value = false
23.     }
24.   }
26.   onMounted(() => {
27.     fetchData()
28.   })
30.   return {
31.     data,
32.     error,
33.     loading,
34.     refetch: fetchData
35.   }
36. }

复制代码

useFetch.test.js:

2. import { describe, it, expect, vi, beforeEach } from 'vitest'
3. import { useFetch } from '../composables/useFetch'
5. // 模拟全局fetch函数
6. global.fetch = vi.fn()
8. describe('useFetch', () => {
9.   beforeEach(() => {
10.     // 在每个测试前重置模拟
11.     fetch.mockClear()
12.   })
14.   it('starts with default values', () => {
15.     const { data, error, loading } = useFetch('https://api.example.com/data')
16.    
17.     expect(data.value).toBeNull()
18.     expect(error.value).toBeNull()
19.     expect(loading.value).toBe(false)
20.   })
22.   it('fetches data successfully', async () => {
23.     const mockData = { id: 1, name: 'Test Data' }
24.     fetch.mockResolvedValueOnce({
25.       ok: true,
26.       json: async () => mockData
27.     })
29.     const { data, error, loading } = useFetch('https://api.example.com/data')
30.    
31.     // 由于onMounted是异步的，我们需要等待下一个tick
32.     await new Promise(resolve => setTimeout(resolve, 0))
33.    
34.     expect(loading.value).toBe(false)
35.     expect(error.value).toBeNull()
36.     expect(data.value).toEqual(mockData)
37.   })
39.   it('handles fetch error', async () => {
40.     const errorMessage = 'Network error'
41.     fetch.mockRejectedValueOnce(new Error(errorMessage))
43.     const { data, error, loading } = useFetch('https://api.example.com/data')
44.    
45.     await new Promise(resolve => setTimeout(resolve, 0))
46.    
47.     expect(loading.value).toBe(false)
48.     expect(error.value).toBe(errorMessage)
49.     expect(data.value).toBeNull()
50.   })
52.   it('handles HTTP error status', async () => {
53.     fetch.mockResolvedValueOnce({
54.       ok: false,
55.       status: 404,
56.       statusText: 'Not Found'
57.     })
59.     const { data, error, loading } = useFetch('https://api.example.com/data')
60.    
61.     await new Promise(resolve => setTimeout(resolve, 0))
62.    
63.     expect(loading.value).toBe(false)
64.     expect(error.value).toBe('HTTP error! status: 404')
65.     expect(data.value).toBeNull()
66.   })
68.   it('can refetch data', async () => {
69.     const mockData1 = { id: 1, name: 'First Data' }
70.     const mockData2 = { id: 2, name: 'Second Data' }
71.    
72.     fetch.mockResolvedValueOnce({
73.       ok: true,
74.       json: async () => mockData1
75.     })
77.     const { data, refetch } = useFetch('https://api.example.com/data')
78.    
79.     await new Promise(resolve => setTimeout(resolve, 0))
80.     expect(data.value).toEqual(mockData1)
81.    
82.     // 准备第二次调用的模拟响应
83.     fetch.mockResolvedValueOnce({
84.       ok: true,
85.       json: async () => mockData2
86.     })
87.    
88.     // 手动调用refetch
89.     await refetch()
90.    
91.     expect(data.value).toEqual(mockData2)
92.   })
93. })

复制代码

测试驱动开发（TDD）在Vue3中的应用

什么是测试驱动开发

测试驱动开发（Test-Driven Development，TDD）是一种软件开发方法，其核心思想是在编写功能代码之前先编写测试代码。TDD遵循”红-绿-重构”的循环：

1. 红：编写一个失败的测试
2. 绿：编写最简单的代码使测试通过
3. 重构：优化代码，同时保持测试通过

TDD实践案例：待办事项应用

让我们通过一个简单的待办事项应用来实践TDD。

首先，我们创建一个Todo列表组件的测试文件，定义我们期望的行为。

TodoList.test.js:

2. import { describe, it, expect } from 'vitest'
3. import { mount } from '@vue/test-utils'
4. import TodoList from '../components/TodoList.vue'
6. describe('TodoList.vue', () => {
7.   it('renders an empty list when no todos are provided', () => {
8.     const wrapper = mount(TodoList, {
9.       props: {
10.         todos: []
11.       }
12.     })
13.    
14.     expect(wrapper.findAll('.todo-item')).toHaveLength(0)
15.   })
17.   it('renders a list of todos', () => {
18.     const todos = [
19.       { id: 1, text: 'Learn Vue 3', completed: false },
20.       { id: 2, text: 'Write tests', completed: true }
21.     ]
22.    
23.     const wrapper = mount(TodoList, {
24.       props: { todos }
25.     })
26.    
27.     const todoItems = wrapper.findAll('.todo-item')
28.     expect(todoItems).toHaveLength(2)
29.     expect(todoItems[0].text()).toContain('Learn Vue 3')
30.     expect(todoItems[1].text()).toContain('Write tests')
31.   })
33.   it('marks completed todos with a specific class', () => {
34.     const todos = [
35.       { id: 1, text: 'Learn Vue 3', completed: false },
36.       { id: 2, text: 'Write tests', completed: true }
37.     ]
38.    
39.     const wrapper = mount(TodoList, {
40.       props: { todos }
41.     })
42.    
43.     const todoItems = wrapper.findAll('.todo-item')
44.     expect(todoItems[0].classes()).not.toContain('completed')
45.     expect(todoItems[1].classes()).toContain('completed')
46.   })
48.   it('emits toggle event when a todo is clicked', async () => {
49.     const todos = [
50.       { id: 1, text: 'Learn Vue 3', completed: false }
51.     ]
52.    
53.     const wrapper = mount(TodoList, {
54.       props: { todos }
55.     })
56.    
57.     await wrapper.find('.todo-item').trigger('click')
58.    
59.     expect(wrapper.emitted()).toHaveProperty('toggle')
60.     expect(wrapper.emitted('toggle')[0]).toEqual([1])
61.   })
62. })

复制代码

运行测试，所有测试都会失败（红色），因为我们还没有创建TodoList组件。

现在，我们创建TodoList组件，实现最基本的功能使测试通过。

TodoList.vue:

2. <template>
3.   <div class="todo-list">
4.     <div
5.       v-for="todo in todos"
6.       :key="todo.id"
7.       class="todo-item"
8.       :class="{ completed: todo.completed }"
9.       @click="$emit('toggle', todo.id)"
10.     >
11.       {{ todo.text }}
12.     </div>
13.   </div>
14. </template>
16. <script setup>
17. defineProps({
18.   todos: {
19.     type: Array,
20.     required: true
21.   }
22. })
24. defineEmits(['toggle'])
25. </script>
27. <style scoped>
28. .todo-item {
29.   padding: 8px;
30.   margin: 4px 0;
31.   background-color: #f9f9f9;
32.   cursor: pointer;
33. }
35. .completed {
36.   text-decoration: line-through;
37.   color: #888;
38. }
39. </style>

复制代码

再次运行测试，所有测试都应该通过（绿色）。

现在我们的测试通过了，但我们可以重构代码以提高可读性和性能。在这个简单的例子中，重构的空间不大，但在更复杂的应用中，这一步非常重要。

TDD实践案例：添加新功能

让我们继续使用TDD方法为TodoList添加新功能：删除待办事项。

在TodoList.test.js中添加新的测试：

2. it('emits delete event when delete button is clicked', async () => {
3.   const todos = [
4.     { id: 1, text: 'Learn Vue 3', completed: false }
5.   ]
6.   
7.   const wrapper = mount(TodoList, {
8.     props: { todos }
9.   })
10.   
11.   await wrapper.find('.delete-button').trigger('click')
12.   
13.   expect(wrapper.emitted()).toHaveProperty('delete')
14.   expect(wrapper.emitted('delete')[0]).toEqual([1])
15. })

复制代码

运行测试，新测试会失败。

更新TodoList.vue组件：

2. <template>
3.   <div class="todo-list">
4.     <div
5.       v-for="todo in todos"
6.       :key="todo.id"
7.       class="todo-item"
8.       :class="{ completed: todo.completed }"
9.     >
10.       <span @click="$emit('toggle', todo.id)">{{ todo.text }}</span>
11.       <button class="delete-button" @click="$emit('delete', todo.id)">×</button>
12.     </div>
13.   </div>
14. </template>
16. <script setup>
17. defineProps({
18.   todos: {
19.     type: Array,
20.     required: true
21.   }
22. })
24. defineEmits(['toggle', 'delete'])
25. </script>
27. <style scoped>
28. .todo-item {
29.   padding: 8px;
30.   margin: 4px 0;
31.   background-color: #f9f9f9;
32.   cursor: pointer;
33.   display: flex;
34.   justify-content: space-between;
35.   align-items: center;
36. }
38. .completed {
39.   text-decoration: line-through;
40.   color: #888;
41. }
43. .delete-button {
44.   background: none;
45.   border: none;
46.   color: #ff0000;
47.   cursor: pointer;
48.   font-size: 16px;
49.   padding: 0 4px;
50. }
51. </style>

复制代码

运行测试，所有测试应该通过。

我们可以优化一下模板结构，使其更清晰：

2. <template>
3.   <div class="todo-list">
4.     <div
5.       v-for="todo in todos"
6.       :key="todo.id"
7.       class="todo-item"
8.       :class="{ completed: todo.completed }"
9.     >
10.       <span class="todo-text" @click="$emit('toggle', todo.id)">{{ todo.text }}</span>
11.       <button class="delete-button" @click.stop="$emit('delete', todo.id)">×</button>
12.     </div>
13.   </div>
14. </template>

复制代码

注意我们添加了.stop修饰符来阻止事件冒泡，这样点击删除按钮不会触发toggle事件。

Vue3高级测试技巧

测试Pinia状态管理

Pinia是Vue3的官方状态管理库。测试Pinia存储对于确保应用状态管理的正确性非常重要。

stores/counter.js:

2. import { defineStore } from 'pinia'
4. export const useCounterStore = defineStore('counter', {
5.   state: () => ({
6.     count: 0
7.   }),
8.   getters: {
9.     double: (state) => state.count * 2
10.   },
11.   actions: {
12.     increment() {
13.       this.count++
14.     },
15.     decrement() {
16.       this.count--
17.     },
18.     reset() {
19.       this.count = 0
20.     },
21.     incrementBy(amount) {
22.       this.count += amount
23.     }
24.   }
25. })

复制代码

stores/counter.test.js:

2. import { describe, it, expect, beforeEach } from 'vitest'
3. import { setActivePinia, createPinia } from 'pinia'
4. import { useCounterStore } from './counter'
6. describe('Counter Store', () => {
7.   beforeEach(() => {
8.     // 创建一个新的pinia实例，使每个测试独立
9.     setActivePinia(createPinia())
10.   })
12.   it('initializes with zero count', () => {
13.     const counter = useCounterStore()
14.     expect(counter.count).toBe(0)
15.   })
17.   it('increments count', () => {
18.     const counter = useCounterStore()
19.     counter.increment()
20.     expect(counter.count).toBe(1)
21.   })
23.   it('decrements count', () => {
24.     const counter = useCounterStore()
25.     counter.decrement()
26.     expect(counter.count).toBe(-1)
27.   })
29.   it('resets count', () => {
30.     const counter = useCounterStore()
31.     counter.increment()
32.     counter.increment()
33.     expect(counter.count).toBe(2)
34.     counter.reset()
35.     expect(counter.count).toBe(0)
36.   })
38.   it('increments by amount', () => {
39.     const counter = useCounterStore()
40.     counter.incrementBy(5)
41.     expect(counter.count).toBe(5)
42.   })
44.   it('computes double correctly', () => {
45.     const counter = useCounterStore()
46.     counter.increment()
47.     expect(counter.double).toBe(2)
48.     counter.incrementBy(4)
49.     expect(counter.double).toBe(10)
50.   })
51. })

复制代码

CounterDisplay.vue:

2. <template>
3.   <div class="counter-display">
4.     <h2>Counter: {{ counter.count }}</h2>
5.     <p>Double: {{ counter.double }}</p>
6.     <button @click="counter.increment">Increment</button>
7.     <button @click="counter.decrement">Decrement</button>
8.     <button @click="counter.reset">Reset</button>
9.   </div>
10. </template>
12. <script setup>
13. import { useCounterStore } from '../stores/counter'
15. const counter = useCounterStore()
16. </script>

复制代码

CounterDisplay.test.js:

2. import { describe, it, expect } from 'vitest'
3. import { mount } from '@vue/test-utils'
4. import { createPinia, setActivePinia } from 'pinia'
5. import CounterDisplay from '../components/CounterDisplay.vue'
7. describe('CounterDisplay.vue', () => {
8.   beforeEach(() => {
9.     // 创建一个新的pinia实例
10.     setActivePinia(createPinia())
11.   })
13.   it('renders counter values from store', () => {
14.     const wrapper = mount(CounterDisplay)
15.     expect(wrapper.text()).toContain('Counter: 0')
16.     expect(wrapper.text()).toContain('Double: 0')
17.   })
19.   it('calls store actions when buttons are clicked', async () => {
20.     const wrapper = mount(CounterDisplay)
21.    
22.     const incrementButton = wrapper.find('button:nth-child(3)')
23.     const decrementButton = wrapper.find('button:nth-child(4)')
24.     const resetButton = wrapper.find('button:nth-child(5)')
25.    
26.     await incrementButton.trigger('click')
27.     expect(wrapper.text()).toContain('Counter: 1')
28.     expect(wrapper.text()).toContain('Double: 2')
29.    
30.     await incrementButton.trigger('click')
31.     expect(wrapper.text()).toContain('Counter: 2')
32.     expect(wrapper.text()).toContain('Double: 4')
33.    
34.     await decrementButton.trigger('click')
35.     expect(wrapper.text()).toContain('Counter: 1')
36.     expect(wrapper.text()).toContain('Double: 2')
37.    
38.     await resetButton.trigger('click')
39.     expect(wrapper.text()).toContain('Counter: 0')
40.     expect(wrapper.text()).toContain('Double: 0')
41.   })
42. })

复制代码

测试Vue Router

在Vue应用中，路由是核心功能之一。测试与路由相关的组件和功能非常重要。

UserProfile.vue:

2. <template>
3.   <div class="user-profile">
4.     <div v-if="loading">Loading user data...</div>
5.     <div v-else-if="error" class="error">{{ error }}</div>
6.     <div v-else>
7.       <h2>{{ user.name }}</h2>
8.       <p>Email: {{ user.email }}</p>
9.       <button @click="goBack">Back to Users</button>
10.     </div>
11.   </div>
12. </template>
14. <script setup>
15. import { ref, onMounted } from 'vue'
16. import { useRoute, useRouter } from 'vue-router'
18. const route = useRoute()
19. const router = useRouter()
21. const user = ref({})
22. const loading = ref(true)
23. const error = ref(null)
25. const fetchUser = async () => {
26.   try {
27.     // 模拟API调用
28.     const userId = route.params.id
29.     const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
30.    
31.     if (!response.ok) {
32.       throw new Error('Failed to fetch user')
33.     }
34.    
35.     user.value = await response.json()
36.   } catch (err) {
37.     error.value = err.message
38.   } finally {
39.     loading.value = false
40.   }
41. }
43. const goBack = () => {
44.   router.push('/users')
45. }
47. onMounted(() => {
48.   fetchUser()
49. })
50. </script>

复制代码

UserProfile.test.js:

2. import { describe, it, expect, vi, beforeEach } from 'vitest'
3. import { mount } from '@vue/test-utils'
4. import { createRouter, createWebHistory, Router } from 'vue-router'
5. import UserProfile from '../components/UserProfile.vue'
7. // 模拟fetch函数
8. global.fetch = vi.fn()
10. describe('UserProfile.vue', () => {
11.   let router
13.   beforeEach(() => {
14.     // 创建路由实例
15.     router = createRouter({
16.       history: createWebHistory(),
17.       routes: [
18.         { path: '/users/:id', component: UserProfile },
19.         { path: '/users', component: { template: '<div>Users List</div>' } }
20.       ]
21.     })
22.    
23.     // 重置fetch模拟
24.     fetch.mockClear()
25.   })
27.   it('renders loading state initially', () => {
28.     const wrapper = mount(UserProfile, {
29.       global: {
30.         plugins: [router]
31.       },
32.       props: {
33.         // 模拟路由参数
34.         id: '1'
35.       }
36.     })
37.    
38.     expect(wrapper.text()).toContain('Loading user data...')
39.   })
41.   it('renders user data after successful fetch', async () => {
42.     const mockUser = {
43.       id: 1,
44.       name: 'John Doe',
45.       email: 'john@example.com'
46.     }
47.    
48.     fetch.mockResolvedValueOnce({
49.       ok: true,
50.       json: async () => mockUser
51.     })
52.    
53.     const wrapper = mount(UserProfile, {
54.       global: {
55.         plugins: [router]
56.       },
57.       props: {
58.         id: '1'
59.       }
60.     })
61.    
62.     // 等待异步操作完成
63.     await new Promise(resolve => setTimeout(resolve, 0))
64.     await wrapper.vm.$nextTick()
65.    
66.     expect(wrapper.text()).toContain(mockUser.name)
67.     expect(wrapper.text()).toContain(mockUser.email)
68.   })
70.   it('renders error message when fetch fails', async () => {
71.     const errorMessage = 'Failed to fetch user'
72.     fetch.mockRejectedValueOnce(new Error(errorMessage))
73.    
74.     const wrapper = mount(UserProfile, {
75.       global: {
76.         plugins: [router]
77.       },
78.       props: {
79.         id: '1'
80.       }
81.     })
82.    
83.     // 等待异步操作完成
84.     await new Promise(resolve => setTimeout(resolve, 0))
85.     await wrapper.vm.$nextTick()
86.    
87.     expect(wrapper.text()).toContain(errorMessage)
88.   })
90.   it('navigates to users page when back button is clicked', async () => {
91.     const mockUser = {
92.       id: 1,
93.       name: 'John Doe',
94.       email: 'john@example.com'
95.     }
96.    
97.     fetch.mockResolvedValueOnce({
98.       ok: true,
99.       json: async () => mockUser
100.     })
101.    
102.     const wrapper = mount(UserProfile, {
103.       global: {
104.         plugins: [router]
105.       },
106.       props: {
107.         id: '1'
108.       }
109.     })
110.    
111.     // 等待数据加载完成
112.     await new Promise(resolve => setTimeout(resolve, 0))
113.     await wrapper.vm.$nextTick()
114.    
115.     // 模拟路由push方法
116.     const push = vi.spyOn(router, 'push')
117.    
118.     // 点击返回按钮
119.     await wrapper.find('button').trigger('click')
120.    
121.     // 验证路由是否被调用
122.     expect(push).toHaveBeenCalledWith('/users')
123.   })
124. })

复制代码

测试异步组件

在Vue3中，异步组件是提高应用性能的重要手段。测试异步组件需要特殊处理。

AsyncComponent.vue:

2. <template>
3.   <div class="async-component">
4.     <h2>Async Component</h2>
5.     <p>{{ message }}</p>
6.     <button @click="updateMessage">Update Message</button>
7.   </div>
8. </template>
10. <script setup>
11. import { ref } from 'vue'
13. const message = ref('Initial message')
15. const updateMessage = () => {
16.   message.value = 'Updated message'
17. }
18. </script>

复制代码

App.vue(使用异步组件):

2. <template>
3.   <div class="app">
4.     <h1>Async Component Demo</h1>
5.     <Suspense>
6.       <template #default>
7.         <AsyncComponent />
8.       </template>
9.       <template #fallback>
10.         <div>Loading component...</div>
11.       </template>
12.     </Suspense>
13.   </div>
14. </template>
16. <script setup>
17. import { defineAsyncComponent } from 'vue'
19. const AsyncComponent = defineAsyncComponent(() =>
20.   import('./components/AsyncComponent.vue')
21. )
22. </script>

复制代码

AsyncComponent.test.js:

2. import { describe, it, expect } from 'vitest'
3. import { mount } from '@vue/test-utils'
4. import { defineAsyncComponent } from 'vue'
6. // 直接导入组件进行测试
7. import AsyncComponent from '../components/AsyncComponent.vue'
9. describe('AsyncComponent.vue', () => {
10.   it('renders initial message', () => {
11.     const wrapper = mount(AsyncComponent)
12.     expect(wrapper.text()).toContain('Initial message')
13.   })
15.   it('updates message when button is clicked', async () => {
16.     const wrapper = mount(AsyncComponent)
17.    
18.     await wrapper.find('button').trigger('click')
19.    
20.     expect(wrapper.text()).toContain('Updated message')
21.   })
22. })
24. // 测试使用Suspense的异步组件
25. describe('App with AsyncComponent', () => {
26.   it('shows fallback while loading', async () => {
27.     const AsyncComponent = defineAsyncComponent(() =>
28.       import('../components/AsyncComponent.vue')
29.     )
30.    
31.     const App = {
32.       template: `
33.         <div>
34.           <Suspense>
35.             <template #default>
36.               <AsyncComponent />
37.             </template>
38.             <template #fallback>
39.               <div>Loading component...</div>
40.             </template>
41.           </Suspense>
42.         </div>
43.       `,
44.       components: { AsyncComponent }
45.     }
46.    
47.     const wrapper = mount(App)
48.    
49.     // 初始状态下应该显示fallback内容
50.     expect(wrapper.text()).toContain('Loading component...')
51.    
52.     // 等待异步组件加载
53.     await new Promise(resolve => setTimeout(resolve, 10))
54.     await wrapper.vm.$nextTick()
55.    
56.     // 异步组件加载完成后应该显示组件内容
57.     expect(wrapper.text()).toContain('Async Component')
58.     expect(wrapper.text()).toContain('Initial message')
59.   })
60. })

复制代码

Vue3测试最佳实践

1. 测试组织与命名

良好的测试组织与命名可以提高测试的可读性和可维护性。

2. src/
3. ├── components/
4. │   ├── Button.vue
5. │   ├── Button.test.js
6. │   ├── UserProfile.vue
7. │   └── UserProfile.test.js
8. ├── composables/
9. │   ├── useCounter.js
10. │   ├── useCounter.test.js
11. │   ├── useFetch.js
12. │   └── useFetch.test.js
13. ├── stores/
14. │   ├── counter.js
15. │   └── counter.test.js
16. └── utils/
17.     ├── formatDate.js
18.     └── formatDate.test.js

复制代码

• 测试文件：与被测试文件同名，但添加.test.js或.spec.js后缀
• 测试套件：使用describe描述被测试的模块或组件
• 测试用例：使用it或test描述具体的行为，以”应该…“（should…）开头

2. // 好的测试命名
3. describe('Button.vue', () => {
4.   it('should render with correct text', () => {
5.     // ...
6.   })
7.   
8.   it('should emit click event when clicked', () => {
9.     // ...
10.   })
11.   
12.   it('should be disabled when disabled prop is true', () => {
13.     // ...
14.   })
15. })

复制代码

2. 测试覆盖率

测试覆盖率是衡量测试完整性的重要指标。Vitest提供了内置的覆盖率支持。

在vitest.config.ts中配置覆盖率：

2. import { defineConfig } from 'vitest/config'
3. import vue from '@vitejs/plugin-vue'
5. export default defineConfig({
6.   plugins: [vue()],
7.   test: {
8.     coverage: {
9.       provider: 'v8',
10.       reporter: ['text', 'json', 'html'],
11.       exclude: [
12.         'node_modules/',
13.         'src/main.js',
14.         '**/*.d.ts',
15.       ],
16.     },
17.   },
18. })

复制代码

2. npm run test:coverage

复制代码

• 行覆盖率（Line Coverage）：至少80%
• 分支覆盖率（Branch Coverage）：至少80%
• 函数覆盖率（Function Coverage）：至少80%
• 语句覆盖率（Statement Coverage）：至少80%

3. 测试隔离

每个测试应该是独立的，不依赖于其他测试的状态或执行顺序。

2. import { beforeEach, afterEach } from 'vitest'
4. describe('Counter Store', () => {
5.   let counter
6.   
7.   beforeEach(() => {
8.     // 在每个测试前创建新的store实例
9.     setActivePinia(createPinia())
10.     counter = useCounterStore()
11.   })
12.   
13.   afterEach(() => {
14.     // 在每个测试后清理
15.     // 例如：清除定时器、重置全局状态等
16.   })
17.   
18.   it('should increment count', () => {
19.     counter.increment()
20.     expect(counter.count).toBe(1)
21.   })
22.   
23.   it('should decrement count', () => {
24.     counter.decrement()
25.     expect(counter.count).toBe(-1)
26.   })
27. })

复制代码

4. 模拟外部依赖

在测试中，我们应该模拟外部依赖，如API调用、浏览器API等，以确保测试的稳定性和速度。

2. import { vi } from 'vitest'
4. // 模拟fetch函数
5. global.fetch = vi.fn()
7. describe('useFetch', () => {
8.   beforeEach(() => {
9.     fetch.mockClear()
10.   })
11.   
12.   it('should handle successful response', async () => {
13.     const mockData = { id: 1, name: 'Test' }
14.     fetch.mockResolvedValueOnce({
15.       ok: true,
16.       json: async () => mockData
17.     })
18.    
19.     const { data } = useFetch('https://api.example.com/data')
20.    
21.     await new Promise(resolve => setTimeout(resolve, 0))
22.    
23.     expect(data.value).toEqual(mockData)
24.   })
25. })

复制代码

2. import { vi } from 'vitest'
3. import { mount } from '@vue/test-utils'
4. import MyComponent from '../components/MyComponent.vue'
6. // 模拟整个模块
7. vi.mock('../utils/api', () => ({
8.   fetchData: vi.fn(() => Promise.resolve({ data: 'mock data' }))
9. }))
11. describe('MyComponent', () => {
12.   it('should use mocked API', async () => {
13.     const wrapper = mount(MyComponent)
14.    
15.     // 等待异步操作完成
16.     await new Promise(resolve => setTimeout(resolve, 0))
17.     await wrapper.vm.$nextTick()
18.    
19.     expect(wrapper.text()).toContain('mock data')
20.   })
21. })

复制代码

5. 测试用户交互

测试应该模拟真实用户的交互行为，而不是测试实现细节。

2. import { render, fireEvent, screen } from '@testing-library/vue'
3. import Button from '../components/Button.vue'
5. test('should call onClick when button is clicked', async () => {
6.   const onClick = vi.fn()
7.   
8.   render(Button, {
9.     props: {
10.       onClick
11.     }
12.   })
13.   
14.   // 使用screen查询元素，更接近用户行为
15.   const button = screen.getByRole('button', { name: /click me/i })
16.   
17.   // 使用fireEvent模拟用户事件
18.   await fireEvent.click(button)
19.   
20.   expect(onClick).toHaveBeenCalled()
21. })

复制代码

6. 测试可访问性

可访问性是现代Web应用的重要组成部分，应该在测试中考虑。

2. import { mount } from '@vue/test-utils'
3. import Button from '../components/Button.vue'
5. describe('Button Accessibility', () => {
6.   it('should have correct aria attributes when disabled', () => {
7.     const wrapper = mount(Button, {
8.       props: {
9.         disabled: true
10.       }
11.     })
12.    
13.     const button = wrapper.find('button')
14.     expect(button.attributes('aria-disabled')).toBe('true')
15.     expect(button.attributes('disabled')).toBeDefined()
16.   })
17.   
18.   it('should have correct aria-label when provided', () => {
19.     const wrapper = mount(Button, {
20.       props: {
21.         ariaLabel: 'Close dialog'
22.       }
23.     })
24.    
25.     const button = wrapper.find('button')
26.     expect(button.attributes('aria-label')).toBe('Close dialog')
27.   })
28. })

复制代码

7. 持续集成中的测试

将测试集成到CI/CD流程中，确保代码变更不会破坏现有功能。

2. name: Tests
4. on: [push, pull_request]
6. jobs:
7.   test:
8.     runs-on: ubuntu-latest
9.    
10.     steps:
11.     - uses: actions/checkout@v3
12.    
13.     - name: Set up Node.js
14.       uses: actions/setup-node@v3
15.       with:
16.         node-version: '18'
17.         cache: 'npm'
18.    
19.     - name: Install dependencies
20.       run: npm ci
21.    
22.     - name: Run unit tests
23.       run: npm run test:run
24.    
25.     - name: Run coverage
26.       run: npm run test:coverage
27.    
28.     - name: Upload coverage to Codecov
29.       uses: codecov/codecov-action@v3
30.       with:
31.         token: ${{ secrets.CODECOV_TOKEN }}
32.         file: ./coverage/lcov.info

复制代码

真实项目案例：任务管理应用

让我们通过一个更复杂的真实项目案例，综合运用前面所学的Vue3测试技术。

项目概述

我们将构建一个任务管理应用，包含以下功能：

• 任务的增删改查
• 任务状态管理（待办、进行中、已完成）
• 任务分类和筛选
• 数据持久化（使用localStorage）

项目结构

2. src/
3. ├── components/
4. │   ├── TaskItem.vue
5. │   ├── TaskList.vue
6. │   ├── TaskForm.vue
7. │   └── TaskFilters.vue
8. ├── composables/
9. │   ├── useTasks.js
10. │   └── useLocalStorage.js
11. ├── stores/
12. │   └── taskStore.js
13. └── App.vue

复制代码

实现与测试

composables/useLocalStorage.js:

2. import { ref, watchEffect } from 'vue'
4. export function useLocalStorage(key, defaultValue) {
5.   // 从localStorage获取值，如果没有则使用默认值
6.   const storedValue = localStorage.getItem(key)
7.   const initialValue = storedValue ? JSON.parse(storedValue) : defaultValue
8.   
9.   // 创建响应式引用
10.   const value = ref(initialValue)
11.   
12.   // 当值变化时，保存到localStorage
13.   watchEffect(() => {
14.     localStorage.setItem(key, JSON.stringify(value.value))
15.   })
16.   
17.   return value
18. }

复制代码

composables/useLocalStorage.test.js:

2. import { describe, it, expect, beforeEach } from 'vitest'
3. import { useLocalStorage } from '../composables/useLocalStorage'
5. describe('useLocalStorage', () => {
6.   beforeEach(() => {
7.     // 在每个测试前清除localStorage
8.     localStorage.clear()
9.   })
11.   it('uses default value when no stored value exists', () => {
12.     const value = useLocalStorage('test-key', 'default-value')
13.     expect(value.value).toBe('default-value')
14.   })
16.   it('uses stored value when it exists', () => {
17.     localStorage.setItem('test-key', JSON.stringify('stored-value'))
18.     const value = useLocalStorage('test-key', 'default-value')
19.     expect(value.value).toBe('stored-value')
20.   })
22.   it('saves to localStorage when value changes', () => {
23.     const value = useLocalStorage('test-key', 'initial-value')
24.    
25.     // 修改值
26.     value.value = 'new-value'
27.    
28.     // 检查localStorage是否更新
29.     expect(localStorage.getItem('test-key')).toBe(JSON.stringify('new-value'))
30.   })
32.   it('works with objects', () => {
33.     const defaultValue = { count: 0, name: 'test' }
34.     const value = useLocalStorage('test-object', defaultValue)
35.    
36.     expect(value.value).toEqual(defaultValue)
37.    
38.     // 修改对象
39.     value.value.count = 5
40.    
41.     // 检查localStorage是否更新
42.     expect(JSON.parse(localStorage.getItem('test-object'))).toEqual({ count: 5, name: 'test' })
43.   })
45.   it('works with arrays', () => {
46.     const defaultValue = ['item1', 'item2']
47.     const value = useLocalStorage('test-array', defaultValue)
48.    
49.     expect(value.value).toEqual(defaultValue)
50.    
51.     // 添加新项
52.     value.value.push('item3')
53.    
54.     // 检查localStorage是否更新
55.     expect(JSON.parse(localStorage.getItem('test-array'))).toEqual(['item1', 'item2', 'item3'])
56.   })
57. })

复制代码

composables/useTasks.js:

2. import { ref, computed } from 'vue'
3. import { useLocalStorage } from './useLocalStorage'
5. export function useTasks() {
6.   // 使用localStorage存储任务
7.   const tasks = useLocalStorage('tasks', [])
8.   
9.   // 获取所有任务
10.   const getAllTasks = computed(() => tasks.value)
11.   
12.   // 根据状态获取任务
13.   const getTasksByStatus = (status) => {
14.     return computed(() => tasks.value.filter(task => task.status === status))
15.   }
16.   
17.   // 添加新任务
18.   const addTask = (task) => {
19.     const newTask = {
20.       id: Date.now(),
21.       title: task.title,
22.       description: task.description || '',
23.       status: 'todo', // 默认状态为待办
24.       createdAt: new Date().toISOString(),
25.       updatedAt: new Date().toISOString()
26.     }
27.    
28.     tasks.value.push(newTask)
29.     return newTask
30.   }
31.   
32.   // 更新任务
33.   const updateTask = (id, updates) => {
34.     const index = tasks.value.findIndex(task => task.id === id)
35.     if (index !== -1) {
36.       tasks.value[index] = {
37.         ...tasks.value[index],
38.         ...updates,
39.         updatedAt: new Date().toISOString()
40.       }
41.       return tasks.value[index]
42.     }
43.     return null
44.   }
45.   
46.   // 删除任务
47.   const deleteTask = (id) => {
48.     const index = tasks.value.findIndex(task => task.id === id)
49.     if (index !== -1) {
50.       const deletedTask = tasks.value[index]
51.       tasks.value.splice(index, 1)
52.       return deletedTask
53.     }
54.     return null
55.   }
56.   
57.   // 获取任务统计
58.   const getTaskStats = computed(() => {
59.     const stats = {
60.       total: tasks.value.length,
61.       todo: 0,
62.       inProgress: 0,
63.       completed: 0
64.     }
65.    
66.     tasks.value.forEach(task => {
67.       if (task.status === 'todo') stats.todo++
68.       else if (task.status === 'inProgress') stats.inProgress++
69.       else if (task.status === 'completed') stats.completed++
70.     })
71.    
72.     return stats
73.   })
74.   
75.   return {
76.     getAllTasks,
77.     getTasksByStatus,
78.     addTask,
79.     updateTask,
80.     deleteTask,
81.     getTaskStats
82.   }
83. }

复制代码

composables/useTasks.test.js:

2. import { describe, it, expect, beforeEach } from 'vitest'
3. import { useTasks } from '../composables/useTasks'
5. describe('useTasks', () => {
6.   let tasks
7.   
8.   beforeEach(() => {
9.     // 在每个测试前创建新的tasks实例
10.     tasks = useTasks()
11.   })
12.   
13.   it('starts with empty tasks array', () => {
14.     expect(tasks.getAllTasks.value).toEqual([])
15.   })
16.   
17.   it('adds a new task', () => {
18.     const newTask = tasks.addTask({
19.       title: 'Test Task',
20.       description: 'Test Description'
21.     })
22.    
23.     expect(newTask.title).toBe('Test Task')
24.     expect(newTask.description).toBe('Test Description')
25.     expect(newTask.status).toBe('todo')
26.     expect(newTask.id).toBeDefined()
27.     expect(tasks.getAllTasks.value).toHaveLength(1)
28.   })
29.   
30.   it('updates a task', () => {
31.     const task = tasks.addTask({
32.       title: 'Original Title'
33.     })
34.    
35.     const updatedTask = tasks.updateTask(task.id, {
36.       title: 'Updated Title',
37.       status: 'inProgress'
38.     })
39.    
40.     expect(updatedTask.title).toBe('Updated Title')
41.     expect(updatedTask.status).toBe('inProgress')
42.     expect(updatedTask.updatedAt).not.toBe(task.updatedAt)
43.   })
44.   
45.   it('returns null when updating non-existent task', () => {
46.     const result = tasks.updateTask(999, { title: 'Updated' })
47.     expect(result).toBeNull()
48.   })
49.   
50.   it('deletes a task', () => {
51.     const task = tasks.addTask({
52.       title: 'Task to Delete'
53.     })
54.    
55.     const deletedTask = tasks.deleteTask(task.id)
56.    
57.     expect(deletedTask.id).toBe(task.id)
58.     expect(tasks.getAllTasks.value).toHaveLength(0)
59.   })
60.   
61.   it('returns null when deleting non-existent task', () => {
62.     const result = tasks.deleteTask(999)
63.     expect(result).toBeNull()
64.   })
65.   
66.   it('filters tasks by status', () => {
67.     tasks.addTask({ title: 'Todo Task 1' })
68.     tasks.addTask({ title: 'Todo Task 2' })
69.    
70.     const inProgressTask = tasks.addTask({ title: 'In Progress Task' })
71.     tasks.updateTask(inProgressTask.id, { status: 'inProgress' })
72.    
73.     const completedTask = tasks.addTask({ title: 'Completed Task' })
74.     tasks.updateTask(completedTask.id, { status: 'completed' })
75.    
76.     const todoTasks = tasks.getTasksByStatus('todo')
77.     const inProgressTasks = tasks.getTasksByStatus('inProgress')
78.     const completedTasks = tasks.getTasksByStatus('completed')
79.    
80.     expect(todoTasks.value).toHaveLength(2)
81.     expect(inProgressTasks.value).toHaveLength(1)
82.     expect(completedTasks.value).toHaveLength(1)
83.   })
84.   
85.   it('calculates task statistics correctly', () => {
86.     tasks.addTask({ title: 'Todo Task 1' })
87.     tasks.addTask({ title: 'Todo Task 2' })
88.    
89.     const inProgressTask = tasks.addTask({ title: 'In Progress Task' })
90.     tasks.updateTask(inProgressTask.id, { status: 'inProgress' })
91.    
92.     const completedTask = tasks.addTask({ title: 'Completed Task' })
93.     tasks.updateTask(completedTask.id, { status: 'completed' })
94.    
95.     const stats = tasks.getTaskStats
96.    
97.     expect(stats.value.total).toBe(4)
98.     expect(stats.value.todo).toBe(2)
99.     expect(stats.value.inProgress).toBe(1)
100.     expect(stats.value.completed).toBe(1)
101.   })
102. })

复制代码

components/TaskItem.vue:

2. <template>
3.   <div class="task-item" :class="task.status">
4.     <div class="task-content" @click="$emit('select', task.id)">
5.       <h3>{{ task.title }}</h3>
6.       <p v-if="task.description">{{ task.description }}</p>
7.       <div class="task-meta">
8.         <span class="task-date">Created: {{ formatDate(task.createdAt) }}</span>
9.         <span class="task-status">{{ statusLabel }}</span>
10.       </div>
11.     </div>
12.     <div class="task-actions">
13.       <button
14.         v-if="task.status !== 'completed'"
15.         class="btn-complete"
16.         @click="$emit('complete', task.id)"
17.         title="Mark as completed"
18.       >
19.         ✓
20.       </button>
21.       <button
22.         class="btn-delete"
23.         @click="$emit('delete', task.id)"
24.         title="Delete task"
25.       >
26.         ×
27.       </button>
28.     </div>
29.   </div>
30. </template>
32. <script setup>
33. import { computed } from 'vue'
35. const props = defineProps({
36.   task: {
37.     type: Object,
38.     required: true
39.   }
40. })
42. defineEmits(['select', 'complete', 'delete'])
44. const statusLabel = computed(() => {
45.   switch (props.task.status) {
46.     case 'todo': return 'To Do'
47.     case 'inProgress': return 'In Progress'
48.     case 'completed': return 'Completed'
49.     default: return props.task.status
50.   }
51. })
53. const formatDate = (dateString) => {
54.   const date = new Date(dateString)
55.   return date.toLocaleDateString()
56. }
57. </script>
59. <style scoped>
60. .task-item {
61.   display: flex;
62.   justify-content: space-between;
63.   padding: 12px;
64.   margin-bottom: 8px;
65.   border-radius: 4px;
66.   background-color: #fff;
67.   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
68.   transition: transform 0.2s;
69. }
71. .task-item:hover {
72.   transform: translateY(-2px);
73.   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
74. }
76. .task-item.todo {
77.   border-left: 4px solid #3498db;
78. }
80. .task-item.inProgress {
81.   border-left: 4px solid #f39c12;
82. }
84. .task-item.completed {
85.   border-left: 4px solid #2ecc71;
86.   opacity: 0.7;
87. }
89. .task-content {
90.   flex: 1;
91.   cursor: pointer;
92. }
94. .task-content h3 {
95.   margin: 0 0 8px 0;
96.   font-size: 16px;
97. }
99. .task-content p {
100.   margin: 0 0 8px 0;
101.   color: #666;
102.   font-size: 14px;
103. }
105. .task-meta {
106.   display: flex;
107.   justify-content: space-between;
108.   font-size: 12px;
109.   color: #999;
110. }
112. .task-status {
113.   font-weight: bold;
114.   text-transform: uppercase;
115. }
117. .task-actions {
118.   display: flex;
119.   flex-direction: column;
120.   justify-content: center;
121.   margin-left: 10px;
122. }
124. .btn-complete, .btn-delete {
125.   background: none;
126.   border: none;
127.   cursor: pointer;
128.   font-size: 16px;
129.   padding: 4px 8px;
130.   border-radius: 4px;
131.   margin: 2px 0;
132. }
134. .btn-complete {
135.   color: #2ecc71;
136. }
138. .btn-complete:hover {
139.   background-color: rgba(46, 204, 113, 0.1);
140. }
142. .btn-delete {
143.   color: #e74c3c;
144. }
146. .btn-delete:hover {
147.   background-color: rgba(231, 76, 60, 0.1);
148. }
149. </style>

复制代码

components/TaskItem.test.js:

2. import { describe, it, expect } from 'vitest'
3. import { mount } from '@vue/test-utils'
4. import TaskItem from '../components/TaskItem.vue'
6. describe('TaskItem.vue', () => {
7.   const mockTask = {
8.     id: 1,
9.     title: 'Test Task',
10.     description: 'Test Description',
11.     status: 'todo',
12.     createdAt: '2023-01-01T00:00:00.000Z',
13.     updatedAt: '2023-01-01T00:00:00.000Z'
14.   }
16.   it('renders task information', () => {
17.     const wrapper = mount(TaskItem, {
18.       props: {
19.         task: mockTask
20.       }
21.     })
22.    
23.     expect(wrapper.text()).toContain(mockTask.title)
24.     expect(wrapper.text()).toContain(mockTask.description)
25.     expect(wrapper.text()).toContain('To Do')
26.   })
28.   it('applies correct status class', () => {
29.     const wrapper = mount(TaskItem, {
30.       props: {
31.         task: mockTask
32.       }
33.     })
34.    
35.     expect(wrapper.classes()).toContain('todo')
36.   })
38.   it('emits select event when task content is clicked', async () => {
39.     const wrapper = mount(TaskItem, {
40.       props: {
41.         task: mockTask
42.       }
43.     })
44.    
45.     await wrapper.find('.task-content').trigger('click')
46.    
47.     expect(wrapper.emitted()).toHaveProperty('select')
48.     expect(wrapper.emitted('select')[0]).toEqual([mockTask.id])
49.   })
51.   it('emits complete event when complete button is clicked', async () => {
52.     const wrapper = mount(TaskItem, {
53.       props: {
54.         task: mockTask
55.       }
56.     })
57.    
58.     await wrapper.find('.btn-complete').trigger('click')
59.    
60.     expect(wrapper.emitted()).toHaveProperty('complete')
61.     expect(wrapper.emitted('complete')[0]).toEqual([mockTask.id])
62.   })
64.   it('emits delete event when delete button is clicked', async () => {
65.     const wrapper = mount(TaskItem, {
66.       props: {
67.         task: mockTask
68.       }
69.     })
70.    
71.     await wrapper.find('.btn-delete').trigger('click')
72.    
73.     expect(wrapper.emitted()).toHaveProperty('delete')
74.     expect(wrapper.emitted('delete')[0]).toEqual([mockTask.id])
75.   })
77.   it('does not show complete button for completed tasks', () => {
78.     const completedTask = { ...mockTask, status: 'completed' }
79.     const wrapper = mount(TaskItem, {
80.       props: {
81.         task: completedTask
82.       }
83.     })
84.    
85.     expect(wrapper.find('.btn-complete').exists()).toBe(false)
86.   })
88.   it('formats date correctly', () => {
89.     const wrapper = mount(TaskItem, {
90.       props: {
91.         task: mockTask
92.       }
93.     })
94.    
95.     // 检查日期是否被格式化（不包含ISO格式的时间部分）
96.     expect(wrapper.text()).not.toContain('T00:00:00.000Z')
97.   })
99.   it('applies different styles for different statuses', () => {
100.     const todoWrapper = mount(TaskItem, {
101.       props: {
102.         task: { ...mockTask, status: 'todo' }
103.       }
104.     })
105.    
106.     const inProgressWrapper = mount(TaskItem, {
107.       props: {
108.         task: { ...mockTask, status: 'inProgress' }
109.       }
110.     })
111.    
112.     const completedWrapper = mount(TaskItem, {
113.       props: {
114.         task: { ...mockTask, status: 'completed' }
115.       }
116.     })
117.    
118.     expect(todoWrapper.classes()).toContain('todo')
119.     expect(inProgressWrapper.classes()).toContain('inProgress')
120.     expect(completedWrapper.classes()).toContain('completed')
121.    
122.     // 检查状态文本
123.     expect(todoWrapper.text()).toContain('To Do')
124.     expect(inProgressWrapper.text()).toContain('In Progress')
125.     expect(completedWrapper.text()).toContain('Completed')
126.   })
127. })

复制代码

components/TaskList.vue:

2. <template>
3.   <div class="task-list">
4.     <div v-if="tasks.length === 0" class="empty-state">
5.       <p>No tasks found. Create a new task to get started!</p>
6.     </div>
7.     <div v-else>
8.       <TaskItem
9.         v-for="task in tasks"
10.         :key="task.id"
11.         :task="task"
12.         @select="onSelectTask"
13.         @complete="onCompleteTask"
14.         @delete="onDeleteTask"
15.       />
16.     </div>
17.   </div>
18. </template>
20. <script setup>
21. import { defineProps, defineEmits } from 'vue'
22. import TaskItem from './TaskItem.vue'
24. const props = defineProps({
25.   tasks: {
26.     type: Array,
27.     required: true
28.   }
29. })
31. const emit = defineEmits(['select-task', 'complete-task', 'delete-task'])
33. const onSelectTask = (taskId) => {
34.   emit('select-task', taskId)
35. }
37. const onCompleteTask = (taskId) => {
38.   emit('complete-task', taskId)
39. }
41. const onDeleteTask = (taskId) => {
42.   emit('delete-task', taskId)
43. }
44. </script>
46. <style scoped>
47. .task-list {
48.   margin-top: 20px;
49. }
51. .empty-state {
52.   text-align: center;
53.   padding: 40px 20px;
54.   background-color: #f9f9f9;
55.   border-radius: 8px;
56.   color: #666;
57. }
58. </style>

复制代码

components/TaskList.test.js:

2. import { describe, it, expect } from 'vitest'
3. import { mount } from '@vue/test-utils'
4. import TaskList from '../components/TaskList.vue'
5. import TaskItem from '../components/TaskItem.vue'
7. // 模拟TaskItem组件
8. vi.mock('../components/TaskItem.vue', () => ({
9.   default: {
10.     name: 'TaskItem',
11.     props: ['task'],
12.     emits: ['select', 'complete', 'delete'],
13.     template: '<div class="mock-task-item">{{ task.title }}</div>'
14.   }
15. }))
17. describe('TaskList.vue', () => {
18.   const mockTasks = [
19.     { id: 1, title: 'Task 1', status: 'todo' },
20.     { id: 2, title: 'Task 2', status: 'inProgress' },
21.     { id: 3, title: 'Task 3', status: 'completed' }
22.   ]
24.   it('renders empty state when no tasks are provided', () => {
25.     const wrapper = mount(TaskList, {
26.       props: {
27.         tasks: []
28.       }
29.     })
30.    
31.     expect(wrapper.find('.empty-state').exists()).toBe(true)
32.     expect(wrapper.text()).toContain('No tasks found')
33.   })
35.   it('renders task items when tasks are provided', () => {
36.     const wrapper = mount(TaskList, {
37.       props: {
38.         tasks: mockTasks
39.       }
40.     })
41.    
42.     expect(wrapper.find('.empty-state').exists()).toBe(false)
43.     expect(wrapper.findAll('.mock-task-item')).toHaveLength(mockTasks.length)
44.   })
46.   it('emits select-task event when TaskItem emits select', async () => {
47.     const wrapper = mount(TaskList, {
48.       props: {
49.         tasks: mockTasks
50.       }
51.     })
52.    
53.     // 找到第一个TaskItem并触发select事件
54.     await wrapper.findAllComponents(TaskItem)[0].$emit('select', 1)
55.    
56.     expect(wrapper.emitted()).toHaveProperty('select-task')
57.     expect(wrapper.emitted('select-task')[0]).toEqual([1])
58.   })
60.   it('emits complete-task event when TaskItem emits complete', async () => {
61.     const wrapper = mount(TaskList, {
62.       props: {
63.         tasks: mockTasks
64.       }
65.     })
66.    
67.     // 找到第一个TaskItem并触发complete事件
68.     await wrapper.findAllComponents(TaskItem)[0].$emit('complete', 1)
69.    
70.     expect(wrapper.emitted()).toHaveProperty('complete-task')
71.     expect(wrapper.emitted('complete-task')[0]).toEqual([1])
72.   })
74.   it('emits delete-task event when TaskItem emits delete', async () => {
75.     const wrapper = mount(TaskList, {
76.       props: {
77.         tasks: mockTasks
78.       }
79.     })
80.    
81.     // 找到第一个TaskItem并触发delete事件
82.     await wrapper.findAllComponents(TaskItem)[0].$emit('delete', 1)
83.    
84.     expect(wrapper.emitted()).toHaveProperty('delete-task')
85.     expect(wrapper.emitted('delete-task')[0]).toEqual([1])
86.   })
87. })

复制代码

components/TaskForm.vue:

2. <template>
3.   <div class="task-form">
4.     <h2>{{ isEditing ? 'Edit Task' : 'Create New Task' }}</h2>
5.     <form @submit.prevent="handleSubmit">
6.       <div class="form-group">
7.         <label for="title">Title *</label>
8.         <input
9.           id="title"
10.           v-model="formData.title"
11.           type="text"
12.           required
13.           placeholder="Enter task title"
14.         />
15.       </div>
16.       
17.       <div class="form-group">
18.         <label for="description">Description</label>
19.         <textarea
20.           id="description"
21.           v-model="formData.description"
22.           placeholder="Enter task description"
23.           rows="3"
24.         ></textarea>
25.       </div>
26.       
27.       <div class="form-group">
28.         <label for="status">Status</label>
29.         <select id="status" v-model="formData.status">
30.           <option value="todo">To Do</option>
31.           <option value="inProgress">In Progress</option>
32.           <option value="completed">Completed</option>
33.         </select>
34.       </div>
35.       
36.       <div class="form-actions">
37.         <button type="submit" class="btn-primary">
38.           {{ isEditing ? 'Update Task' : 'Create Task' }}
39.         </button>
40.         <button type="button" class="btn-secondary" @click="handleCancel">
41.           Cancel
42.         </button>
43.       </div>
44.     </form>
45.   </div>
46. </template>
48. <script setup>
49. import { ref, computed, watch } from 'vue'
51. const props = defineProps({
52.   task: {
53.     type: Object,
54.     default: null
55.   }
56. })
58. const emit = defineEmits(['submit', 'cancel'])
60. // 表单数据
61. const formData = ref({
62.   title: '',
63.   description: '',
64.   status: 'todo'
65. })
67. // 计算是否处于编辑模式
68. const isEditing = computed(() => props.task !== null)
70. // 监听props.task变化，更新表单数据
71. watch(() => props.task, (newTask) => {
72.   if (newTask) {
73.     formData.value = {
74.       title: newTask.title,
75.       description: newTask.description,
76.       status: newTask.status
77.     }
78.   } else {
79.     resetForm()
80.   }
81. }, { immediate: true })
83. // 重置表单
84. const resetForm = () => {
85.   formData.value = {
86.     title: '',
87.     description: '',
88.     status: 'todo'
89.   }
90. }
92. // 处理表单提交
93. const handleSubmit = () => {
94.   emit('submit', {
95.     ...formData.value,
96.     id: props.task ? props.task.id : undefined
97.   })
98. }
100. // 处理取消
101. const handleCancel = () => {
102.   resetForm()
103.   emit('cancel')
104. }
105. </script>
107. <style scoped>
108. .task-form {
109.   background-color: #fff;
110.   padding: 20px;
111.   border-radius: 8px;
112.   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
113.   margin-bottom: 20px;
114. }
116. h2 {
117.   margin-top: 0;
118.   margin-bottom: 20px;
119.   color: #333;
120. }
122. .form-group {
123.   margin-bottom: 15px;
124. }
126. label {
127.   display: block;
128.   margin-bottom: 5px;
129.   font-weight: bold;
130.   color: #555;
131. }
133. input[type="text"],
134. textarea,
135. select {
136.   width: 100%;
137.   padding: 10px;
138.   border: 1px solid #ddd;
139.   border-radius: 4px;
140.   font-size: 14px;
141. }
143. textarea {
144.   resize: vertical;
145. }
147. .form-actions {
148.   display: flex;
149.   gap: 10px;
150.   margin-top: 20px;
151. }
153. .btn-primary,
154. .btn-secondary {
155.   padding: 10px 20px;
156.   border: none;
157.   border-radius: 4px;
158.   font-size: 14px;
159.   cursor: pointer;
160.   transition: background-color 0.2s;
161. }
163. .btn-primary {
164.   background-color: #3498db;
165.   color: white;
166. }
168. .btn-primary:hover {
169.   background-color: #2980b9;
170. }
172. .btn-secondary {
173.   background-color: #ecf0f1;
174.   color: #333;
175. }
177. .btn-secondary:hover {
178.   background-color: #bdc3c7;
179. }
180. </style>

复制代码

components/TaskForm.test.js:

2. import { describe, it, expect } from 'vitest'
3. import { mount } from '@vue/test-utils'
4. import TaskForm from '../components/TaskForm.vue'
6. describe('TaskForm.vue', () => {
7.   it('renders create form by default', () => {
8.     const wrapper = mount(TaskForm)
9.    
10.     expect(wrapper.find('h2').text()).toBe('Create New Task')
11.     expect(wrapper.find('button[type="submit"]').text()).toBe('Create Task')
12.   })
14.   it('renders edit form when task prop is provided', () => {
15.     const task = {
16.       id: 1,
17.       title: 'Edit Task',
18.       description: 'Edit Description',
19.       status: 'inProgress'
20.     }
21.    
22.     const wrapper = mount(TaskForm, {
23.       props: {
24.         task
25.       }
26.     })
27.    
28.     expect(wrapper.find('h2').text()).toBe('Edit Task')
29.     expect(wrapper.find('button[type="submit"]').text()).toBe('Update Task')
30.     expect(wrapper.find('#title').element.value).toBe(task.title)
31.     expect(wrapper.find('#description').element.value).toBe(task.description)
32.     expect(wrapper.find('#status').element.value).toBe(task.status)
33.   })
35.   it('emits submit event with form data when submitted', async () => {
36.     const wrapper = mount(TaskForm)
37.    
38.     // 填写表单
39.     await wrapper.find('#title').setValue('New Task')
40.     await wrapper.find('#description').setValue('New Description')
41.     await wrapper.find('#status').setValue('inProgress')
42.    
43.     // 提交表单
44.     await wrapper.find('form').trigger('submit')
45.    
46.     expect(wrapper.emitted()).toHaveProperty('submit')
47.     expect(wrapper.emitted('submit')[0][0]).toEqual({
48.       title: 'New Task',
49.       description: 'New Description',
50.       status: 'inProgress',
51.       id: undefined
52.     })
53.   })
55.   it('includes task id when editing', async () => {
56.     const task = {
57.       id: 1,
58.       title: 'Edit Task',
59.       description: 'Edit Description',
60.       status: 'inProgress'
61.     }
62.    
63.     const wrapper = mount(TaskForm, {
64.       props: {
65.         task
66.       }
67.     })
68.    
69.     // 修改表单
70.     await wrapper.find('#title').setValue('Updated Task')
71.    
72.     // 提交表单
73.     await wrapper.find('form').trigger('submit')
74.    
75.     expect(wrapper.emitted()).toHaveProperty('submit')
76.     expect(wrapper.emitted('submit')[0][0]).toEqual({
77.       title: 'Updated Task',
78.       description: 'Edit Description',
79.       status: 'inProgress',
80.       id: 1
81.     })
82.   })
84.   it('emits cancel event when cancel button is clicked', async () => {
85.     const wrapper = mount(TaskForm)
86.    
87.     await wrapper.find('.btn-secondary').trigger('click')
88.    
89.     expect(wrapper.emitted()).toHaveProperty('cancel')
90.   })
92.   it('resets form when cancel button is clicked', async () => {
93.     const wrapper = mount(TaskForm)
94.    
95.     // 填写表单
96.     await wrapper.find('#title').setValue('New Task')
97.     await wrapper.find('#description').setValue('New Description')
98.    
99.     // 点击取消
100.     await wrapper.find('.btn-secondary').trigger('click')
101.    
102.     // 检查表单是否重置
103.     expect(wrapper.find('#title').element.value).toBe('')
104.     expect(wrapper.find('#description').element.value).toBe('')
105.     expect(wrapper.find('#status').element.value).toBe('todo')
106.   })
108.   it('updates form when task prop changes', async () => {
109.     const wrapper = mount(TaskForm)
110.    
111.     // 初始状态
112.     expect(wrapper.find('#title').element.value).toBe('')
113.     expect(wrapper.find('#description').element.value).toBe('')
114.    
115.     // 更新task prop
116.     const newTask = {
117.       id: 2,
118.       title: 'New Task',
119.       description: 'New Description',
120.       status: 'completed'
121.     }
122.    
123.     await wrapper.setProps({ task: newTask })
124.    
125.     // 检查表单是否更新
126.     expect(wrapper.find('#title').element.value).toBe(newTask.title)
127.     expect(wrapper.find('#description').element.value).toBe(newTask.description)
128.     expect(wrapper.find('#status').element.value).toBe(newTask.status)
129.   })
131.   it('requires title field', async () => {
132.     const wrapper = mount(TaskForm)
133.    
134.     // 尝试提交空表单
135.     await wrapper.find('form').trigger('submit.prevent')
136.    
137.     // 表单验证应该阻止提交
138.     expect(wrapper.emitted()).not.toHaveProperty('submit')
139.   })
140. })

复制代码

App.vue:

2. <template>
3.   <div class="app">
4.     <header class="app-header">
5.       <h1>Task Manager</h1>
6.       <div class="task-stats">
7.         <div class="stat">
8.           <span class="stat-value">{{ stats.total }}</span>
9.           <span class="stat-label">Total</span>
10.         </div>
11.         <div class="stat">
12.           <span class="stat-value">{{ stats.todo }}</span>
13.           <span class="stat-label">To Do</span>
14.         </div>
15.         <div class="stat">
16.           <span class="stat-value">{{ stats.inProgress }}</span>
17.           <span class="stat-label">In Progress</span>
18.         </div>
19.         <div class="stat">
20.           <span class="stat-value">{{ stats.completed }}</span>
21.           <span class="stat-label">Completed</span>
22.         </div>
23.       </div>
24.     </header>
25.    
26.     <main class="app-main">
27.       <TaskForm
28.         :task="editingTask"
29.         @submit="handleTaskSubmit"
30.         @cancel="handleFormCancel"
31.       />
32.       
33.       <div class="filter-section">
34.         <h3>Filter Tasks</h3>
35.         <div class="filter-buttons">
36.           <button
37.             class="filter-btn"
38.             :class="{ active: currentFilter === 'all' }"
39.             @click="currentFilter = 'all'"
40.           >
41.             All
42.           </button>
43.           <button
44.             class="filter-btn"
45.             :class="{ active: currentFilter === 'todo' }"
46.             @click="currentFilter = 'todo'"
47.           >
48.             To Do
49.           </button>
50.           <button
51.             class="filter-btn"
52.             :class="{ active: currentFilter === 'inProgress' }"
53.             @click="currentFilter = 'inProgress'"
54.           >
55.             In Progress
56.           </button>
57.           <button
58.             class="filter-btn"
59.             :class="{ active: currentFilter === 'completed' }"
60.             @click="currentFilter = 'completed'"
61.           >
62.             Completed
63.           </button>
64.         </div>
65.       </div>
66.       
67.       <TaskList
68.         :tasks="filteredTasks"
69.         @select-task="handleSelectTask"
70.         @complete-task="handleCompleteTask"
71.         @delete-task="handleDeleteTask"
72.       />
73.     </main>
74.   </div>
75. </template>
77. <script setup>
78. import { ref, computed, onMounted } from 'vue'
79. import { useTasks } from './composables/useTasks'
80. import TaskForm from './components/TaskForm.vue'
81. import TaskList from './components/TaskList.vue'
83. const { getAllTasks, addTask, updateTask, deleteTask, getTaskStats } = useTasks()
85. // 任务统计
86. const stats = computed(() => getTaskStats.value)
88. // 当前过滤器
89. const currentFilter = ref('all')
91. // 当前编辑的任务
92. const editingTask = ref(null)
94. // 根据过滤器获取任务
95. const filteredTasks = computed(() => {
96.   if (currentFilter.value === 'all') {
97.     return getAllTasks.value
98.   }
99.   return getAllTasks.value.filter(task => task.status === currentFilter.value)
100. })
102. // 处理任务表单提交
103. const handleTaskSubmit = (taskData) => {
104.   if (taskData.id) {
105.     // 更新现有任务
106.     updateTask(taskData.id, taskData)
107.   } else {
108.     // 创建新任务
109.     addTask(taskData)
110.   }
111.   
112.   // 重置编辑状态
113.   editingTask.value = null
114. }
116. // 处理表单取消
117. const handleFormCancel = () => {
118.   editingTask.value = null
119. }
121. // 处理任务选择
122. const handleSelectTask = (taskId) => {
123.   const task = getAllTasks.value.find(t => t.id === taskId)
124.   if (task) {
125.     editingTask.value = task
126.   }
127. }
129. // 处理任务完成
130. const handleCompleteTask = (taskId) => {
131.   updateTask(taskId, { status: 'completed' })
132. }
134. // 处理任务删除
135. const handleDeleteTask = (taskId) => {
136.   deleteTask(taskId)
137.   
138.   // 如果删除的是当前编辑的任务，重置编辑状态
139.   if (editingTask.value && editingTask.value.id === taskId) {
140.     editingTask.value = null
141.   }
142. }
143. </script>
145. <style>
146. * {
147.   box-sizing: border-box;
148.   margin: 0;
149.   padding: 0;
150. }
152. body {
153.   font-family: 'Arial', sans-serif;
154.   line-height: 1.6;
155.   color: #333;
156.   background-color: #f5f7fa;
157. }
159. .app {
160.   max-width: 800px;
161.   margin: 0 auto;
162.   padding: 20px;
163. }
165. .app-header {
166.   margin-bottom: 30px;
167.   text-align: center;
168. }
170. .app-header h1 {
171.   color: #2c3e50;
172.   margin-bottom: 20px;
173. }
175. .task-stats {
176.   display: flex;
177.   justify-content: space-around;
178.   background-color: #fff;
179.   padding: 15px;
180.   border-radius: 8px;
181.   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
182. }
184. .stat {
185.   display: flex;
186.   flex-direction: column;
187.   align-items: center;
188. }
190. .stat-value {
191.   font-size: 24px;
192.   font-weight: bold;
193.   color: #3498db;
194. }
196. .stat-label {
197.   font-size: 14px;
198.   color: #7f8c8d;
199. }
201. .app-main {
202.   background-color: #fff;
203.   padding: 20px;
204.   border-radius: 8px;
205.   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
206. }
208. .filter-section {
209.   margin: 20px 0;
210. }
212. .filter-section h3 {
213.   margin-bottom: 10px;
214.   color: #2c3e50;
215. }
217. .filter-buttons {
218.   display: flex;
219.   gap: 10px;
220. }
222. .filter-btn {
223.   padding: 8px 16px;
224.   border: 1px solid #ddd;
225.   background-color: #fff;
226.   border-radius: 4px;
227.   cursor: pointer;
228.   transition: all 0.2s;
229. }
231. .filter-btn:hover {
232.   background-color: #f1f2f6;
233. }
235. .filter-btn.active {
236.   background-color: #3498db;
237.   color: white;
238.   border-color: #3498db;
239. }
240. </style>

复制代码

App.test.js:

2. import { describe, it, expect, vi, beforeEach } from 'vitest'
3. import { mount } from '@vue/test-utils'
4. import { createPinia, setActivePinia } from 'pinia'
5. import App from '../App.vue'
7. // 模拟组件
8. vi.mock('../components/TaskForm.vue', () => ({
9.   default: {
10.     name: 'TaskForm',
11.     props: ['task'],
12.     emits: ['submit', 'cancel'],
13.     template: '<div class="mock-task-form"></div>'
14.   }
15. }))
17. vi.mock('../components/TaskList.vue', () => ({
18.   default: {
19.     name: 'TaskList',
20.     props: ['tasks'],
21.     emits: ['select-task', 'complete-task', 'delete-task'],
22.     template: '<div class="mock-task-list"></div>'
23.   }
24. }))
26. // 模拟组合式函数
27. const mockUseTasks = {
28.   getAllTasks: { value: [] },
29.   addTask: vi.fn(),
30.   updateTask: vi.fn(),
31.   deleteTask: vi.fn(),
32.   getTaskStats: { value: { total: 0, todo: 0, inProgress: 0, completed: 0 } }
33. }
35. vi.mock('../composables/useTasks', () => ({
36.   useTasks: () => mockUseTasks
37. }))
39. describe('App.vue', () => {
40.   let wrapper
42.   beforeEach(() => {
43.     // 创建新的pinia实例
44.     setActivePinia(createPinia())
45.    
46.     // 重置模拟函数
47.     vi.clearAllMocks()
48.    
49.     // 重置任务数据
50.     mockUseTasks.getAllTasks.value = []
51.     mockUseTasks.getTaskStats.value = { total: 0, todo: 0, inProgress: 0, completed: 0 }
52.    
53.     // 挂载组件
54.     wrapper = mount(App)
55.   })
57.   it('renders correctly', () => {
58.     expect(wrapper.find('h1').text()).toBe('Task Manager')
59.     expect(wrapper.findComponent({ name: 'TaskForm' }).exists()).toBe(true)
60.     expect(wrapper.findComponent({ name: 'TaskList' }).exists()).toBe(true)
61.   })
63.   it('displays task statistics', () => {
64.     mockUseTasks.getTaskStats.value = { total: 5, todo: 2, inProgress: 2, completed: 1 }
65.    
66.     wrapper = mount(App)
67.    
68.     const stats = wrapper.findAll('.stat')
69.     expect(stats[0].find('.stat-value').text()).toBe('5')
70.     expect(stats[1].find('.stat-value').text()).toBe('2')
71.     expect(stats[2].find('.stat-value').text()).toBe('2')
72.     expect(stats[3].find('.stat-value').text()).toBe('1')
73.   })
75.   it('filters tasks correctly', async () => {
76.     mockUseTasks.getAllTasks.value = [
77.       { id: 1, title: 'Task 1', status: 'todo' },
78.       { id: 2, title: 'Task 2', status: 'inProgress' },
79.       { id: 3, title: 'Task 3', status: 'completed' }
80.     ]
81.    
82.     wrapper = mount(App)
83.    
84.     // 检查初始状态（显示所有任务）
85.     expect(wrapper.findComponent({ name: 'TaskList' }).props('tasks')).toHaveLength(3)
86.    
87.     // 应用过滤器
88.     await wrapper.findAll('.filter-btn')[1].trigger('click') // 点击"To Do"按钮
89.    
90.     // 检查过滤后的任务
91.     expect(wrapper.findComponent({ name: 'TaskList' }).props('tasks')).toHaveLength(1)
92.     expect(wrapper.findComponent({ name: 'TaskList' }).props('tasks')[0].status).toBe('todo')
93.   })
95.   it('handles task form submission', async () => {
96.     const taskData = {
97.       title: 'New Task',
98.       description: 'New Description',
99.       status: 'todo'
100.     }
101.    
102.     // 触发表单提交
103.     await wrapper.findComponent({ name: 'TaskForm' }).vm.$emit('submit', taskData)
104.    
105.     // 检查是否调用了addTask
106.     expect(mockUseTasks.addTask).toHaveBeenCalledWith(taskData)
107.   })
109.   it('handles task form submission for editing', async () => {
110.     const taskData = {
111.       id: 1,
112.       title: 'Updated Task',
113.       description: 'Updated Description',
114.       status: 'inProgress'
115.     }
116.    
117.     // 触发表单提交
118.     await wrapper.findComponent({ name: 'TaskForm' }).vm.$emit('submit', taskData)
119.    
120.     // 检查是否调用了updateTask
121.     expect(mockUseTasks.updateTask).toHaveBeenCalledWith(1, taskData)
122.   })
124.   it('handles task selection', async () => {
125.     const taskId = 1
126.    
127.     // 触发任务选择
128.     await wrapper.findComponent({ name: 'TaskList' }).vm.$emit('select-task', taskId)
129.    
130.     // 检查是否设置了editingTask
131.     expect(wrapper.vm.editingTask).not.toBeNull()
132.   })
134.   it('handles task completion', async () => {
135.     const taskId = 1
136.    
137.     // 触发任务完成
138.     await wrapper.findComponent({ name: 'TaskList' }).vm.$emit('complete-task', taskId)
139.    
140.     // 检查是否调用了updateTask
141.     expect(mockUseTasks.updateTask).toHaveBeenCalledWith(taskId, { status: 'completed' })
142.   })
144.   it('handles task deletion', async () => {
145.     const taskId = 1
146.    
147.     // 设置当前编辑的任务
148.     wrapper.vm.editingTask = { id: taskId }
149.    
150.     // 触发任务删除
151.     await wrapper.findComponent({ name: 'TaskList' }).vm.$emit('delete-task', taskId)
152.    
153.     // 检查是否调用了deleteTask
154.     expect(mockUseTasks.deleteTask).toHaveBeenCalledWith(taskId)
155.    
156.     // 检查是否重置了editingTask
157.     expect(wrapper.vm.editingTask).toBeNull()
158.   })
160.   it('resets editing task when form is cancelled', async () => {
161.     // 设置当前编辑的任务
162.     wrapper.vm.editingTask = { id: 1, title: 'Test Task' }
163.    
164.     // 触发表单取消
165.     await wrapper.findComponent({ name: 'TaskForm' }).vm.$emit('cancel')
166.    
167.     // 检查是否重置了editingTask
168.     expect(wrapper.vm.editingTask).toBeNull()
169.   })
170. })

复制代码

集成测试

除了单元测试，我们还需要编写一些集成测试，确保各个组件能够协同工作。

App.integration.test.js:

2. import { describe, it, expect, beforeEach, vi } from 'vitest'
3. import { mount } from '@vue/test-utils'
4. import { createPinia, setActivePinia } from 'pinia'
5. import App from '../App.vue'
6. import { useTasks } from '../composables/useTasks'
8. // 模拟localStorage
9. const localStorageMock = {
10.   getItem: vi.fn(),
11.   setItem: vi.fn(),
12.   clear: vi.fn()
13. }
14. global.localStorage = localStorageMock
16. describe('App Integration Tests', () => {
17.   let wrapper
19.   beforeEach(() => {
20.     // 创建新的pinia实例
21.     setActivePinia(createPinia())
22.    
23.     // 重置localStorage模拟
24.     localStorageMock.getItem.mockReturnValue(null)
25.     localStorageMock.clear()
26.    
27.     // 挂载组件
28.     wrapper = mount(App)
29.   })
31.   it('creates a new task and displays it in the list', async () => {
32.     // 模拟TaskForm组件的submit事件
33.     const taskData = {
34.       title: 'Integration Test Task',
35.       description: 'This is a test task',
36.       status: 'todo'
37.     }
38.    
39.     // 触发表单提交
40.     await wrapper.findComponent({ name: 'TaskForm' }).vm.$emit('submit', taskData)
41.    
42.     // 检查任务是否被添加到列表中
43.     const taskList = wrapper.findComponent({ name: 'TaskList' })
44.     expect(taskList.props('tasks')).toHaveLength(1)
45.     expect(taskList.props('tasks')[0].title).toBe(taskData.title)
46.   })
48.   it('filters tasks based on status', async () => {
49.     // 添加多个任务
50.     const tasks = [
51.       { title: 'Todo Task', status: 'todo' },
52.       { title: 'In Progress Task', status: 'inProgress' },
53.       { title: 'Completed Task', status: 'completed' }
54.     ]
55.    
56.     for (const task of tasks) {
57.       await wrapper.findComponent({ name: 'TaskForm' }).vm.$emit('submit', task)
58.     }
59.    
60.     // 检查所有任务是否显示
61.     let taskList = wrapper.findComponent({ name: 'TaskList' })
62.     expect(taskList.props('tasks')).toHaveLength(3)
63.    
64.     // 应用过滤器
65.     const filterButtons = wrapper.findAll('.filter-btn')
66.     await filterButtons[1].trigger('click') // "To Do" filter
67.    
68.     // 检查过滤结果
69.     taskList = wrapper.findComponent({ name: 'TaskList' })
70.     expect(taskList.props('tasks')).toHaveLength(1)
71.     expect(taskList.props('tasks')[0].status).toBe('todo')
72.    
73.     // 应用另一个过滤器
74.     await filterButtons[2].trigger('click') // "In Progress" filter
75.    
76.     // 检查过滤结果
77.     taskList = wrapper.findComponent({ name: 'TaskList' })
78.     expect(taskList.props('tasks')).toHaveLength(1)
79.     expect(taskList.props('tasks')[0].status).toBe('inProgress')
80.   })
82.   it('updates task statistics when tasks are added', async () => {
83.     // 初始状态
84.     let stats = wrapper.findAll('.stat')
85.     expect(stats[0].find('.stat-value').text()).toBe('0') // Total
86.     expect(stats[1].find('.stat-value').text()).toBe('0') // To Do
87.     expect(stats[2].find('.stat-value').text()).toBe('0') // In Progress
88.     expect(stats[3].find('.stat-value').text()).toBe('0') // Completed
89.    
90.     // 添加任务
91.     await wrapper.findComponent({ name: 'TaskForm' }).vm.$emit('submit', {
92.       title: 'Todo Task',
93.       status: 'todo'
94.     })
95.    
96.     // 检查统计更新
97.     stats = wrapper.findAll('.stat')
98.     expect(stats[0].find('.stat-value').text()).toBe('1') // Total
99.     expect(stats[1].find('.stat-value').text()).toBe('1') // To Do
100.    
101.     // 添加另一个任务
102.     await wrapper.findComponent({ name: 'TaskForm' }).vm.$emit('submit', {
103.       title: 'In Progress Task',
104.       status: 'inProgress'
105.     })
106.    
107.     // 检查统计更新
108.     stats = wrapper.findAll('.stat')
109.     expect(stats[0].find('.stat-value').text()).toBe('2') // Total
110.     expect(stats[1].find('.stat-value').text()).toBe('1') // To Do
111.     expect(stats[2].find('.stat-value').text()).toBe('1') // In Progress
112.   })
114.   it('persists tasks to localStorage', async () => {
115.     // 添加任务
116.     await wrapper.findComponent({ name: 'TaskForm' }).vm.$emit('submit', {
117.       title: 'Persistent Task',
118.       status: 'todo'
119.     })
120.    
121.     // 检查是否调用了localStorage.setItem
122.     expect(localStorageMock.setItem).toHaveBeenCalled()
123.    
124.     // 检查保存的数据
125.     const savedData = JSON.parse(localStorageMock.setItem.mock.calls[0][1])
126.     expect(savedData).toHaveLength(1)
127.     expect(savedData[0].title).toBe('Persistent Task')
128.   })
130.   it('loads tasks from localStorage on initialization', () => {
131.     // 设置localStorage中的初始数据
132.     const initialTasks = [
133.       { id: 1, title: 'Loaded Task', status: 'todo' }
134.     ]
135.     localStorageMock.getItem.mockReturnValue(JSON.stringify(initialTasks))
136.    
137.     // 重新挂载组件
138.     wrapper = mount(App)
139.    
140.     // 检查任务是否被加载
141.     const taskList = wrapper.findComponent({ name: 'TaskList' })
142.     expect(taskList.props('tasks')).toHaveLength(1)
143.     expect(taskList.props('tasks')[0].title).toBe('Loaded Task')
144.   })
145. })

复制代码

总结

通过本文的学习，我们深入了解了Vue3单元测试的各个方面，包括：

1. 基础测试技术：如何测试Vue3组件、组合式函数、事件和Props
2. 测试工具：Vitest、Vue Test Utils等工具的使用方法
3. 测试驱动开发（TDD）：通过红-绿-重构循环开发高质量代码
4. 高级测试技巧：测试Pinia状态管理、Vue Router、异步组件等
5. 最佳实践：测试组织、覆盖率、隔离、模拟外部依赖等
6. 真实项目案例：通过任务管理应用综合应用各种测试技术

单元测试不仅能够提高代码质量，还能促进更好的设计和架构。通过测试驱动开发，我们可以更加自信地重构和扩展代码，减少生产环境中的bug。

在Vue3项目中，合理的测试策略应该包括：

• 对组件进行单元测试，验证其渲染、事件和交互
• 对组合式函数进行单元测试，确保逻辑正确性
• 对状态管理进行测试，确保数据流正确
• 编写集成测试，验证组件间的交互
• 设置适当的测试覆盖率目标，确保关键代码被测试覆盖

通过持续集成和自动化测试，我们可以在开发过程中及时发现问题，提高开发效率和代码质量。

希望本文能够帮助你在Vue3项目中更好地实践单元测试，构建更加健壮、可维护的应用程序。