Svelte 테스트 전략 완벽 가이드

Svelte 컴포넌트를 효과적으로 테스트하는 방법을 배웁니다. Vitest와 Testing Library를 활용한 실전 테스트 전략을 다룹니다.

---

---

들어가며

이 글에서는 Svelte 테스트 전략 완벽 가이드에 대해 상세히 알아보겠습니다. 총 12가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. 기본_컴포넌트_테스트
2. 이벤트_핸들러_테스트
3. Props_유효성_테스트
4. Store_상태_테스트
5. 비동기_데이터_로딩_테스트
6. 폼_입력_검증_테스트
7. Snapshot_테스트
8. 조건부_렌더링_테스트
9. Slot_테스트
10. 커스텀_이벤트_테스트
11. 반응형_선언_테스트
12. 접근성_테스트

---

1. 기본 컴포넌트 테스트

개요

Svelte Testing Library를 사용하여 컴포넌트의 렌더링과 DOM 요소를 테스트합니다.

코드 예제

import { render, screen } from '@testing-library/svelte';
import Button from './Button.svelte';

test('버튼이 올바르게 렌더링됨', () => {
  render(Button, { props: { label: '클릭' } });
  expect(screen.getByText('클릭')).toBeInTheDocument();
});

설명

render 함수로 컴포넌트를 마운트하고, screen을 통해 DOM 요소를 찾아 검증합니다.

---

2. 이벤트 핸들러 테스트

개요

사용자 인터랙션(클릭, 입력 등)이 올바르게 동작하는지 테스트합니다.

코드 예제

import { render, fireEvent } from '@testing-library/svelte';
import Counter from './Counter.svelte';

