🚀 Next.js 심화 9장: Testing Strategy — Jest + MSW + Playwright 실전 테스트

# 설치
npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event
npm install -D ts-jest @types/jest

// jest.config.ts
import type { Config } from 'jest'
import nextJest from 'next/jest.js'
 
const createJestConfig = nextJest({
  dir: './',  // Next.js 루트 디렉토리 (next.config.ts, .env 읽기용)
})
 
const config: Config = {
  coverageProvider: 'v8',
  testEnvironment: 'jsdom',    // 브라우저 환경 시뮬레이션
  setupFilesAfterFramework: ['<rootDir>/jest.setup.ts'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',  // @ 경로 별칭 매핑
  },
}
 
export default createJestConfig(config)

// jest.setup.ts
import '@testing-library/jest-dom'  // toBeInTheDocument() 등 DOM 매처 추가

// __tests__/components/LoginForm.test.tsx
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { LoginForm } from '@/components/features/auth/LoginForm'
 
describe('LoginForm', () => {
  it('이메일과 비밀번호 입력 필드가 렌더돼야 한다', () => {
    render(<LoginForm />)
 
    expect(screen.getByLabelText('이메일')).toBeInTheDocument()
    expect(screen.getByLabelText('비밀번호')).toBeInTheDocument()
    expect(screen.getByRole('button', { name: '로그인' })).toBeInTheDocument()
  })
 
  it('빈 폼을 제출하면 유효성 검사 에러가 표시돼야 한다', async () => {
    const user = userEvent.setup()
    render(<LoginForm />)
 
    // 아무것도 입력 안 하고 제출
    await user.click(screen.getByRole('button', { name: '로그인' }))
 
    expect(screen.getByText('이메일을 입력해주세요')).toBeInTheDocument()
  })
 
  it('유효한 이메일과 비밀번호를 입력하면 제출 버튼이 활성화돼야 한다', async () => {
    const user = userEvent.setup()
    render(<LoginForm />)
 
    await user.type(screen.getByLabelText('이메일'), 'test@example.com')
    await user.type(screen.getByLabelText('비밀번호'), 'password123')
 
    expect(screen.getByRole('button', { name: '로그인' })).not.toBeDisabled()
  })
})

// __tests__/lib/actions/post.actions.test.ts
import { createPost } from '@/lib/actions/post.actions'
import { db } from '@/lib/db'
import { getSession } from '@/lib/session'
 
// DB와 세션을 모킹 (실제 DB 없이 테스트)
jest.mock('@/lib/db', () => ({
  db: {
    post: {
      create: jest.fn(),
    },
  },
}))
 
jest.mock('@/lib/session', () => ({
  getSession: jest.fn(),
}))
 
const mockDb = db as jest.Mocked<typeof db>
const mockGetSession = getSession as jest.Mock
 
describe('createPost Server Action', () => {
  beforeEach(() => {
    jest.clearAllMocks()
    // 기본: 로그인 상태로 설정
    mockGetSession.mockResolvedValue({ userId: 'user-1', role: 'user' })
  })
 
  it('유효한 데이터로 게시글을 생성해야 한다', async () => {
    const expectedPost = { id: 'post-1', title: '테스트 게시글', content: '내용' }
    mockDb.post.create.mockResolvedValue(expectedPost as any)
 
    const formData = new FormData()
    formData.set('title', '테스트 게시글')
    formData.set('content', '내용')
 
    const result = await createPost(null, formData)
 
    expect(mockDb.post.create).toHaveBeenCalledWith({
      data: { title: '테스트 게시글', content: '내용', authorId: 'user-1' },
    })
    expect(result).toEqual({ success: true })
  })
 
  it('로그인 안 한 상태에서는 에러를 반환해야 한다', async () => {
    mockGetSession.mockResolvedValue(null)  // 세션 없음
 
    const formData = new FormData()
    formData.set('title', '제목')
    formData.set('content', '내용')
 
    const result = await createPost(null, formData)
 
    expect(result).toEqual({ error: '로그인이 필요해요' })
    expect(mockDb.post.create).not.toHaveBeenCalled()
  })
})

npm install -D msw

// __tests__/mocks/handlers.ts — API 모킹 핸들러
import { http, HttpResponse } from 'msw'
 
export const handlers = [
  // GET /api/posts — 게시글 목록 모킹
  http.get('/api/posts', () => {
    return HttpResponse.json([
      { id: '1', title: '클로저 스터디 모집', author: '영수' },
      { id: '2', title: 'Next.js 심화 스터디', author: '영호' },
    ])
  }),
 
  // POST /api/posts — 게시글 생성 모킹
  http.post('/api/posts', async ({ request }) => {
    const body = await request.json() as { title: string; content: string }
    return HttpResponse.json(
      { id: 'new-1', ...body },
      { status: 201 }
    )
  }),
 
  // 에러 시나리오 — 서버 오류 모킹
  http.get('/api/posts/error-test', () => {
    return HttpResponse.json(
      { error: '서버 오류가 발생했어요' },
      { status: 500 }
    )
  }),
]

