用途:为 Vue 3 应用编写集成测试,验证完整用户流程,而非仅单元测试。采用 Vitest 4 的 Playwright 浏览器模式(真实浏览器,非 jsdom),数据层使用 fake-indexeddb 模拟 IndexedDB,查询使用 Vitest Browser locators 并支持自动重试。
主要能力:提供 createTestApp 辅助函数,返回包含 router、container 与多个预实例化 Page Object(common、builder、workout、queue、benchmarks、benchmarkForm、benchmarkDetail、logPastWorkout)的 TestApp;提供 getByRole、getByText、getByTestId 查询方法及 navigateTo、cleanup 等方法,并支持 initialRoute 选项。Page Object 遵循 Martin Fowler 模式:不写断言、返回value对象、内部封装异步等待、优先使用 data 属性选择器。
使用方式:集成测试放在 src/tests/integration/。每个测试用 beforeEach(setupIntegrationTest) 与 afterEach(cleanupIntegrationTest) 保证隔离(共享 fake-indexeddb,helper 会重置 workout、benchmark 状态、计时器与数据库)。常用命令:pnpm test、pnpm test:watch、pnpm test:headed、pnpm test:coverage。断言可选用 expect.element() 做 DOM 断言、expect.poll() 做状态/异步断言;DOM 元素仅在需要原生属性时用 .element(),不要在 userEvent 中传 .element() 以免丢失重试。跨页面导航优先使用直接路由导航而非点击 UI 按钮,避免 Vitest Browser Mode 下的时序不稳定;仅当导航本身是被测行为时才用 UI 点击。
适用场景:路由组件、多步骤用户流程、健身记录类复杂交互(如设置组、计时器、对话框、队列)等集成测试。
限制与注意:对话框关闭后需 waitForDialogClose() 等待遮罩移除;数字输入需用页面对象的原生 setter;动画可能影响断言;文本匹配多元素时改用具体 role 查询;不要在 Page Object 内写断言。具体工厂、helper 及更多细节以仓库源码为准。