test('클릭 시 카운터 증가', async () => {
  const { getByRole } = render(Counter);
  const button = getByRole('button');
  await fireEvent.click(button);
  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

설명

fireEvent를 사용해 클릭 이벤트를 시뮬레이션하고, 상태 변경을 검증합니다.

---

3. Props 유효성 테스트

개요

컴포넌트에 전달되는 props가 올바르게 반영되는지 확인합니다.

코드 예제

import { render } from '@testing-library/svelte';
import UserCard from './UserCard.svelte';

test('props가 올바르게 표시됨', () => {
  const { getByText } = render(UserCard, {
    props: { name: '홍길동', age: 30 }
  });
  expect(getByText('홍길동')).toBeInTheDocument();
});

설명

props를 전달하여 컴포넌트를 렌더링하고, 전달된 값이 화면에 표시되는지 검증합니다.

---

4. Store 상태 테스트

개요

Svelte store의 상태 변경과 구독을 테스트합니다.

코드 예제

import { get } from 'svelte/store';
import { userStore } from './stores';

test('스토어 상태 업데이트', () => {
  userStore.set({ name: '김철수' });
  expect(get(userStore).name).toBe('김철수');

  userStore.update(user => ({ ...user, age: 25 }));
  expect(get(userStore).age).toBe(25);
});

설명

get 함수로 store 값을 읽고, set/update 메서드의 동작을 검증합니다.

---

5. 비동기 데이터 로딩 테스트

개요

API 호출 등 비동기 작업을 Mock하여 테스트합니다.

코드 예제

import { render, waitFor } from '@testing-library/svelte';
import UserList from './UserList.svelte';
import * as api from './api';

test('사용자 목록 로딩', async () => {
  vi.spyOn(api, 'fetchUsers').mockResolvedValue([{ id: 1, name: '테스트' }]);
  render(UserList);
  await waitFor(() => expect(screen.getByText('테스트')).toBeInTheDocument());
});

설명

vi.spyOn으로 API를 Mock하고, waitFor로 비동기 렌더링 완료를 기다립니다.

---

6. 폼 입력 검증 테스트

개요

사용자 입력 폼의 유효성 검사와 제출을 테스트합니다.

코드 예제

import { render, fireEvent } from '@testing-library/svelte';
import LoginForm from './LoginForm.svelte';

test('폼 제출 테스트', async () => {
  const { getByLabelText, getByRole } = render(LoginForm);
  await fireEvent.input(getByLabelText('이메일'), { target: { value: 'test@test.com' } });
  await fireEvent.click(getByRole('button', { name: '로그인' }));
});

설명

fireEvent.input으로 입력 값을 설정하고, 폼 제출 동작을 검증합니다.

---

7. Snapshot 테스트

개요

컴포넌트의 렌더링 결과를 스냅샷으로 저장하여 변경사항을 추적합니다.

코드 예제

import { render } from '@testing-library/svelte';
import Header from './Header.svelte';

test('헤더 스냅샷', () => {
  const { container } = render(Header, {
    props: { title: '메인 페이지' }
  });
  expect(container).toMatchSnapshot();
});

설명

컴포넌트의 HTML 구조를 스냅샷으로 저장하여 의도하지 않은 변경을 감지합니다.

---

8. 조건부 렌더링 테스트

개요

if 블록이나 조건부 렌더링 로직을 테스트합니다.

코드 예제

import { render } from '@testing-library/svelte';
import Message from './Message.svelte';

test('에러 메시지 표시', () => {
  const { queryByText, rerender } = render(Message, { props: { error: null } });
  expect(queryByText('오류 발생')).not.toBeInTheDocument();

  rerender({ error: '오류 발생' });
  expect(queryByText('오류 발생')).toBeInTheDocument();
});

설명

rerender로 props를 변경하여 조건부 렌더링이 올바르게 동작하는지 확인합니다.

---

9. Slot 테스트

개요

컴포넌트의 슬롯이 올바르게 렌더링되는지 테스트합니다.

코드 예제

import { render } from '@testing-library/svelte';
import Card from './Card.svelte';

test('슬롯 컨텐츠 렌더링', () => {
  const { getByText } = render(Card, {
    props: { $$slots: { default: true } },
    context: new Map([['$$slots', { default: [() => '슬롯 내용'] }]])
  });
});

설명

슬롯에 전달된 컨텐츠가 올바르게 렌더링되는지 검증합니다.

---

10. 커스텀 이벤트 테스트

개요

컴포넌트에서 발생시키는 커스텀 이벤트를 테스트합니다.

코드 예제

import { render, fireEvent } from '@testing-library/svelte';
import { vi } from 'vitest';
import TodoItem from './TodoItem.svelte';

test('삭제 이벤트 발생', async () => {
  const handleDelete = vi.fn();
  const { component } = render(TodoItem);
  component.$on('delete', handleDelete);
  await fireEvent.click(screen.getByRole('button', { name: '삭제' }));
  expect(handleDelete).toHaveBeenCalled();
});

설명

$on으로 이벤트 리스너를 등록하고, vi.fn()으로 호출 여부를 검증합니다.

---

11. 반응형 선언 테스트

개요

$: 구문을 사용한 반응형 선언이 올바르게 동작하는지 테스트합니다.

코드 예제

import { render } from '@testing-library/svelte';
import Calculator from './Calculator.svelte';

test('반응형 계산 테스트', async () => {
  const { component, getByText } = render(Calculator);
  component.a = 5;
  component.b = 3;
  await tick();
  expect(getByText('합계: 8')).toBeInTheDocument();
});

설명

컴포넌트 인스턴스의 속성을 직접 변경하고, tick()으로 반응형 업데이트를 기다립니다.

---

12. 접근성 테스트

개요

컴포넌트의 접근성(a11y)을 테스트하여 웹 표준을 준수합니다.

코드 예제

import { render } from '@testing-library/svelte';
import { axe, toHaveNoViolations } from 'jest-axe';
import Button from './Button.svelte';

test('접근성 검사', async () => {
  expect.extend(toHaveNoViolations);
  const { container } = render(Button);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

설명

jest-axe를 사용하여 ARIA 속성, 시맨틱 HTML 등 접근성 규칙을 자동으로 검증합니다. --- 위 카드 뉴스는 Svelte 컴포넌트 테스트의 핵심 전략 12가지를 다루고 있습니다. 각 카드는 실제 작동하는 코드 예제와 함께 중급 개발자가 실무에 바로 적용할 수 있는 내용으로 구성되어 있습니다.

---

마치며

이번 글에서는 Svelte 테스트 전략 완벽 가이드에 대해 알아보았습니다. 총 12가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#Svelte #Testing #Vitest #ComponentTesting #UnitTest