SuperAPI AI 工具集

vitest-testing

测试与质量

查看项目

更新于 10-15 15:25

技能介绍

用途

Vitest 是一个 Vite 原生的单元测试框架,与 Vite 共享同一套配置和插件生态。它以速度为核心设计,具备原生 ESM 支持、测试热模块替换(HMR)和并行执行能力。

适用场景包括:单元测试、组件测试、集成测试、Hook 测试、源码内测试;使用 React Testing Library 测试 React 组件;测试 TanStack Query/Router/Form 相关模式。

不适用场景:端到端测试(应使用 Playwright)、视觉回归测试(应使用 Percy/Chromatic)、负载测试(应使用 k6)。

主要能力

测试结构方面,支持 describe 组织相关测试、test/it 定义单个测试、test.each 参数化测试、test.concurrent 并行测试、test.skip/skipIf 条件跳过、test.only 调试时只运行特定测试。

断言方面,支持 expect(value).toBe 比较原始值、toEqual 深度比较对象与数组、resolves 测试 Promise 解析、toMatchSnapshot 快照、toMatchInlineSnapshot 内联快照、expect.soft 软断言(失败后继续并收集全部失败)、expect.poll 轮询断言(重试直到通过)。

生命周期钩子包括 beforeEach 与 afterEach,用于每个测试前后的准备与清理。

Mock 能力包括 vi.fn 创建间谍函数、vi.mock 替换整个模块、vi.spyOn 追踪已有方法调用、vi.clearAllMocks 清除调用历史、vi.useFakeTimers 控制 setTimeout/setInterval、vi.hoisted 为 vi.mock 工厂声明变量、vi.stubGlobal 替换全局对象。

组件测试方面,支持 render 挂载 React 组件、screen.getByRole 按无障碍角色查找元素、user.click 模拟用户事件、waitFor 等待异步变化、screen.findByText 查询与等待结合。

Hook 测试方面,支持 renderHook 测试自定义 Hook、rerender 以新 props 重新渲染 Hook。

CLI 方面,支持 vitest run 单次运行、vitest --changed 运行受 git 变更影响的测试、vitest -t 按名称过滤、vitest --shard 在 CI worker 间分片、test 标签配合 --tags-filter 过滤。

测试夹具通过 test.extend 实现可复用、可组合的 setup。

使用方式

文档以“模式—API—要点”的快速参考表形式组织,并配有常见错误与正确写法的对照表。常见错误包括:对异步内容使用 getBy(应改用 findBy 或 waitFor)、测试实现细节(应测试行为与公共 API)、首选 getByTestId(应优先 getByRole、getByLabelText、getByText)、缺少 userEvent.setup()、测试间共享状态、未清理 Mock、过度 Mock、未在测试中禁用重试、对异步立即断言、在 render 中创建 QueryClient、测试库代码、未 await 用户事件、手动使用 act、内联 select 未做 memoization、在 vi.mock 工厂中使用变量、用单个 expect 做多项检查、用 setTimeout 等待异步、为可复用 setup 手写 beforeEach。

适用场景与限制

该技能适合需要为前端项目编写单元、组件与集成测试的开发者,尤其是使用 Vite 与 React 生态的项目。文档还包含委派建议:查找未测试代码路径可交给 Explore agent,完整覆盖率审查可交给 Task agent,端到端测试可交给 playwright 技能,写完测试后可交给 code-reviewer agent。

限制方面,Vitest 不用于端到端测试、视觉回归测试和负载测试。关于收费、价格、具体平台支持等事实,资料中暂未提供。