В предыдущем посте рассказывалось, как тестировать React Hooks как отдельную единицу с помощью Vitest и библиотеки тестирования React. В этом посте мы продолжим изучать, как использовать компоненты React для модульного тестирования удобным для сопровождения и расширяемым способом.

Предпосылки

У вас должен быть настроен и запущен проект React. Рекомендуемый способ — инициализировать ваш проект с помощью Vite в качестве инструмента управления пакетами с помощью команды npm create vite@latest.

Для тестирования нам понадобятся следующие установленные зависимости:

  • Vitest как среда модульного тестирования
  • JSDOM как среда DOM для запуска наших тестов
  • React Testing Library как утилиты для тестирования React

Для этого мы запускаем следующую команду:

yarn add -D vitest jsdom @testing-library/react

В vitest.config.js (или vite.config.js для проектов Vite) мы добавляем следующий объект test:

//...
export default defineConfig({
  test: {
    global: true,
    environment: 'jsdom',
  },
})

Мы также добавляем новую команду test:unit в файл package.json для запуска модульных тестов следующим образом:

"scripts": {
    "test:unit": "vitest --root src/",
}

Далее мы выполним дополнительную настройку, чтобы заставить Vitest утверждать элементы DOM.

Расширение метода ожидания Vitest

Vitest предлагает основные методы утверждения для использования с expect для утверждения значений. Однако у него нет методов утверждения для элементов DOM, таких как toBeInTheDocument() или toHaveTextContent(). Для таких методов мы можем установить пакет @testing-library/jest-dom и расширить метод expect из Vitest, чтобы включить методы утверждения в matchers из этого пакета.

Для этого мы создадим файл setupTest.js в корневом каталоге нашего проекта и добавим следующий код:

/**setupTest.js */
import { expect } from 'vitest';
import matchers from '@testing-library/jest-dom/matchers';

expect.extend(matchers);

В vitest.config.js мы можем добавить файл setupTest.js в поле test.setupFiles: