테스트

SvelteKit 프로젝트는 보통 두 가지 도구로 테스트합니다. 함수와 컴포넌트는 Vite와 같은 설정을 쓰는 Vitest로, 실제 브라우저에서 앱 전체가 동작하는지는 Playwright로 확인합니다.

테스트 도구 추가

sv 추가 기능으로 두 도구를 한 번에 설정할 수 있습니다.

npx sv add vitest playwright

npm run test:unit   # Vitest
npm run test:e2e    # Playwright

vitest 추가 기능은 필요한 패키지와 package.json 스크립트, 그리고 서버 코드와 클라이언트 코드를 나눠 실행하는 Vite 테스트 설정을 만들어 줍니다. 추가 기능이 만드는 구성은 sv 판에 따라 달라질 수 있으므로, 실행 뒤 vite.config.ts와 package.json을 한 번 열어 확인하세요. 아래에서는 Svelte 공식 문서가 설명하는 jsdom과 Testing Library 구성을 기준으로 합니다.

일반 함수 단위 테스트

src/lib의 순수 함수는 그대로 가져와 검사합니다. 테스트 파일은 보통 대상 파일 옆에 *.test.ts나 *.spec.ts로 둡니다.

// src/lib/price.ts
export function formatPrice(won: number) {
  return `${won.toLocaleString('ko-KR')}원`;
}

// src/lib/price.test.ts
import { describe, expect, it } from 'vitest';
import { formatPrice } from './price.js';

describe('formatPrice', () => {
  it('천 단위로 쉼표를 넣는다', () => {
    expect(formatPrice(12500)).toBe('12,500원');
  });
});

룬을 쓰는 코드 테스트

$state 같은 룬은 .svelte와 .svelte.ts 파일 안에서만 컴파일됩니다. 룬을 쓰는 로직을 테스트하려면 테스트 파일 이름을 *.svelte.test.ts로 짓습니다.

// src/lib/counter.svelte.ts
export function createCounter() {
  let count = $state(0);
  const double = $derived(count * 2);
  return {
    get count() { return count; },
    get double() { return double; },
    increment() { count += 1; }
  };
}

// src/lib/counter.svelte.test.ts
import { expect, test } from 'vitest';
import { createCounter } from './counter.svelte.js';

test('증가하면 두 배 값도 따라 바뀐다', () => {
  const counter = createCounter();
  expect(counter.double).toBe(0);

  counter.increment();
  expect(counter.count).toBe(1);
  expect(counter.double).toBe(2);
});

$effect가 들어간 코드를 시험할 때는 $effect.root로 감싸고, 효과를 바로 실행하려면 svelte의 flushSync()를 부릅니다.

컴포넌트 테스트

컴포넌트는 jsdom 환경에서 Testing Library로 렌더링하고, 사용자가 보는 기준(역할, 글자)으로 요소를 찾아 검사합니다.

npm install -D jsdom @testing-library/svelte @testing-library/user-event @testing-library/jest-dom

// vite.config.ts 의 일부
export default defineConfig({
  plugins: [sveltekit({ adapter: adapter() })],
  test: {
    environment: 'jsdom',
    setupFiles: ['./vitest-setup.ts']
  },
  resolve: process.env.VITEST ? { conditions: ['browser'] } : undefined
});

resolve.conditions의 browser는 테스트 중에 Svelte의 브라우저용 코드가 쓰이도록 하는 설정이고, vitest-setup.ts에는 import '@testing-library/jest-dom/vitest'; 한 줄을 넣어 toHaveTextContent 같은 검사 함수를 추가합니다. defineConfig는 vitest/config에서 가져오면 test 항목의 타입도 맞춰집니다.

// src/lib/components/Counter.test.ts
import { render, screen } from '@testing-library/svelte';
import userEvent from '@testing-library/user-event';
import { expect, test } from 'vitest';
import Counter from './Counter.svelte';

test('버튼을 누르면 숫자가 오른다', async () => {
  const user = userEvent.setup();
  render(Counter, { props: { initial: 1 } });

  const button = screen.getByRole('button');
  await user.click(button);
  expect(button).toHaveTextContent('2');
});

load 함수와 폼 액션은 평범한 비동기 함수이므로, 필요한 인자만 담은 가짜 이벤트 객체를 넘겨 호출하고 돌려준 값을 검사할 수 있습니다.

Playwright로 E2E 테스트

Playwright는 빌드한 앱을 미리 보기 서버로 띄운 뒤 실제 브라우저로 조작합니다. sv add playwright가 만드는 설정은 다음과 비슷합니다.

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  webServer: {
    command: 'npm run build && npm run preview',
    port: 4173
  },
  testDir: 'tests'
});

// tests/home.test.ts
import { expect, test } from '@playwright/test';

test('첫 화면에 제목이 보인다', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
});

처음 실행할 때는 npx playwright install로 브라우저를 내려받아야 합니다. 폼 액션처럼 서버와 브라우저가 함께 동작하는 흐름은 E2E 테스트로 확인하는 것이 가장 확실합니다.

정리

• npx sv add vitest playwright로 테스트 도구를 설정합니다.
• 함수와 룬 로직은 Vitest로, 룬을 쓰는 테스트 파일은 .svelte.test.ts로 짓습니다.
• 컴포넌트는 jsdom과 Testing Library로 사용자 관점에서 검사합니다.
• 앱 전체 흐름은 빌드 결과를 띄운 Playwright 테스트로 확인합니다.