Ch 05. Vitest와 Playwright로 테스트 기초

코드를 수정하고 나서 "혹시 다른 기능이 망가지지 않았을까?" 하고 걱정한 적이 있을 겁니다. 테스트 코드가 있으면 이 걱정이 줄어듭니다. 완벽한 커버리지를 목표로 하기보다, 핵심 로직만이라도 테스트하는 것으로 시작합니다.

Vitest 설치와 설정

Vitest는 Vite 기반의 단위 테스트 도구입니다. Jest와 문법이 거의 같아서 이미 Jest를 써본 분이라면 바로 적응할 수 있습니다.

npm install -D vitest @vue/test-utils

package.json에 테스트 스크립트를 추가합니다.

{  "scripts": {    "test": "vitest",    "test:ui": "vitest --ui"  }}

Composable 단위 테스트

Composable은 순수 함수에 가까워서 테스트 작성이 쉽습니다. useCounter composable을 예로 들어봅니다.

// tests/useCounter.test.tsimport { describe, it, expect } from 'vitest'import { useCounter } from '~/composables/useCounter'describe('useCounter', () => {  it('초기값이 0이다', () => {    const { count } = useCounter()    expect(count.value).toBe(0)  })  it('increment 시 1 증가한다', () => {    const { count, increment } = useCounter()    increment()    expect(count.value).toBe(1)  })})

npm test를 실행하면 Vitest가 tests/ 디렉토리의 테스트 파일을 찾아 실행합니다. 테스트가 실패하면 어떤 값이 기대됐고 어떤 값이 왔는지 상세하게 보여줍니다.

Playwright E2E 테스트

Playwright는 실제 브라우저에서 사용자 동작을 시뮬레이션하는 E2E 테스트 도구입니다. 로그인, 게시글 작성, 페이지 이동 같은 핵심 흐름을 자동화합니다.

npm install -D @playwright/testnpx playwright install

// e2e/login.spec.tsimport { test, expect } from '@playwright/test'test('로그인이 성공한다', async ({ page }) => {  await page.goto('/login')  await page.fill('input[type="email"]', '[email protected]')  await page.fill('input[type="password"]', 'password123')  await page.click('button[type="submit"]')  await expect(page).toHaveURL('/')})

npx playwright test를 실행하면 Chromium, Firefox, WebKit에서 테스트를 병렬로 진행합니다. --headed 옵션을 붙이면 브라우저 창이 실제로 열리면서 동작하는 모습을 볼 수 있습니다.

테스트 전략

모든 코드에 테스트를 작성하는 것은 현실적으로 어렵습니다. 비즈니스 로직이 담긴 Composable과 서버 유틸리티 함수는 단위 테스트로, 인증 흐름과 게시글 CRUD 같은 핵심 사용자 시나리오는 E2E 테스트로 커버하는 것이 효율적인 출발점입니다.