Модульное тестирование React с Jest и Enzyme

Это будет краткое руководство по использованию Jest и Enzyme для модульного тестирования React компонентов. Модульное тестирование может показаться сложным для новичков, но на самом деле это не так сложно, как может показаться. Успешное выполнение тестов может помочь в достижении целей разработки и дизайна, которые могут еще больше раскрыть потенциал вашего приложения и вашей команды.

Jest используется Facebook для тестирования всего кода JavaScript, включая приложения React. Одна из философий Jest заключается в предоставлении интегрированного опыта с «нулевой конфигурацией». Мы заметили, что когда инженерам предоставляются готовые инструменты, они в конечном итоге пишут больше тестов, что, в свою очередь, приводит к созданию более стабильных и здоровых кодовых баз.

Enzyme - это утилита для тестирования JavaScript для React, которая упрощает утверждение, управление и просмотр выходных данных компонентов React. API-интерфейс Enzyme должен быть интуитивно понятным и гибким, имитируя API-интерфейс jQuery для управления и обхода DOM.

Начиная

Давайте начнем.

Во-первых, давайте создадим каталог для размещения всех наших файлов. В вашем терминале сделайте следующее:

mkdir <directory_name> cd <directory_name>

Теперь давайте создадим приложение для реагирования, используя create-react-app.

Если у вас не установлен create-react-app, выполните в терминале следующие действия:

npm install -g create-react-app

Оказавшись внутри вашего вновь созданного каталога, с помощью терминала введите следующее:

create-react-app <appname>

Помните, что имя приложения ДОЛЖНО быть строчными.

Во всех смыслах и целях этого урока я буду использовать имя jest_enzyme_tutorial.

create-react-app jest_enzyme_tutorial

После создания приложения cd в новое приложение React.

Установка Jest и Enzyme

Теперь мы собираемся установить Jest и Enzyme вместе с любыми другими необходимыми зависимостями.

Если вы создали свое приложение с помощью create-react-app, значит, Jest уже установлен в ваше приложение и полностью готов к работе. Пропустите шаг ниже.

Для тех, кто создал свое приложение React без использования create-react-app, установите вместе с Jest следующие зависимости:

npm install --save-dev jest babel-jest babel-preset-env babel-preset-react react-test-renderer

Давайте установим Enzyme вместе с необходимыми зависимостями:

npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer

На этом все готово для установки, теперь давайте настроим Enzyme для работы с Jest.

В папке src вашего проекта создайте файл с именем setupTests.js. Вставьте внутрь следующий код:

Теперь ваше приложение должно быть настроено на использование Jest и Enzyme для модульного тестирования.

Проведение вашего первого теста

При использовании Jest тестовые файлы указываются со следующим соглашением об именах: Filename.test.js. По сути, это то же самое, что и исходное имя файла, но с добавлением .test. посередине.

Примером может служить исходный тестовый файл, созданный с помощью create-react-app. Вы обнаружите, что он называется App.test.js. Это тестовый файл, специально созданный для проверки чего-либо внутри файла App.js.

Чтобы запустить наши тесты, сделайте в своем терминале следующее:

npm run test

Через несколько секунд в вашем терминале должно появиться следующее:

Поздравляем, вы успешно выполнили свой первый тест!

Написание нашего первого теста

Итак, мы знаем, как запускать наши тесты, теперь приступим к их написанию. Сначала посмотрим на App.test.js. На данный момент файл должен выглядеть так:

Это простой тест, написанный для проверки того, будет ли компонент <App /> отображаться без сбоев. Этот тест также проверит render скорость компонента.

Теперь давайте посмотрим на App.js, файл, который App.test.js тестирует:

Это ваш типичный App.js файл, созданный create-react-app. А теперь избавимся от всего, кроме самого верхнего уровня <div>. Ваш App.js теперь должен выглядеть так:

Теперь давайте создадим <button>, который переключает state с именем buttonState с начальным значением false. При нажатии state будет иметь значение true и отобразить h1 с текстом "HELLO".

Теперь ваш браузер должен отображать созданный нами <button>, а при нажатии - текстовое отображение "HELLO".

Визуально это может показаться не таким уж большим, но этого более чем достаточно, чтобы приступить к написанию нашего первого теста. Вы должны уметь разбирать компоненты и функции до мельчайших деталей и смотреть на них с разных точек зрения. Эти знания помогут вам написать отличные модульные тесты.

Итак, как мы можем это сломать? Давай подумаем.

• Пользователь должен видеть отрендеренный <button>.
• При нажатии пользователь должен увидеть на экране "HELLO".
• Начальное состояние buttonState всегда должно быть false.

Этих трех вещей должно быть достаточно для начала. А теперь приступим к написанию тестов! Сначала давайте возьмем import Enzyme shallow rendering на верхнем уровне нашего тестового файла.

Shallow rendering полезно ограничить себя тестированием компонента как модуля и убедиться, что ваши тесты не подтверждают косвенно поведение дочерних компонентов.

Теперь давайте напишем наш первый тест внутри App.test.js.

Давайте разберем приведенный выше код.

Ваш App.test.js теперь должен выглядеть так.

Давайте снова запустим наши тесты с npm run test. Наш терминал должен отображать следующее:

Поздравляю! Вы написали свой первый тест, но как мы узнаем, что он на самом деле тестирует правильно и не дает ложных срабатываний. Легкий. В вашем App.js комментарии строка, содержащая элемент кнопки.

Затем запустите npm run test. Затем он должен дать вам неудачный тест.

Не делайте это обычной практикой для своих тестов.

Когда вы научитесь писать и запускать тесты, используйте snapshot testing для проверки изменений в вашем пользовательском интерфейсе.

При работе над большими проектами количество тестов может увеличиваться, что немного затрудняет поиск конкретного теста в большом списке. Вот где describe может пригодиться. describe создает блок, который объединяет несколько связанных тестов в один «набор тестов». Это используется для очистки больших списков тестов, чтобы легко различать разные наборы тестов.

При использовании npm run test ваш терминал должен выглядеть примерно так:

Видите, как аккуратно разделены мои тесты для моего <App /> компонента и моего <Link /> компонента? В этом сила функции describe.

Заключение

Этого должно хватить для этого урока. Это почти не касается использования Jest и Enzyme, но этого должно быть достаточно, чтобы вы смогли написать свои собственные тесты. Теперь я хотел бы, чтобы вы закончили писать оставшиеся тесты, о которых мы думали ранее, с помощью руководств и документов Jest и Enzyme, а затем я хотел бы, чтобы вы бросили вызов самому себе, создав и протестировав свои собственные компоненты.

Остальные тесты:

• При нажатии пользователь должен увидеть на экране "Hello".
• Начальное состояние buttonState всегда должно быть false.

Надеюсь, вы кое-что узнали. До скорого.

Смотрите полное репо здесь: