Теория: Установка

В курсе мы будем использовать связку Vitest + Testing Library Dom, но вам не составит труда использовать любой другой фреймворк в своем проекте, если это понадобится. Изменится только набор устанавливаемых пакетов и пара строк в конфигурации. С точки зрения написания тестов, внутри все то же самое.

Все шаги по установке, которые мы произведем ниже, вы можете подсмотреть в репозитории dom-testing-library-example созданном специально для этого курса.

Генерация проекта

Создайте репозиторий на Github с именем hexlet-testing-library. После этого, на странице репозитория вы увидите команду для клонирования. Выполните клонирование к себе на компьютер, в то место, где вы, обычно, храните проекты с Github.

Перейдите в директорию с проектом, который вы только что клонировали и выполните внутри него команду инициализации npm-проекта:

npm init
# Нажимайте enter до тех пор пока не закончатся вопросы

Следующим шагом создадим нужную структуру директорий и зафиксируем изменения на Github

# Создаем структуру
mkdir __tests__
touch __tests__/main.spec.js
echo 'node_modules' > .gitignore
echo '.vitest-preview' >> .gitignore

# Фиксируем в git и отправляем на Github
git add .
git commit -m 'init npm'
git push

Далее в уроке и по курсу, не забывайте фиксировать любые изменения внутри репозитория и заливать их на Github.

Установка зависимостей

Установим нужные пакеты, они включают в себя тестовый фреймворк, библиотеку testing-library и набор вспомогательных пакетов, с которыми мы познакомимся в процессе курса

# Пакеты тестового фреймворка
npm i -D vitest vitest-preview

# Пакеты testing-library
npm i -D @testing-library/dom @testing-library/jest-dom @testing-library/user-event

Помимо самой библиотеки, авторы рекомендуют настроить Eslint и добавить в него плагины eslint-plugin-testing-library и eslint-plugin-jest-dom. С их помощью вы быстрее научитесь писать правильно составленные тесты.

Конфигурация

Для полноценной работы нам понадобится добавить два файла:

• vite.config.js для конфигурации сборщика Vite, который используется Vitest "под капотом"

  import { defineConfig } from 'vite'
  
  export default defineConfig({
    test: {
      environment: 'jsdom',
      setupFiles: ['./vitest.setup.js'],
      css: true,
    },
  })

  Expand code

• vitest.setup.js с кодом, который нужно выполнить до старта тестов

  import '@testing-library/jest-dom/vitest'

  Expand code

Разберем что мы сделали. Опция environment: 'jsdom' включает режим интеграции с библиотекой jsdom. Опция css: true включает работу с css-файлами, что нам понадобится в дальнейших уроках. Файл vitest.setup.js содержит подключение матчеров для работы с DOM.

Проверка работоспособности

Напишем свой первый тест для проверки правильной настройки. Добавьте код ниже в файл __tests__/main.spec.js

// @ts-check

import { test, expect } from 'vitest'

test('main', async () => {
  document.body.innerHTML = '<h1>Hexlet</h1>'

  expect(document.body).toHaveTextContent('Hexlet')
})

Запустите и убедитесь, что в выводе нет ошибок:

npx vitest run

 ✓ __tests__/example.test.js (1)
   ✓ main

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  19:39:25