跳到主要内容
VibeStacks
工具条目首选

Vitest + Playwright

Vitest 跑单元测试，Playwright 在真实浏览器里跑用户流程。AI 改得越多，越需要这两层兜底。

最后审阅
适用版本
Vitest 5 · Playwright 1.64
官网
vitest.dev

适合

  • 所有让 AI 写代码的前端项目
  • 已经用 Vite 的项目（Vitest 直接复用同一份配置）
  • 需要验证“用户真的能完成这个流程”的改动

不适合

  • 一次性的演示页面，写完就不再修改

AI 写代码很快，但它不会主动告诉你哪里坏了。测试就是让它自己发现问题的手段：把“跑测试”写进 AGENTS.md 的完成标准，AI 每次改动后都会自己验证。

两层测试

  • Vitest：单元测试。 验证纯函数、数据转换、业务规则。它与 Vite 共用配置，速度很快，几百个测试一两秒就能跑完。
  • Playwright：端到端测试。 启动真实浏览器，像用户一样打开页面、点击、输入，检查看到的结果。它最接近“真的能用”。

一个简单的分工：逻辑放进不依赖界面的函数里，用 Vitest 测；关键用户流程（登录、下单、提交表单）用 Playwright 各写一条。

上手

pnpm add -D vitest jsdom
pnpm create playwright

把下方纪念品保存为 vitest.config.ts，再在 package.json 里加上 "test": "vitest run"。

让 AI 写好测试

  • 修 bug 时，先写一个能复现问题的失败测试，再改代码。
  • 不允许为了通过测试而删除测试、跳过测试或放宽断言。
  • 测试验证行为，不验证实现细节——重构后测试不该大面积失败。

测试只在这里点到为止，完整的测试分层、覆盖策略和 CI 会在“测试与质量护栏”栏目展开。

纪念品

带走给你的 AI

把这份 vitest.config.ts 放进项目，或直接粘贴给 AI 编程助手。

vitest.config.ts
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vitest/config';

// Unit tests live next to the code they test: src/**/*.test.ts(x).
// End-to-end tests live in tests/e2e and run with Playwright, not Vitest.
export default defineConfig({
  plugins: [react()],
  test: {
    include: ['src/**/*.test.{ts,tsx}'],
    // jsdom gives component tests a browser-like DOM; pure logic tests do not need it.
    environment: 'jsdom',
    // Undo vi.spyOn / vi.fn mocks after each test so tests stay independent.
    restoreMocks: true,
  },
});

相关内容

  • 主题文章

    一个前端项目的结构

    从目录讲起：脚手架生成骨架，框架决定页面怎么组织，测试和代码规范守住 AI 的每一次改动。

  • 工具条目首选

    Vite + React

    最通用的前端起点：Vite 负责开发服务器和构建，React 负责界面；AI 最熟悉，结构也最简单。

  • 工具条目

    MCP

    模型上下文协议：把浏览器、数据库、文档检索等外部能力，以统一的接口接给任何支持它的 AI 工具。