背景问题：
需要为 Vue3 + Vite 项目编写单元测试。
方案思考：
使用 Vitest 作为测试框架，结合 @vue/test-utils 进行组件测试。
具体实现：
安装测试依赖：
# 安装 Vitest 和 Vue 测试工具npminstall-D vitest @vue/test-utils jsdom happy-dom# 安装断言库（Vitest 默认包含 Chai 断言）npminstall-D @vitest/coverage-v8Vitest 配置：
// vite.config.jsimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'exportdefaultdefineConfig({plugins:[vue()],test:{// 启用 Vitest 的 APIglobals:true,// 指定测试环境environment:'jsdom',// 或 'happy-dom'// 包含测试文件的模式include:['tests/**/*.test.{js,ts}'],// 排除文件的模式exclude:['node_modules','dist','.idea','.git','.cache'],// 测试覆盖率配置coverage:{provider:'v8',// 或 'istanbul'reporter:['text','json','html'],reportsDirectory:'./coverage',exclude:['node_modules/**','tests/**','vite.config.js']},// 模拟 DOM 环境setupFiles:['./tests/setup.js']}})测试工具配置：
// tests/setup.jsimport{expect,afterEach}from'vitest'import{cleanup}from'@testing-library/vue'importmatchersfrom'@vitest/expect'// 扩展 Vitest 的 expectexpect.extend(matchers)// 在每个测试后清理 DOMafterEach(()=>{cleanup()})组件测试示例：
<!-- components/HelloWorld.vue --> <template> <h1>{{ msg }}</h1> <button @click="count++">count is: {{ count }}</button> <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p> </template> <script setup> import { ref } from 'vue' defineProps({ msg: String }) const count = ref(0) </script>// tests/unit/HelloWorld.test.jsimport{describe,it,expect}from'vitest'import{mount}from'@vue/test-utils'importHelloWorldfrom'@/components/HelloWorld.vue'describe('HelloWorld',()=>{it('renders properly',()=>{constwrapper=mount(HelloWorld,{props:{msg:'Hello World'}})expect(wrapper.text()).toContain('Hello World')})it('counter starts at 0 and increments',async()=>{constwrapper=mount(HelloWorld)// 初始值expect(wrapper.find('button').text()).toBe('count is: 0')// 点击按钮awaitwrapper.find('button').trigger('click')// 验证值已更新expect(wrapper.find('button').text()).toBe('count is: 1')})it('reactive props work correctly',()=>{constwrapper=mount(HelloWorld,{props:{msg:'Updated Message'}})expect(wrapper.find('h1').text()).toBe('Updated Message')})})组合式函数测试：
// composables/useCounter.jsimport{ref}from'vue'exportfunctionuseCounter(initialValue=0){constcount=ref(initialValue)constincrement=()=>{count.value++}constdecrement=()=>{count.value--}constreset=()=>{count.value=initialValue}return{count,increment,decrement,reset}}// tests/unit/composables/useCounter.test.jsimport{describe,it,expect}from'vitest'import{useCounter}from'@/composables/useCounter'describe('useCounter',()=>{it('should initialize with default value 0',()=>{const{count}=useCounter()expect(count.value).toBe(0)})it('should initialize with provided initial value',()=>{const{count}=useCounter(5)expect(count.value).toBe(5)})it('should increment counter',()=>{const{count,increment}=useCounter(0)increment()expect(count.value).toBe(1)})it('should decrement counter',()=>{const{count,decrement}=useCounter(5)decrement()expect(count.value).toBe(4)})it('should reset counter to initial value',()=>{const{count,increment,reset}=useCounter(10)increment()increment()expect(count.value).toBe(12)reset()expect(count.value).toBe(10)})})API 测试：
// utils/request.js (测试版)importaxiosfrom'axios'// Mock axiosexportconstmockAxios={get:vi.fn(),post:vi.fn(),put:vi.fn(),delete:vi.fn()}exportdefault{get:(url,config)=>mockAxios.get(url,config),post:(url,data,config)=>mockAxios.post(url,data,config),put:(url,data,config)=>mockAxios.put(url,data,config),delete:(url,config)=>mockAxios.delete(url,config)}// tests/unit/utils/api.test.jsimport{describe,it,expect,beforeEach,vi}from'vitest'import{mockAxios}from'@/utils/request'describe('API utilities',()=>{beforeEach(()=>{// 重置 mockvi.clearAllMocks()})it('should make GET request',async()=>{constmockResponse={data:{id:1,name:'Test'}}mockAxios.get.mockResolvedValue(mockResponse)constresult=awaitmockAxios.get('/api/users/1')expect(mockAxios.get).toHaveBeenCalledWith('/api/users/1')expect(result).toEqual(mockResponse)})it('should handle API errors',async()=>{constmockError=newError('Network Error')mockAxios.get.mockRejectedValue(mockError)awaitexpect(mockAxios.get('/api/users/1')).rejects.toThrow('Network Error')expect(mockAxios.get).toHaveBeenCalledWith('/api/users/1')})})测试工具函数：
// tests/utils/index.jsimport{mount}from'@vue/test-utils'import{setActivePinia,createPinia}from'pinia'// 创建带 Pinia 的包装器exportfunctioncreateWrapper(Component,options={}){// 创建新的 Pinia 实例constpinia=createPinia()returnmount(Component,{...options,global:{plugins:[pinia],...(options.global||{})}})}// 模拟路由exportfunctionmockRouter(){return{push:vi.fn(),replace:vi.fn(),go:vi.fn(),back:vi.fn(),forward:vi.fn()}}// 模拟响应式数据exportfunctionmockReactive(obj){returnvi.fn(()=>obj)}