// __tests__/mocks/server.ts — Node.js 환경용 MSW 서버
import { setupServer } from 'msw/node'
import { handlers } from './handlers'
 
export const server = setupServer(...handlers)

// jest.setup.ts에 추가
import { server } from './__tests__/mocks/server'
 
beforeAll(() => server.listen())    // 모든 테스트 전 MSW 서버 시작
afterEach(() => server.resetHandlers())  // 각 테스트 후 핸들러 초기화
afterAll(() => server.close())      // 모든 테스트 후 MSW 서버 종료

// __tests__/components/PostList.test.tsx
import { render, screen, waitFor } from '@testing-library/react'
import { server } from '../mocks/server'
import { http, HttpResponse } from 'msw'
import { PostList } from '@/components/features/posts/PostList'
 
describe('PostList', () => {
  it('게시글 목록을 정상 렌더해야 한다', async () => {
    render(<PostList />)
 
    // 로딩 상태 확인
    expect(screen.getByText('로딩 중...')).toBeInTheDocument()
 
    // API 응답 후 목록 표시 대기
    await waitFor(() => {
      expect(screen.getByText('클로저 스터디 모집')).toBeInTheDocument()
      expect(screen.getByText('Next.js 심화 스터디')).toBeInTheDocument()
    })
  })
 
  it('API 오류 시 에러 메시지를 표시해야 한다', async () => {
    // 이 테스트에서만 오류 응답으로 덮어씀
    server.use(
      http.get('/api/posts', () =>
        HttpResponse.json({ error: '서버 오류' }, { status: 500 })
      )
    )
 
    render(<PostList />)
 
    await waitFor(() => {
      expect(screen.getByText('게시글을 불러오는 데 실패했어요')).toBeInTheDocument()
    })
  })
})

npm install -D @playwright/test
npx playwright install  # 브라우저 바이너리 설치

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test'
 
export default defineConfig({
  testDir: './e2e',
  baseURL: 'http://localhost:3000',
  use: { trace: 'on-first-retry' },   // 실패 시 트레이스 저장
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'Mobile Chrome', use: { ...devices['Pixel 5'] } },
  ],
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
})

// e2e/auth.spec.ts — 로그인 E2E 테스트
import { test, expect } from '@playwright/test'
 
test.describe('인증 플로우', () => {
  test('로그인 성공 시 대시보드로 이동해야 한다', async ({ page }) => {
    await page.goto('/login')
 
    // 이메일과 비밀번호 입력
    await page.getByLabel('이메일').fill('test@youngsu.community')
    await page.getByLabel('비밀번호').fill('testPassword123!')
 
    // 로그인 버튼 클릭
    await page.getByRole('button', { name: '로그인' }).click()
 
    // 대시보드로 이동했는지 확인
    await expect(page).toHaveURL('/dashboard')
    await expect(page.getByText('안녕하세요')).toBeVisible()
  })
 
  test('잘못된 비밀번호로 로그인 시 에러 메시지가 표시돼야 한다', async ({ page }) => {
    await page.goto('/login')
 
    await page.getByLabel('이메일').fill('test@youngsu.community')
    await page.getByLabel('비밀번호').fill('wrongPassword')
    await page.getByRole('button', { name: '로그인' }).click()
 
    await expect(page.getByText('이메일 또는 비밀번호가 올바르지 않아요')).toBeVisible()
    await expect(page).toHaveURL('/login')  // 이동 안 했는지 확인
  })
 
  test('로그인 안 한 상태에서 대시보드 접근 시 로그인 페이지로 이동해야 한다', async ({ page }) => {
    await page.goto('/dashboard')
 
    // 미들웨어가 리디렉트해야 함
    await expect(page).toHaveURL(/\/login/)
  })
})

// e2e/posts.spec.ts — 게시글 작성 E2E 테스트
import { test, expect } from '@playwright/test'
 
// 모든 테스트 전 로그인 상태 설정
test.beforeEach(async ({ page }) => {
  await page.goto('/login')
  await page.getByLabel('이메일').fill('test@youngsu.community')
  await page.getByLabel('비밀번호').fill('testPassword123!')
  await page.getByRole('button', { name: '로그인' }).click()
  await page.waitForURL('/dashboard')
})
 
test('게시글을 작성하고 목록에서 확인해야 한다', async ({ page }) => {
  await page.goto('/posts/write')
 
  await page.getByLabel('제목').fill('Playwright로 테스트 작성하기')
  await page.getByLabel('내용').fill('테스트 자동화는 개발자의 방패막이야.')
 
  await page.getByRole('button', { name: '게시글 등록' }).click()
 
  // 게시글 목록으로 이동했는지 확인
  await expect(page).toHaveURL('/posts')
 
  // 방금 작성한 게시글이 목록에 있는지 확인
  await expect(page.getByText('Playwright로 테스트 작성하기')).toBeVisible()
})

// jest.config.ts
moduleNameMapper: {
  '^@/(.*)$': '<rootDir>/$1',
}

// jest.setup.ts에 추가
Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: jest.fn().mockImplementation((query) => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(),
    removeListener: jest.fn(),
  })),
})