Часть 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.

Раздел об издании библиотеки доступен здесь.