Основы тестирования

Тест — небольшая программа, которая проверяет, что ваш код работает как задумано. Тесты запускают после каждого изменения: если что-то сломалось, вы узнаете об этом сразу, а не от посетителей. Для проектов SvelteKit стандартный инструмент — Vitest.

Подключение Vitest

Если вы не выбрали Vitest при создании проекта, добавьте его сейчас:

npx sv add vitest

Утилита установит пакеты, допишет настройки в vite.config.js и добавит в package.json команду test:unit. Если она спросит о видах тестов, выберите и обычные (unit), и компонентные.

Тест обычной функции

Вынесем создание адреса статьи из действия формы в отдельную функцию:

// src/lib/slugify.js
export function slugify(title) {
  return title.trim().toLowerCase().replaceAll(' ', '-');
}

Тест кладут рядом, добавив к имени .test:

// src/lib/slugify.test.js
import { describe, expect, it } from 'vitest';
import { slugify } from './slugify.js';
 
describe('slugify', () => {
  it('заменяет пробелы дефисами', () => {
    expect(slugify('Hello Svelte')).toBe('hello-svelte');
  });
 
  it('убирает пробелы по краям', () => {
    expect(slugify('  Runes ')).toBe('runes');
  });
});

describe объединяет тесты, it описывает один случай, а expect(...).toBe(...) сравнивает результат с ожидаемым.

Запуск

npm run test:unit

Vitest найдёт файлы *.test.js, выполнит их и напечатает в терминале зелёные отметки у прошедших тестов. Команда продолжает следить за файлами и перезапускает тесты при сохранении. Чтобы прогнать тесты один раз и выйти, используйте npx vitest run.

Тест компонента

Компонент можно вывести в тестовый документ функцией mount из пакета svelte и проверить получившийся текст. Возьмём счётчик, который получает задачи свойством:

<!-- src/lib/components/TodoCounter.svelte -->
<script>
  let { todos } = $props();
  let remaining = $derived(todos.filter((t) => !t.done).length);
</script>
 
<span>Осталось: {remaining}</span>

// src/lib/components/TodoCounter.svelte.test.js
import { mount, unmount } from 'svelte';
import { expect, test } from 'vitest';
import TodoCounter from './TodoCounter.svelte';
 
test('считает невыполненные задачи', () => {
  const component = mount(TodoCounter, {
    target: document.body,
    props: {
      todos: [
        { id: 1, text: 'Купить хлеб', done: false },
        { id: 2, text: 'Позвонить Олегу', done: true }
      ]
    }
  });
 
  expect(document.body.textContent).toContain('Осталось: 1');
  unmount(component);
});

Тест проходит, если на «странице» появился текст «Осталось: 1». Окончание .svelte.test.js подсказывает настройкам из sv, что тесту нужен браузерный документ.

Сквозные тесты

Проверить сайт целиком — открыть страницу, заполнить форму, нажать кнопку — помогают сквозные (end-to-end) тесты в настоящем браузере. Для них есть дополнение npx sv add playwright.

Частая ошибка

Писать компонентный тест в файле с обычным окончанием .test.js. В настройках sv такие тесты выполняются в среде Node.js без DOM, и тест упадёт с ошибкой document is not defined. Тесты, которые выводят компоненты, называйте *.svelte.test.js.