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

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

ReactJS - это библиотека JavaScript, разработанная Facebook для создания пользовательских интерфейсов. Приложение responseJS в основном состоит из действий, компонентов, редукторов и селекторов. Мы вместе посмотрим, как протестировать каждую из них.

Настройка Jest

Jest - это среда тестирования Javascript, разработанная Facebook. Документацию можно найти на jestjs.io. Первый шаг - установка Jest с использованием npm или yarn, мой любимый - yarn.

yarn add --dev jest

Следующим шагом является добавление сценария, запускающего Jest, в файл package.json.

"scripts": {
    "test": "jest"
}

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

Генераторы тестовых действий

Генератор действий похож на «метод», который возвращает действие, которое редукторы могут услышать. Например, генератор действий addEntry ниже сообщает редуктору, что мы хотим добавить новую запись с определенными значениями в наш дневник.

Рекомендуется помещать все тесты в каталог тестов. Давайте добавим файл entries.test.js в каталог tests / actions.

Как вы можете видеть выше, первое, что мы делаем, это импортируем генераторы действий, которые хотим протестировать, а затем переходим прямо к текстовому регистру. У каждого теста есть краткое описание того, что он должен проверять. Затем вызывается тестируемый генератор действий с соответствующими параметрами, и возвращаемое действие сохраняется в переменной. Последний шаг - это утверждение. Мы исключаем возвращаемое действие toBe, toEqual что-то. Список всех этих функций можно найти в документации Jest. Выполнение команды yarn test запустит все эти тесты и будет либо пройден, либо не пройден.

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

Селекторы тестирования

Селектор можно рассматривать как «метод GET», который возвращает некоторые данные. Скажем, у нас есть фильтры, которые фильтруют дневник по тексту (заголовку), сортируют его по дате в порядке возрастания и убывания. У нас может быть селектор, который возвращает массив дневниковых записей в соответствии с этими фильтрами. Тестирование селекторов также осуществляется путем создания некоторых простых утверждений о том, что они должны возвращать.

Тестирование редукторов

Редукторы - это части приложения ReactJS, которые «слушают» действия. Они ожидают некоторых параметров и обычно возвращают объект или значение. Конечно, это можно изменить, если мы выполняем некоторые дополнительные операции, но в основном это чистые функции.

Тестирование редукторов не отличается от того, что мы делали до сих пор. Нам просто нужно импортировать рассматриваемый редуктор, вызвать его с некоторыми параметрами и сделать некоторые утверждения о том, что должно быть возвращено. Однако обычно проводится дополнительный тест, чтобы убедиться, что состояние приложения инициализировано правильно.

Компоненты тестирования

Тестирование компонентов немного отличается от того, что мы видели выше. Здесь мы хотим увидеть, правильно ли отображается компонент и как он обрабатывает взаимодействие с пользователем. Первое, как правило, требует от нас написания полного jsx, отрисовываемого компонентом, что непрактично. Вот тут-то и пригодится Enzyme.

Настройка фермента

Enzyme - это утилита для тестирования JavaScript для React, разработанная Airbnb. Документацию можно найти на сайте airbnb.io/enzyme. Enzyme позволяет нам визуализировать наши компоненты и использовать тестирование снимков. Установка зависит от используемой версии React. Для React v16 также необходимо установить модули фермент-адаптер-реакция и raf (функция браузера, называемая кадром анимации запроса). Также можно добавить фермент в модуль json, чтобы сделать снимки более понятными. Вы можете установить их все, как показано ниже, указав нужную версию.

yarn add [email protected] [email protected] [email protected] [email protected]

Затем нам нужно настроить адаптер фермента. Мы можем сделать это один раз, создав установочный файл в каталоге tests.

Следующее, что нужно сделать, - это добавить установочный файл Jest, чтобы автоматически установить Enzyme перед запуском наборов тестов. Мы делаем это, добавляя файл jest.config.json в корень приложения.

{
    "setupFiles" : [
        "raf/polyfill",
        "<rootDir>/src/tests/setupTests.js"
    ],
    "snapshotSerializers": [
        "enzyme-to-json/serializer"
    ]
}

Последнее, что нужно сделать, - это обновить сценарий test в файле package.json.

"scripts": {
    "test": "jest --config=jest.config.json"
}

Давайте проверим правильность установки, скажем, протестировав заголовок с помощью снимков.

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

Насмешливые библиотеки

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

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

Мокинг позволяет нам изменять поведение библиотеки в наших тестах. Наиболее часто используемая библиотека при взаимодействии с датой и временем - это Moment, и мы собираемся имитировать эту библиотеку. Моки должны находиться в каталоге tests с именем __mocks__.

В приведенном выше коде каждый раз, когда вызывается moment () для возврата текущего момента времени, он вместо этого возвращает полночь 1 января 1970 года. Благодаря этому моментальный снимок всегда будет соответствовать, пока в файле нет ошибки. составная часть.

Тестирование взаимодействия с пользователем

Компонент также включает обработчик событий щелчка, обработчик событий отправки и т. Д. Мы увидим, как имитировать эти события с помощью функций find и simulate.

Функция simulate принимает событие и необязательный объект события в качестве параметров.

Шпионские функции

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

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

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

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

Если вам понравилось, не забудьте указать 💛 через 👏 👏 👏 и подписаться на меня в Medium или LinkedIn. Будем очень признательны за ваши замечания и предложения.