组件测试与端到端测试
组件测试验证 UI 组件“渲染与交互”是否正确：Testing Library 不测内部实现细节（不测 state、不测方法），只通过用户视角操作——找按钮、点击、读 DOM 文本，贴近真实用户行为，重构不易挂。
端到端测试（E2E，Playwright/Cypress）打开真实浏览器跑完整链路：注册→登录→下单，验证前后端与基础设施整体可用。E2E 最接近用户，但最慢、最脆（网络/时序），只覆盖核心链路，不追求覆盖率。
- 组件测试：Testing Library，用户视角找元素、测交互，不关心内部实现
- E2E：Playwright 跨浏览器跑核心链路（登录/下单/支付），慢但保真
- 测试金字塔：单元多、组件中、E2E 少；E2E 只护航核心业务链路
测试
// 组件测试：登录表单（Vitest + @vue/test-utils / Testing Library） import { render, fireEvent } from '@testing-library/vue'; import LoginForm from '../src/components/LoginForm.vue'; it('输入并提交后调用 login', async () => { const onLogin = vi.fn(); // 伪造回调 const { getByPlaceholderText, getByRole } = render(LoginForm, { props: { onLogin }, }); // 模拟用户行为：填表单 + 点按钮 await fireEvent.update(getByPlaceholderText('用户名'), 'admin'); await fireEvent.update(getByPlaceholderText('密码'), '123456'); await fireEvent.click(getByRole('button')); expect(onLogin).toHaveBeenCalledWith({ user: 'admin', pwd: '123456' }); }); // E2E（Playwright）：真实浏览器跑核心链路 // test('登录后能下单', async ({ page }) => { // await page.goto('/login'); // await page.fill('[placeholder=用户名]', 'admin'); // await page.fill('[placeholder=密码]', '123456'); // await page.click('button:has-text(登录)'); // await expect(page).toHaveURL('/home'); // });
本节要点组件测交互不测实现，E2E 只覆盖核心链路；金字塔结构：单元打底、E2E 压顶。
