Ch8. 테스트 전략

// vitest.workspace.ts (루트)
import { defineWorkspace } from 'vitest/config'

export default defineWorkspace(['apps/*/vitest.config.ts', 'packages/*/vitest.config.ts'])

// packages/utils/vitest.config.ts
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    name: '@acme/utils',
    include: ['src/**/*.test.ts'],
  },
})

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

export default defineConfig({
  plugins: [react()],
  test: {
    name: 'web',
    environment: 'jsdom',
    include: ['**/*.test.{ts,tsx}'],
    setupFiles: ['./tests/setup.ts'],
  },
})

# 전체 테스트
vitest run

# 특정 패키지만
vitest run --project=@acme/utils

# 워치 모드 (개발 중)
vitest --project=web

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

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 4 : undefined,
  reporter: process.env.CI ? 'github' : 'html',
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'mobile', use: { ...devices['Pixel 7'] } },
  ],
  webServer: {
    command: 'turbo run dev --filter=web',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
})

// e2e/tests/auth-flow.spec.ts
import { test, expect } from '@playwright/test'

test('로그인 → 대시보드 접근', async ({ page }) => {
  await page.goto('/login')
  await page.fill('[name="email"]', 'test@acme.com')
  await page.fill('[name="password"]', 'test1234')
  await page.click('button[type="submit"]')
  await expect(page).toHaveURL('/dashboard')
  await expect(page.locator('h1')).toContainText('대시보드')
})

// packages/ui/src/button.test.tsx
import { render, screen, fireEvent } from '@testing-library/react'
import { Button } from './button'
import { expect, test, vi } from 'vitest'

test('클릭 이벤트 전달', () => {
  const onClick = vi.fn()
  render(<Button onClick={onClick}>확인</Button>)
  fireEvent.click(screen.getByText('확인'))
  expect(onClick).toHaveBeenCalledOnce()
})

test('variant별 스타일 적용', () => {
  const { rerender } = render(<Button variant="primary">버튼</Button>)
  expect(screen.getByRole('button')).toHaveClass(/primary/)

  rerender(<Button variant="ghost">버튼</Button>)
  expect(screen.getByRole('button')).toHaveClass(/ghost/)
})

// turbo.json
{
  "tasks": {
    "test": {
      "dependsOn": ["^build"],
      "inputs": ["src/**", "tests/**", "vitest.config.*", "playwright.config.*"],
      "outputs": ["coverage/**", "test-results/**", "playwright-report/**"],
    },
  },
}