Тестирование приложений React в 2019 году

Тестирование приложений React в 2019 году

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

В этом посте мы подробнее рассмотрим некоторые из лучших способов тестирования приложений React. Понятия, которые мы объясним здесь, очевидно, будут применимы к другим средам JavaScript, таким как Vue, или даже к другим языкам, однако, для точности, мы используем для демонстрации React.

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

Предпосылки

В этой статье предполагается следующее:

На вашем компьютере установлен Node.js ≥v6

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

На вашем компьютере установлен npm

На вашем компьютере установлен React версии 16.8 или выше

На вашем компьютере установлен Create-react-app

У вас есть базовое понимание ReactJS

Общая концепция тестирования

Если вы абсолютный новичок в тестировании, представьте себе это так: тестирование — это способ автоматизировать действия приложения без необходимости вручную проверять, выполняет ли каждая функция компонента то, что она должна делать. Конечно, это не все, что нужно для тестирования, но это дает вам общее представление о том, с чего начать.

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

Фреймворки тестирования JavaScript

На сегодняшний день Jest остается, пожалуй, самой популярной платформой JavaScript с более чем 27 тысячами звезд на Github. Он был разработан Facebook и продолжает поддерживаться командой Jest на Facebook. Jest — это среда тестирования javascript с нулевой конфигурацией, рекомендованная React, она довольно проста в использовании. В 2019 году сообщество JavaScript показало очень впечатляющие показатели принятия — более чем 900 участников.

Другими популярными альтернативами являются Mocha и Jasmine. Mocha претендует на звание наиболее используемой среды тестирования JavaScript. Более 18 тысяч звезд на Github. Это также очень гибкий и открытый для расширений инструмент.

В то же время Jasmine оказался официально рекомендованной средой тестирования Angular.js. У него более 14 тысяч звезд на Github, и это также одна из старейших платформ тестирования с большим количеством ресурсов и поддержкой сообщества. Даже Jest был построен на Jasmine.

Рассмотрев эти фреймворки, стоит отметить, что явно «лучшего» не существует. В конечном итоге все сводится к тому, что лучше для вас. В этом посте мы будем использовать Jest.

Настройка Jest

По умолчанию create-react-app поставляется с заданными конфигурациями. Однако для гибкости и полноты мы продемонстрируем, как вручную настроить Jest с webpack для клиентской стороны.

Шаг 1: Запустите npm install —save-dev jest в каталог проекта. Шаг 2: Перейдите к файлу package.json в вашем приложении и добавьте скрипт теста:

Шаг 3: Далее нам нужно настроить файл babelrc.js, потому что у нас есть пресет в package.json с указанием на него. Jest автоматически подхватывает файл и применяет его ко всем тестам.

Таким образом, babel теперь может определить, что мы проходим тесты, а затем перенесет все модули ES в CommonJS.

Тестирование приложений React

Существует несколько способов тестирования приложений React. Мы рассмотрим некоторые из них.

Модульное тестирование компонентов React

Модульное тестирование включает в себя тестирование отдельных модулей / компонентов программного обеспечения для проверки его правильности. Теперь, как нам добиться этого в приложении React? Если у нас есть компонент авторизации в файле login.js, например, такой:

Приведенный выше код представляет собой простой компонент входа в систему, который мы будем выполнять тест в файле login.test.js.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Тест ищет div и передает его в переменную контейнера. Затем из этой переменной контейнера мы создаем форму, вызывая для нее querySelector(‘form’).

Далее мы используем деструктурирование объектов, чтобы получить поля из form.element. Поскольку dispatchEvent() вызывается для события submit, мы можем проверить, что мы делаем с частью формы или какое значение она должна иметь при запуске события submit. Это показывает, что событие должно быть запущено один раз и должно при запуске получать имя пользователя и пароль.

И, конечно же, мы можем запустить тест с помощью npm run test.

Тестирование снепшотов

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

Представьте, что у компонента был определенный формат, например, кнопка увеличения перед кнопкой уменьшения и тесты проходят, когда это так. Если дизайнер изменяет этот формат, он фактически изменяет формат рендеринга в DOM. Так как же избежать случайных изменений в функции рендеринга DOM?

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

Для выполнения этого теста мы будем использовать форму react-test-renderer, которая даст нам JSON представление теста в определенное время. Затем мы сохраним эти данные с помощью Jest:

Сначала мы получаем JSON-представление компонента counter, который будет храниться в Jest. Метод expect() принимает дерево в качестве аргумента, и это то, что вызывает сравнение со следующей повторной визуализацией.

Интеграционное тестирование

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

Затем в app.test.js мы делаем:

Рекомендуемый инструмент тестирования

React-testing-library

Лично я считаю, что это отличный инструмент для тестирования компонентов React. Это касается тестирования с точки зрения пользователей. Это также очень полезно, поскольку работает с определенными метками элементов, а не с составом пользовательского интерфейса. Чтобы продемонстрировать, как работает эта библиотека, давайте проведем рефакторинг с использованием этой библиотеки предыдущего модульного теста, который мы написали.

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

Заключение

В этом посте мы рассмотрели различные методы тестирования приложений React и важность тестирования. Я надеюсь, что этот пост помог вам понять важность тестирования в React и показал, как это сделать.

Автор: Peter Ekene Eze

Источник: https://blog.logrocket.com

Редакция: Команда webformyself.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий