Часть 2 - Тестирование компонентов
Это вторая часть этой серии. В первой части мы построили скелет нашей библиотеки, настроили среду разработки и добавили первый, базовый компонент. Ни одна библиотека не годится без тестов, давайте добавим их сейчас.
Библиотеки тестирования
Для тестирования наших компонентов мы будем использовать Jest и React Testing Library.
Установим их:
npm install --save-dev @testing-library/react jest
Теперь добавьте сценарий "test": "jest"
в package.json
, чтобы мы могли легко запускать тесты.
Базовый тест
Написание простого базового теста не требует настройки. Файлы с расширением *.test.js
по умолчанию распознаются как наборы тестов.
Давайте сразу перейдем к созданию тестового файла:
В этом простом тесте мы проверяем, был ли отрисован текст, переданный в Button
.
Функция getByText
выдаст ошибку, если ожидаемый текст не найден, что приведет к сбою тестового примера. В этом случае нам не нужен expect
.
Давайте проведем тесты впервые.
$ npm test PASS src/components/Button.test.js Button ✓ should display text (23ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 1.945s Ran all test suites.
Да, тест проходит!
Взаимодействие с компонентами
Первый тест, который мы написали, очень простой. Давайте теперь немного поработаем с компонентом!
Давайте займемся разработкой, основанной на тестировании, и напишем тест перед тем, как сделать theButton
действительно интерактивным:
Что здесь происходит? Сначала мы создаем фиктивную функцию onClickMock
Jest, которую передаем Button
как onClick
prop. Позже мы проверим, действительно ли он был вызван.
В отличие от первого теста, мы не можем напрямую использовать container
, возвращаемый функцией render
. Как следует из названия, он содержит только наш компонент.
Мы получаем его от container.firstChild
, а затем используем fireEvent
для имитации щелчка по компоненту.
Наконец, мы проверяем, действительно ли была вызвана функция onClickMock
. Если это так, это означает, что наш Button
компонент реагирует на события щелчка.
Давайте теперь проверим результат теста:
● Button › should handle click events expect(jest.fn()).toBeCalled() Expected mock function to have been called, but it was not called.
Как и ожидалось, сейчас тесты не проходят.
Пора исправить Button
и сделать его интерактивным. Пристегните ремни безопасности, впереди экстремальное программирование.
Давайте расширим нашу кнопку с помощью сумасшедшего onClick
обработчика:
Повторно запустите тесты:
$ npm test PASS src/components/Button.test.js Button ✓ should display text (25ms) ✓ should handle click events (9ms) Test Suites: 1 passed, 1 total Tests: 2 passed, 2 total Snapshots: 0 total Time: 1.212s Ran all test suites.
Зеленый! TDD на победу!
Проверка правил укладки
В некоторых случаях мы можем захотеть проверить, были ли применены правильные правила CSS к данным компонентам. Для удобства и простоты использования мы установим плагин jest-emotion
, который предоставляет toHaveStyleRule
помощник matcher.
Давайте установим его с помощью npm install --save-dev jest-emotion
и создадим два файла конфигурации:
Это делает toHaveStyleRule
доступным глобально в каждом тесте.
Второй указывает Jest на установочные файлы, которые необходимо запустить после установки тестовой среды (в основном, когда доступен expect
).
Настроив Jest, добавим тест к тестам кнопок:
Мы получаем компонент, ища заданный текст и проверяя, имеет ли он правильное значение для свойства text-transform
CSS.
Запуск тестов:
$ npm test PASS src/components/Button.test.js Button ✓ should display text (25ms) ✓ should handle click events (8ms) ✓ should make text uppercase (5ms) Test Suites: 1 passed, 1 total Tests: 3 passed, 3 total Snapshots: 0 total Time: 2.045s Ran all test suites.
Идеально!
Резюме
Мы добавили библиотеки тестирования в наш проект и использовали их для написания пары тестов для компонента Button
.
Мы проверили, правильно ли отображается Button
и доступен ли он для нажатия. Наконец, мы добавили помощника toHaveStyleRule
, чтобы легко проверять правила CSS, и использовали его, чтобы проверить, делает ли Button
текст в верхнем регистре.
Молодец! Вот и все!
Полный код доступен в репозитории GitHub. Вы можете проверить тег part2
(git checkout part2
), чтобы увидеть полный пример из этой части.
Следующий
В следующих частях мы опубликуем библиотеку в npm, а позже добавим автоматическое развертывание документации на страницы GitHub.
Раздел об издании библиотеки доступен здесь.