В предыдущем посте рассказывалось, как тестировать 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
: