Svelte: настройка для тестирования

Тесты играют решающую роль в каждом проекте. Кто-то может возразить, что тесты тормозят проект, и это действительно так. Однако истинная важность заключается в том, сколько времени требуется для поддержки проекта и добавления новых функций.

Хотя начальная фаза разработки может протекать быстро, она часто приводит к тому, что значительное количество времени уходит на исправление ошибок. Иногда весь спринт может быть посвящен исправлению ошибок, а не разработке новых функций.

Чтобы избежать таких сценариев, важно расставить приоритеты в подготовке к тестированию и включить тестирование в рабочий процесс нашего проекта.

На изображении ниже видно, что тесты изначально замедляют процесс разработки. Тем не менее, он обеспечивает последовательный прогресс в разработке с течением времени.

С другой стороны, без тестов разработка может быть быстрее в начале, но позже это может привести к потенциальной катастрофе.

Бывает и хуже: проект с плохими тестами.

Пища для размышлений

Люди часто думают, что производственный код и тестовый код — это разные вещи. Предполагается, что тесты являются дополнением к производственному коду и не требуют затрат на владение. Более того, люди часто считают, что чем больше тестов, тем лучше. Это не так. Код — это обязательство, а не актив. Чем больше кода вы введете, тем больше вы расширите площадь поверхности для потенциальных ошибок в вашем программном обеспечении и тем выше стоимость поддержки проекта. Всегда лучше решать проблемы с помощью как можно меньшего количества кода.

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

Создать проект

Запустите эту команду в папке ваших проектов:

npm create svelte@latest

Мы будем использовать javascript для этих серий, вы можете использовать Typescript, если хотите.

Выберите варианты:

1. Скелетный проект

2. Эслинт, хорошенькая, драматург и витест

Теперь, когда проект готов, остался последний шаг. Вам необходимо установить зависимости проекта. Выполните следующую команду:

npm i

Беги, драматург

npm run test:integration

Упс, не получится…

У Playwright есть собственная настройка среды, например, установка Chromium на ваш компьютер. Вы можете установить его с помощью следующей команды:

npx playwright install

Теперь, если вы запустите npm run test:integration, он должен работать правильно.

Запустить Vitest

npm run test:unit

Это автоматически переводит вас в режим наблюдения, что означает, что любые изменения в файловой системе вызовут повторный запуск тестов. Нажмите q, чтобы выйти из этого режима.

Текущий подход в SvelteKit заключается в хранении тестовых файлов Vitest в каталоге «src». Чтобы избежать путаницы с тестами Playwright, тесты Playwright хранятся в отдельном каталоге под названием «тесты».

Установить пакеты дом

Нам нужен доступ к объектной модели документа (DOM), которая не включена в стандартную среду Node.js. Кроме того, нам нужно будет установить дополнительные пакеты для написания ожиданий модульного теста относительно DOM.

npm install --save-dev \
  jsdom \
  @testing-library/svelte \
  @testing-library/jest-dom \
  @testing-library/user-event

Затем создайте новый файл с именем src/vitest/registerMatchers.js и добавьте следующее содержимое. Этот файл гарантирует, что сопоставители, которые мы будем использовать, доступны для использования через функцию expect.

import matchers from '@testing-library/jest-dom/matchers';
import { expect } from 'vitest';
expect.extend(matchers);

Затем обновите vite.config.js, чтобы включить новое свойство среды, которое правильно устанавливает jsdom. Кроме того, добавьте свойство setupFiles, чтобы обеспечить загрузку ранее определенного файла непосредственно перед загрузкой наборов тестов.

const config = {
   plugins: [sveltekit()],
   test: {
     ...,
     environment: 'jsdom',
     setupFiles: ['./src/vitest/registerMatchers.js']
   }
 };

Очищать DOM после каждого запуска теста

Чтобы убедиться, что у каждого теста есть собственная чистая версия DOM, мы будем использовать функцию очистки.

Создайте новый файл с именем src/vitest/cleanupDom.js:

import { afterEach } from 'vitest';
import { cleanup } from '@testing-library/svelte';
afterEach(cleanup);

Затем добавьте файл src/vitest/cleanupDom.js к свойству setupFiles в vite.config.js:

const config = {
  ...,
  test: {
    ...,
    setupFiles: [
      './src/vitest/cleanupDom.js',
      './src/vitest/registerMatchers.js'
    ]
  }
};

Автоматически восстанавливать макеты

Наконец, включите свойство restoreMocks в vite.config.js, как показано здесь:

const config = {
  ...,
  test: {
    ...,
    restoreMocks: true
  }
};

Теперь мы готовы…

Спасибо, что нашли время, чтобы прочитать мою статью. Я ценю ваш интерес к теме и надеюсь, что она была информативной. Если у вас есть какие-либо отзывы или комментарии к статье, пожалуйста, не стесняйтесь поделиться ими со мной.