测试演示

⚡ Vitest 特性

🚀

极速启动

基于 Vite 的快速测试运行器

🔧

零配置

开箱即用的测试环境

📊

覆盖率报告

内置代码覆盖率分析

🎯

智能监听

文件变化自动重新测试

🌐

Web UI

可视化测试界面

🔍

Jest 兼容

兼容 Jest API 和断言

📝 测试命令

基础测试命令

$pnpm test运行所有测试
$pnpm test:watch监听模式运行测试
$pnpm test:ui启动 Web UI 界面
$pnpm test:coverage生成覆盖率报告
$pnpm test:run单次运行所有测试

🧩 测试示例

组件测试

test/components/Button.test.ts
  • ✓按钮渲染测试
  • ✓属性传递测试
  • ✓事件触发测试
  • ✓禁用状态测试
  • ✓插槽内容测试

工具函数测试

test/utils/helpers.test.ts
  • ✓日期格式化测试
  • ✓货币格式化测试
  • ✓邮箱验证测试
  • ✓ID 生成测试
  • ✓防抖函数测试

⚙️ 测试配置

环境配置

📄vitest.config.ts - 主配置文件
🔧test/setup.ts - 测试环境设置
🌐happy-dom - 浏览器环境模拟
🧪@nuxt/test-utils - Nuxt 测试工具

覆盖率配置

📊V8 覆盖率提供者
📈文本、JSON、HTML 报告
🚫排除配置文件和测试文件
📁自动生成覆盖率目录

💡 测试最佳实践

编写原则

  • ✓测试应该简单、清晰、易懂
  • ✓每个测试只验证一个功能点
  • ✓使用描述性的测试名称
  • ✓遵循 AAA 模式（Arrange, Act, Assert）
  • ✓测试边界条件和异常情况

组织结构

  • 📁test/ - 测试文件根目录
  • 📁test/components/ - 组件测试
  • 📁test/utils/ - 工具函数测试
  • 📁test/pages/ - 页面集成测试
  • 📄*.test.ts - 测试文件命名

🚀 快速开始

在终端中运行以下命令来开始测试：

# 运行所有测试
pnpm test
# 启动监听模式
pnpm test:watch
# 启动 Web UI
pnpm test:ui
首页VueUse 演示SEO 演示