背景问题：
需要对复杂功能进行集成测试。
方案思考：
使用端到端测试和组件集成测试相结合的策略。
具体实现：
端到端测试配置（Playwright）：
# 安装 Playwrightnpminstall-D @playwright/test npx playwrightinstallPlaywright 配置：
// playwright.config.jsimport{defineConfig,devices}from'@playwright/test'exportdefaultdefineConfig({testDir:'./tests/e2e',fullyParallel:true,forbidOnly:!!process.env.CI,retries:process.env.CI?2:0,workers:process.env.CI?1:undefined,reporter:'html',use:{baseURL:'http://localhost:3000',trace:'on-first-retry',},projects:[{name:'chromium',use:{...devices['Desktop Chrome']},},{name:'firefox',use:{...devices['Desktop Firefox']},},{name:'webkit',use:{...devices['Desktop Safari']},},],webServer:{command:'npm run dev',url:'http://localhost:3000',reuseExistingServer:!process.env.CI,},})端到端测试示例：
// tests/e2e/login.spec.jsimport{test,expect}from'@playwright/test'test.describe('Login functionality',()=>{test.beforeEach(async({page})=>{awaitpage.goto('/login')})test('should allow valid user to login',async({page})=>{// 输入用户名awaitpage.locator('input[name="username"]').fill('admin')// 输入密码awaitpage.locator('input[name="password"]').fill('admin123')// 点击登录按钮awaitpage.locator('button[type="submit"]').click()// 验证跳转到主页awaitexpect(page).toHaveURL('/dashboard')awaitexpect(page.locator('.user-info')).toContainText('admin')})test('should show error for invalid credentials',async({page})=>{// 输入错误的用户名和密码awaitpage.locator('input[name="username"]').fill('invalid')awaitpage.locator('input[name="password"]').fill('wrongpass')// 点击登录按钮awaitpage.locator('button[type="submit"]').click()// 验证错误消息显示awaitexpect(page.locator('.error-message')).toBeVisible()awaitexpect(page.locator('.error-message')).toContainText('用户名或密码错误')})test('should validate form inputs',async({page})=>{// 点击登录按钮而不填写任何内容awaitpage.locator('button[type="submit"]').click()// 验证验证错误消息awaitexpect(page.locator('.el-form-item__error')).toHaveCount(2)})})集成测试示例：
<!-- views/UserManagement.vue --> <template> <div class="user-management"> <el-input v-model="searchTerm" placeholder="搜索用户..." @input="performSearch" /> <el-table :data="filteredUsers" v-loading="loading"> <el-table-column prop="name" label="姓名" /> <el-table-column prop="email" label="邮箱" /> <el-table-column label="操作"> <template #default="{ row }"> <el-button @click="editUser(row)">编辑</el-button> <el-button @click="deleteUser(row.id)" type="danger">删除</el-button> </template> </el-table-column> </el-table> </div> </template> <script setup> import { ref, computed, onMounted } from 'vue' import { useUserStore } from '@/stores/user' const userStore = useUserStore() const searchTerm = ref('') const loading = ref(false) // 获取过滤后的用户 const filteredUsers = computed(() => { if (!searchTerm.value) { return userStore.users } return userStore.users.filter(user => user.name.toLowerCase().includes(searchTerm.value.toLowerCase()) || user.email.toLowerCase().includes(searchTerm.value.toLowerCase()) ) }) // 执行搜索 const performSearch = () => { // 实际项目中可能会调用 API } // 编辑用户 const editUser = (user) => { // 编辑逻辑 } // 删除用户 const deleteUser = async (id) => { await userStore.deleteUser(id) } onMounted(() => { loading.value = true userStore.fetchUsers().finally(() => { loading.value = false }) }) </script>// tests/integration/UserManagement.test.jsimport{describe,it,expect,beforeEach,vi}from'vitest'import{mount}from'@vue/test-utils'import{createTestingPinia}from'@pinia/testing'importUserManagementfrom'@/views/UserManagement.vue'describe('UserManagement Integration',()=>{letwrapperbeforeEach(()=>{// 创建测试用的 Pinia 实例consttestingPinia=createTestingPinia({createSpy:vi.fn,stubActions:false})// Mock storeconstuserStore=testingPinia.useUserStore()userStore.users=[{id:1,name:'John Doe',email:'john@example.com'},{id:2,name:'Jane Smith',email:'jane@example.com'}]wrapper=mount(UserManagement,{global:{plugins:[testingPinia]}})})it('displays users from store',async()=>{awaitwrapper.vm.$nextTick()// 等待组件更新consttableRows=wrapper.findAll('tbody tr')expect(tableRows).toHaveLength(2)constfirstRowCells=tableRows[0].findAll('td')expect(firstRowCells[0].text()).toContain('John Doe')expect(firstRowCells[1].text()).toContain('john@example.com')})it('filters users based on search term',async()=>{constsearchInput=wrapper.find('input')// 搜索 JohnawaitsearchInput.setValue('John')awaitsearchInput.trigger('input')consttableRows=wrapper.findAll('tbody tr')expect(tableRows).toHaveLength(1)expect(tableRows[0].find('td').text()).toContain('John Doe')})it('deletes user when delete button is clicked',async()=>{constuserStore=wrapper.vm.$pinia.state.value.userexpect(userStore.users).toHaveLength(2)// 点击第一个删除按钮constdeleteButtons=wrapper.findAll('button[type="danger"]')awaitdeleteButtons[0].trigger('click')// 验证 store 中的用户数量减少expect(userStore.users).toHaveLength(1)expect(userStore.users[0].id).toBe(2)})})模拟 API 服务：
// tests/mocks/server.jsimport{setupServer}from'msw/node'import{http,HttpResponse}from'msw'consthandlers=[http.get('/api/users',()=>{returnHttpResponse.json({code:200,data:[{id:1,name:'John Doe',email:'john@example.com'},{id:2,name:'Jane Smith',email:'jane@example.com'}],total:2})}),http.post('/api/users',async({request})=>{constuserData=awaitrequest.json()returnHttpResponse.json({code:200,data:{...userData,id:Date.now()}})}),http.delete('/api/users/:id',({params})=>{const{id}=paramsreturnHttpResponse.json({code:200,message:`User${id}deleted`})})]exportconstserver=setupServer(...handlers)// tests/setup.js (更新)import{afterAll,afterEach,beforeAll}from'vitest'import{server}from'./mocks/server'// 开始 mock 服务器beforeAll(()=>server.listen({onUnhandledRequest:'error'}))// 清理请求处理程序afterEach(()=>server.resetHandlers())// 关闭服务器afterAll(()=>server.close())
