vite项目综合测试方案分层覆盖：单元测试用vitest验证逻辑，组件测试用vue test utils+vitest保障ui行为，e2e用playwright模拟真实流程，再结合构建产物检查与ci集成形成闭环。
Vite 项目中构建综合测试方案，核心是分层覆盖：单元测试验证逻辑、组件测试保障 UI 行为、E2E 测试模拟真实用户流程，再配合构建产物检查和 CI 集成，形成闭环。不追求“全量覆盖”，而要聚焦关键路径与构建稳定性。
单元测试：用 Vitest 覆盖工具函数与业务逻辑
Vitest 是 Vite 官方推荐的测试框架，零配置即可运行，与 Vite 共享相同的模块解析和插件生态。
- 安装依赖：
npm add -D vitest @vitest/coverage-v8 - 在
vite.config.ts中启用测试支持（通常默认已兼容），添加test字段配置覆盖率、环境、别名等 - 测试文件命名规范：以
.spec.ts或.test.ts结尾，放在src/__tests__/或同级__tests__/目录下 - 对纯函数、工具类、组合式 API（
useXXX）优先编写断言明确的单元测试，例如：
✓ 正确处理空输入
✓ 返回值类型与文档一致
✓ 抛出预期错误时被捕获
组件测试：用 Vue Test Utils + Vitest 验证交互行为
避免直接渲染整个应用，聚焦单个组件的 props 输入、事件输出、快照一致性及异步状态流转。
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 安装：
npm add -D @vue/test-utils@next（适配 Vue 3） - 使用
mount搭配defineComponent或shallowMount控制渲染深度 - 重点测：
✓ props 变化是否触发预期 DOM 更新
✓ 用户点击/输入是否正确 emit 事件或调用方法
✓ 加载态、错误态、空数据态的 UI 呈现
✓ 与 Pinia store 的联动是否准确（需 mock store 或使用真实实例） - 避免测试实现细节（如内部 ref 名称），专注可观察行为
E2E 测试：用 Playwright 实现跨浏览器真实场景验证
Vite 本身不内置 E2E 方案，Playwright 因其启动快、API 稳定、原生支持 Vite 开发服务器而成为首选。
- 初始化：
npx playwright install chromium，再运行npx playwright init - 在
playwright.config.ts中配置webServer，自动启动 Vite dev server 并等待就绪： - → 启动命令设为
"npm run dev"
→ 端口匹配vite.config.ts中的server.port
→ 设置timeout: 120_000避免热更新卡住测试 - 测试用例围绕用户旅程编写：登录 → 导航 → 提交表单 → 验证结果页 → 截图比对关键视图
- CI 中可并行运行多浏览器（Chromium/Firefox/WebKit），但开发阶段建议先固定 Chromium 提速反馈
构建产物验证 + CI 自动化兜底
测试不能只跑在开发环境，必须确认打包后代码仍能正确加载与执行。
- 添加脚本：
"test:build": "npm run build && npm run preview -- --port 5173 & sleep 3 && npx playwright test --project=chromium"（简化版，实际建议用wait-on替代sleep） - 检查构建产物：
✓dist/index.html是否包含正确入口 script 标签
✓dist/assets/下是否有未被引用的冗余 chunk（可通过rollup-plugin-visualizer分析）
✓ 静态资源路径是否正确（特别是 base 配置非 '/' 时） - CI 配置（如 GitHub Actions）中串联：
→ 安装依赖 → 运行 lint → 单元测试（含覆盖率阈值）→ 构建 → E2E（带截图失败日志）→ 产物校验脚本
