Автоматизированное тестирование в React

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

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

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

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

Используемые библиотеки

шутка

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

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

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

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

фермент

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

Enzyme — это утилита для тестирования JavaScript для React, которая упрощает утверждение, манипулирование и просмотр выходных данных ваших компонентов React.

Создание примера проекта

Давайте приступим к созданию проекта с помощью create-react-app. Проект доступен на GitHub (https://github.com/thiagoferreiraw/react-testnig)

$ npm install -g create-react-app
$ create-react-app react-testing
$ cd react-testing
$ npm install -S prop-types

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

$ npm test

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

Установка зависимостей и настройка окружения

Команда ниже устанавливает зависимости фермента. Jest уже установлен по умолчанию в приложении create-react-app.

$ npm i --save-dev enzyme enzyme-adapter-react-16 enzyme-to-json

Чтобы настроить Enzyme, создайте файл с именем react-testing/src/setupTest.js со следующим содержимым:

// react-testing/src/setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

Создание компонента

Наша цель довольно проста: компонент, который получает реквизиты isLoggedIn и username, а затем отображает задачи для зарегистрированного пользователя ИЛИ страницу входа для пользователя, не прошедшего проверку подлинности.

Написание тестов

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

Отрисовка страницы входа;
Аутентифицированный пользовательский рендеринг с задачами.
Рендеринг аутентифицированного пользователя, без задач.

Вариант 1: ручные утверждения с Enzyme

В этом подходе мы будем монтировать компонент с помощью Enzyme и утверждать вывод вручную:

Если какой-либо тест не пройден, это будет наш вывод:

Вариант 2. Использование снимков

Ручные утверждения с Enzyme очень полезны, но у нас есть более простой способ сделать утверждения в результате без необходимости писать все ожидаемые условия, которые мы хотим проверить:

Мы заменили ручные утверждения и добавили только expect(toJson(app)).toMatchSnapshot(). Он автоматически создаст файл в разделе __snapshots__, и этот файл будет содержать всю структуру рендеринга для компонента. Если мы что-то изменим в компоненте и не обновим снапшот, то тест сломается следующим образом:

Довольно удобно, не так ли? Чтобы обновить снимок, просто введите «u», и Jest сохранит новый рендеринг и сочтет его правильным.

Отчеты о покрытии

Чтобы просмотреть наши отчеты о тестовом покрытии, выполните команду:

$ npm test -- --coverage

У нас есть возможность запустить отчет в браузере для более четкой визуализации, а также иметь возможность расширить компоненты для получения более подробной информации. Файл создается по адресу:

/projeto/coverage/lcov-report/index.html
# Can be opened on any browser.

Вывод

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

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

Любой вопрос? Мы всегда открыты для обсуждения! Не стесняйтесь ответить на эту историю ❤