Vite 测试实战：Vitest 单元测试、组件测试与 E2E 测试

传统 Jest：   babel/jest 配置 → 双份转换 → 类型/别名/环境要同步维护
Vitest：      vite.config.ts 一套配置 → esbuild 转换 → 开箱即用

npm i -D vitest
# 组件测试可选
npm i -D @vue/test-utils jsdom   # Vue
npm i -D @testing-library/react  # React

// src/utils/format.ts
export function formatPrice(n: number, currency = '¥'): string {
  return `${currency}${n.toFixed(2)}`
}

// src/utils/format.test.ts
import { describe, it, expect } from 'vitest'
import { formatPrice } from './format'

describe('formatPrice', () => {
  it('保留两位小数', () => {
    expect(formatPrice(3.14159)).toBe('¥3.14')
  })
  it('支持自定义货币符号', () => {
    expect(formatPrice(10, '$')).toBe('$10.00')
  })
  it('处理负数', () => {
    expect(formatPrice(-5.5)).toBe('¥-5.50')
  })
})

vitest            # watch 模式
vitest run        # 一次性
vitest run --coverage   # 带覆盖率

{
  "scripts": {
    "test": "vitest run",
    "test:watch": "vitest"
  }
}

expect(sum(1, 2)).toBe(3)              // 严格相等（Object.is）
expect(arr).toEqual([1, 2, 3])          // 深比较
expect(obj).toMatchObject({ a: 1 })     // 部分匹配
expect(n).toBeGreaterThan(0)
expect('abc').toMatch(/b/)
expect(fn).toHaveBeenCalledWith(1)
expect(() => risky()).toThrow('bad')

import { describe, it, expect } from 'vitest'

const cases = [
  [2, 2, 4],
  [3, 5, 8],
  [-1, 1, 0],
] as const

describe.each(cases)('add(%i, %i)', (a, b, expected) => {
  it(`返回 ${expected}`, () => {
    expect(add(a, b)).toBe(expected)
  })
})

it('组件快照', () => {
  const wrapper = mount(MyComponent, { props: { name: 'Leeting' } })
  expect(wrapper.html()).toMatchSnapshot()
})
// 更新快照：vitest -u

// src/services/api.ts
export async function fetchUser(id: number) { /* 真实请求 */ }

// 测试
import { vi } from 'vitest'

vi.mock('./api', () => ({
  fetchUser: vi.fn().mockResolvedValue({ id: 1, name: 'Alice' }),
}))

import { fetchUser } from './api'
const user = await fetchUser(1)
expect(fetchUser).toHaveBeenCalledWith(1)
expect(user.name).toBe('Alice')

import { getUser } from './user'

const spy = vi.spyOn(console, 'log')   // 监听原生
getUser(1)
expect(spy).toHaveBeenCalled()
spy.mockRestore()                       // 还原

vi.useFakeTimers()

it('debounce 延迟触发', () => {
  const fn = vi.fn()
  debounce(fn, 300)()
  vi.advanceTimersByTime(300)
  expect(fn).toHaveBeenCalledTimes(1)
})

// vitest.config 或 vite.config 指定环境
// export default defineConfig({ test: { environment: 'jsdom' } })

import { mount } from '@vue/test-utils'
import Counter from './Counter.vue'

it('点击累加', async () => {
  const wrapper = mount(Counter)
  await wrapper.find('button').trigger('click')
  expect(wrapper.text()).toContain('1')
})

import { render, screen, fireEvent } from '@testing-library/react'
import Counter from './Counter'

it('点击累加', () => {
  render(<Counter />)
  fireEvent.click(screen.getByRole('button', { name: '+' }))
  expect(screen.getByText('count: 1')).toBeInTheDocument()
})

npm i -D @playwright/test
npx playwright install chromium

// playwright.config.ts
import { defineConfig } from '@playwright/test'

export default defineConfig({
  testDir: './e2e',
  use: {
    baseURL: 'http://localhost:5173',   // Vite dev server
    trace: 'on-first-retry',
  },
  webServer: {
    command: 'npm run dev',             // 自动起 dev server
    port: 5173,
    reuseExistingServer: true,
  },
})

// e2e/cart.spec.ts
import { test, expect } from '@playwright/test'

test('加入购物车全链路', async ({ page }) => {
  await page.goto('/products/1')
  await page.getByRole('button', { name: '加入购物车' }).click()
  await expect(page.getByText('购物车(1)')).toBeVisible()
  await page.getByRole('link', { name: '结算' }).click()
  await expect(page).toHaveURL(/\/checkout/)
})

npm i -D @vitest/coverage-v8
vitest run --coverage

// vite.config.ts
export default defineConfig({
  test: {
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html'],
      include: ['src/**/*.{ts,vue,tsx}'],
      exclude: ['src/**/*.test.*', 'src/main.ts'],
      thresholds: {
        lines: 80,
        functions: 80,
        branches: 70,
        statements: 80,
      },
    },
  },
})

# .github/workflows/test.yml
name: Test
on:
  push:
    branches: [main]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'
      - run: pnpm install --frozen-lockfile
      - run: pnpm test        # vitest run
      - run: pnpm test:e2e    # playwright

1. 测试贴近源码（.test.ts 同目录），便于迁移与发现
2. 纯逻辑优先测（utils/hooks/状态机）
3. 组件测用户行为，E2E 测关键旅程
4. 覆盖率阈值防劣化，但不追求 100%
5. 依赖用真实行为 mock，避免过度 mock