React 测试策略:从单元到 E2E

// 反面教材:测的是组件内部 state
expect(result.current._internalFlag).toBe(true)
expect(wrapper.find('FetchButton').prop('onClick')).toBeDefined()

// 好的做法:测可观察的结果
expect(screen.getByText('已加载')).toBeInTheDocument()
expect(screen.getByRole('button')).toBeDisabled()

// formatPrice.ts
export function formatPrice(cents: number, currency = 'CNY'): string {
  return new Intl.NumberFormat('zh-CN', {
    style: 'currency',
    currency,
  }).format(cents / 100)
}

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

describe('formatPrice', () => {
  it('把分换算成元,带货币符号', () => {
    expect(formatPrice(12345)).toBe('¥123.45')
  })

  it('支持多币种', () => {
    expect(formatPrice(12345, 'USD')).toMatch(/123\.45/)
  })

  it('边界:0 和负数', () => {
    expect(formatPrice(0)).toBe('¥0.00')
    expect(formatPrice(-100)).toBe('-¥1.00')
  })
})

// useCounter.ts
import { useState, useCallback } from 'react'

export function useCounter(initial = 0) {
  const [count, setCount] = useState(initial)
  const inc = useCallback(() => setCount(c => c + 1), [])
  const reset = useCallback(() => setCount(initial), [initial])
  return { count, inc, reset }
}

// useCounter.test.ts
import { renderHook, act } from '@testing-library/react'
import { describe, it, expect } from 'vitest'
import { useCounter } from './useCounter'

describe('useCounter', () => {
  it('inc 让计数 +1', () => {
    const { result } = renderHook(() => useCounter(5))
    act(() => result.current.inc())
    expect(result.current.count).toBe(6)
  })

  it('reset 回到初始值', () => {
    const { result } = renderHook(() => useCounter(5))
    act(() => result.current.inc())
    act(() => result.current.reset())
    expect(result.current.count).toBe(5)
  })
})

// 偏实现:getByTestId 依赖你给元素贴的标签
await user.click(screen.getByTestId('login-submit'))

// 偏行为:getByRole 模拟的是用户视觉/语义
await user.click(screen.getByRole('button', { name: '登录' }))

// LoginForm.tsx
import { useState } from 'react'

export function LoginForm({
  onSubmit,
}: {
  onSubmit: (email: string, password: string) => Promise<void>
}) {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [loading, setLoading] = useState(false)

  return (
    <form
      onSubmit={async (e) => {
        e.preventDefault()
        setLoading(true)
        try {
          await onSubmit(email, password)
        } finally {
          setLoading(false)
        }
      }}
    >
      <label>
        邮箱
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </label>
      <label>
        密码
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </label>
      <button type="submit" disabled={loading}>
        {loading ? '登录中...' : '登录'}
      </button>
    </form>
  )
}

// LoginForm.test.tsx
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { describe, it, expect, vi } from 'vitest'
import { LoginForm } from './LoginForm'

describe('LoginForm', () => {
  it('提交时把邮箱和密码交给 onSubmit', async () => {
    const onSubmit = vi.fn().mockResolvedValue(undefined)
    const user = userEvent.setup()
    render(<LoginForm onSubmit={onSubmit} />)

    await user.type(screen.getByLabelText(/邮箱/), '[email protected]')
    await user.type(screen.getByLabelText(/密码/), 'secret')
    await user.click(screen.getByRole('button', { name: '登录' }))

    expect(onSubmit).toHaveBeenCalledWith('[email protected]', 'secret')
  })

  it('请求期间禁用按钮并显示 loading 文案', async () => {
    let resolveSubmit!: () => void
    const onSubmit = vi.fn(
      () => new Promise<void>((resolve) => (resolveSubmit = resolve)),
    )
    const user = userEvent.setup()
    render(<LoginForm onSubmit={onSubmit} />)

    await user.type(screen.getByLabelText(/邮箱/), '[email protected]')
    await user.type(screen.getByLabelText(/密码/), 'secret')
    await user.click(screen.getByRole('button', { name: '登录' }))

    const button = screen.getByRole('button')
    expect(button).toBeDisabled()
    expect(button).toHaveTextContent('登录中...')

    resolveSubmit()
  })
})

// test/server.ts
import { setupServer } from 'msw/node'
import { http, HttpResponse } from 'msw'

export const server = setupServer(
  http.post('/api/login', async ({ request }) => {
    const { email } = (await request.json()) as { email: string }
    return HttpResponse.json({ token: 'fake-jwt', email })
  }),
  http.get('/api/user', () =>
    HttpResponse.json({ name: '张三', role: 'admin' }),
  ),
)

// test/setup.ts
import { beforeAll, afterAll, afterEach } from 'vitest'
import { server } from './server'

beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

// 反模式:你 mock 掉了被测对象本身
vi.mock('./formatPrice', () => ({
  formatPrice: () => '¥0.00',
}))

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

test('用户登录后完成下单', async ({ page }) => {
  await page.goto('/login')
  await page.getByLabel('邮箱').fill('[email protected]')
  await page.getByLabel('密码').fill('password123')
  await page.getByRole('button', { name: '登录' }).click()

  // 等待真实跳转
  await expect(page).toHaveURL(/\/dashboard/)

  await page.getByText('商品 A').click()
  await page.getByRole('button', { name: '加入购物车' }).click()
  await page.getByRole('link', { name: /购物车/ }).click()
  await page.getByRole('button', { name: '结算' }).click()

  await expect(page.getByText('下单成功')).toBeVisible()
})