单元测试与组件测试

pnpm add -D vitest @vitejs/plugin-react @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom

// vitest.config.ts — 关键配置项
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
import path from 'path'
 
export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',          // 模拟浏览器 DOM
    globals: true,                  // 全局注入 describe/it/expect（不用每个文件 import）
    setupFiles: ['./vitest.setup.ts'],
    coverage: {
      provider: 'v8',
      reporter: ['text', 'html'],
      exclude: ['node_modules/', '**/*.config.*'],
    },
  },
  resolve: {
    alias: { '@': path.resolve(__dirname, './') },  // 匹配 tsconfig paths
  },
})

// vitest.setup.ts — 扩展 expect 匹配器
import '@testing-library/jest-dom/vitest'

// components/__tests__/counter.test.tsx
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { Counter } from '@/components/counter'
 
describe('Counter', () => {
  it('renders initial count and responds to clicks', async () => {
    const user = userEvent.setup()
    render(<Counter initialCount={5} />)
 
    expect(screen.getByText('Count: 5')).toBeInTheDocument()
 
    await user.click(screen.getByRole('button', { name: 'Increment' }))
    expect(screen.getByText('Count: 6')).toBeInTheDocument()
  })
})

// 测试 loading → success / error 的状态流转
it('shows loading then data', async () => {
  vi.spyOn(global, 'fetch').mockResolvedValueOnce(
    new Response(JSON.stringify({ name: 'Alice' })),
  )
 
  render(<UserProfile userId="1" />)
  expect(screen.getByRole('status')).toHaveTextContent('Loading...')
 
  await waitFor(() => {
    expect(screen.getByText('Alice')).toBeInTheDocument()
  })
})

vi.mock('@/auth', () => ({ auth: vi.fn() }))
vi.mock('@/lib/db', () => ({ db: { query: { users: { findFirst: vi.fn() } } } }))
 
import { auth } from '@/auth'
import { db } from '@/lib/db'
 
it('renders user info', async () => {
  vi.mocked(auth).mockResolvedValue({ user: { id: '1' } } as any)
  vi.mocked(db.query.users.findFirst).mockResolvedValue({ name: 'Alice', plan: 'pro' })
 
  // 关键：Server Component 是 async 函数，先 await 再 render
  const jsx = await UserCard()
  render(jsx)
 
  expect(screen.getByText('Alice')).toBeInTheDocument()
})

// lib/dashboard.ts — 提取出的纯函数
export function calculateStats(orders: Order[]) {
  const total = orders.reduce((sum, o) => sum + o.amount, 0)
  const average = orders.length > 0 ? total / orders.length : 0
  return { total, average, count: orders.length }
}
 
// 测试纯函数——零 Mock，零依赖，零副作用
it('calculates totals', () => {
  const stats = calculateStats([{ amount: 1000 }, { amount: 2000 }])
  expect(stats.total).toBe(3000)
  expect(stats.average).toBe(1500)
})

vi.mock('@/auth', () => ({ auth: vi.fn() }))
vi.mock('next/cache', () => ({ revalidatePath: vi.fn() }))
 
it('throws when not authenticated', async () => {
  vi.mocked(auth).mockResolvedValue(null)
 
  const formData = new FormData()
  formData.set('title', 'Hello')
 
  await expect(createPost(formData)).rejects.toThrow('Unauthorized')
})

// 1. vi.mock — 替换整个模块（最常用）
vi.mock('@/lib/db', () => ({ db: { query: { users: { findFirst: vi.fn() } } } }))
 
// 2. vi.spyOn — 监视/临时替换某个方法（保留其他方法的真实实现）
vi.spyOn(global, 'fetch').mockResolvedValueOnce(new Response('ok'))
 
// 3. 手动 Mock 文件 — 放在 __mocks__/ 目录，自动应用
// __mocks__/next/navigation.ts
export const useRouter = vi.fn(() => ({ push: vi.fn(), replace: vi.fn() }))

// test/mocks/next.ts — 所有测试共用
vi.mock('next/navigation', () => ({
  useRouter: vi.fn(() => ({ push: vi.fn(), replace: vi.fn(), refresh: vi.fn() })),
  usePathname: vi.fn(() => '/'),
  useSearchParams: vi.fn(() => new URLSearchParams()),
  redirect: vi.fn(),
}))
 
vi.mock('next/headers', () => ({
  headers: vi.fn(() => new Map()),
  cookies: vi.fn(() => ({ get: vi.fn(), set: vi.fn() })),
}))
 
vi.mock('next/cache', () => ({
  revalidatePath: vi.fn(),
  revalidateTag: vi.fn(),
}))

pnpm test              # watch 模式（开发时用）
pnpm test -- --run     # 单次运行（CI 用）
pnpm test -- --coverage  # 覆盖率报告