Добавление тестов в форму входа с помощью yup и React Hook Form
Клиентское тестирование - обширная тема. Если вы прочитали Разработка стратегии тестирования на стороне клиента, вы познакомились с передовыми методами и проблемами, с которыми сталкиваются при выборе стратегии тестирования на стороне клиента.
Мы могли бы глубже изучить любое из следующего ниже:
- Тестирование устройств и различных браузеров, в которых пользователи просматривают ваш продукт.
- Статические типы и линтеры для проверки значений и синтаксиса во время разработки
- Тестирование CSS, сравнение окончательного дизайна и результатов разметки
- Тестирование нативного приложения и доступных наборов для тестирования
- Практика ручного тестирования
- Использование визуальных библиотек, например, Storybook
Но пока давайте будем простыми и проведем несколько модульных, интеграционных и сквозных тестов.
Низкий и вот, логин пользователя - он есть в каждом приложении.
Итак, что мы хотим здесь протестировать?
- Убедитесь, что форма входа отображается правильно.
- Убедитесь, что проверка ввода работает при отправке формы.
- Убедитесь, что форма отправляется правильно, если входные данные содержат контент.
- В случае успеха убедитесь, что запрос работает правильно.
- Убедитесь, что запрос работает правильно при ошибке.
- Убедитесь, что токен сохранен в локальном хранилище после успешного запроса.
Инструменты
Jest - Jest - это JS-фреймворк, созданный Facebook, который включен в React и действует как средство выполнения тестов, библиотека утверждений и библиотека имитации. Его также можно использовать для тестирования снимков.
Библиотека тестирования React - основывается на библиотеке тестирования DOM, добавляя API-интерфейсы для работы с компонентами React и утилит для запроса DOM.
Cypress - Cypress - фреймворк для сквозного тестирования на основе JavaScript. Он построен на основе Mocha, который позволяет нам запускать автоматические тесты в нашем браузере, нажимая все кнопки, чтобы гарантировать получение ожидаемых результатов.
Testing-library / cypress - Давайте использовать одни и те же служебные методы в наших модульных, интеграционных и сквозных тестах.
Jest-dom - Эта библиотека тестирования позволяет Jest писать тесты, которые подтверждают различные вещи о состоянии DOM, что делает написание тестов более быстрым и приятным.
Ага - это наша библиотека проверки схемы.
Начнем с создания компонента входа пользователя. Он обернет нашу форму и будет содержать наши запросы, заголовки, предупреждения и некоторые состояния пользовательского интерфейса.
Затем давайте создадим компонент формы, который будет импортирован нашим логином.
Мы импортируем useForm Hook and yup validation, а также Textfield для входных данных и Button из MaterialUI.
Библиотека тестирования React
Я предполагаю, что до этого момента мы все знакомы. Теперь давайте обернем наш Логин несколькими тестами.
Первое, что мы можем проверить, это то, что страница отображается правильно, или тест дымовой завесы, как я слышал, он называется. Так как же нам это сделать?
Что ж, сначала нам нужно немного разобраться в библиотеке тестирования React.
По сути, библиотека тестирования React отображает наши компоненты, реплицируя модель DOM, которую увидит конечный пользователь. Затем он предоставляет служебные методы для взаимодействия с этой DOM. Это отличается от другой популярной библиотеки тестирования Enzyme. Enzyme работает напрямую с компонентами React, предоставляя вам доступ к внутренней работе ваших компонентов, например к обновлению состояния.
Обе философии могут работать на нас. Однако я предпочитаю React Testing Library, поскольку она тестирует наше приложение и взаимодействует с ним так же, как и пользователь. Таким образом, вместо того, чтобы устанавливать состояние компонента, вы воспроизводите действия, которые пользователь будет выполнять для достижения этого состояния.
Я расскажу о важности этого далее в своей статье о разработке стратегии тестирования на стороне клиента, упомянутой выше.
Библиотека и Jest тестирования React - Модульные и интеграционные тесты
Для рендеринга компонента мы импортируем рендеринг из библиотеки тестирования React.
После рендеринга мы можем использовать служебные методы библиотеки тестирования React для поиска наличия ключевого слова в DOM.
‹Довольно прямолинейно, правда?! /›
Затем мы перейдем к форме. Мы хотим убедиться, что проверка работает с событием отправки формы и присутствуют ли ошибки проверки.
Хук useform, на который мы полагаемся, делает это немного сложнее, поскольку он запускает события в DOM асинхронно. Это не проблема для библиотеки тестирования React.
Мы снова используем служебные методы для проверки наличия ошибок проверки в визуализированной модели DOM и заполняем форму, чтобы убедиться, что она отправляется правильно.
Это хорошо, поскольку позволяет изолировать наш компонент формы, не выполняя имитацию запроса API, и может быть полезно, когда я решу повторно использовать форму в других областях приложения.
Затем я хочу проверить, могу ли я отправить свою форму, что запрос работает и что токен добавлен в мой localStorage.
Мы можем имитировать данные, которые возвращаются из запроса. В этом случае мы имитируем user_token.
Я хочу проверить, что логин ведет себя так, как я ожидал после успешного запроса. Я снова заполняю свою форму, отправляю ее и проверяю, соответствует ли мой ответ на предупреждение, а токен сохранен в моем localStorage.
Таким образом, мы видим, что можем достичь довольно приличного тестового покрытия с помощью библиотеки React Testing Library и Jest с комбинацией модульных тестов и интеграционных тестов. Но мы коснулись здесь только поверхности, протестировав элемент DOM, события, HTTP-запрос и асинхронные действия.
Библиотека тестирования React также позволит вам тестировать тесты React Router, Redux, Context и SnapShot.
Что такое кипарис?
Cypress действительно хорошо специализируется на одном деле. Это создает отличный опыт при написании сквозных тестов для своих веб-приложений.
Он делает это, позволяя писать на JS и поставляется в комплекте со всеми инструментами, которые вам понадобятся или с которыми вы уже знакомы.
Он имитирует поведение пользователя в браузере и имеет аналогичные методы, позволяющие выполнять поиск в DOM.
И его инструмент для тестирования браузера довольно хорош!
Тестирование библиотек Cypress package - отличное дополнение для рассмотрения импорта.
Это позволяет нам использовать одни и те же методы для запросов к DOM и библиотеке тестирования React. Я большой поклонник такой схемы, поскольку она обеспечивает ценную согласованность в нашей стратегии тестирования.
Сквозное тестирование Cypress
Cypress будет копировать поведение пользователя, обновляя вводимые данные, запуская события, переходя по ссылкам и делая запросы.
Мы можем пройти по DOM, проверяя наличие элементов. Мы можем проверить, что форма имеет допустимые значения и что она отправляет, а также запрос и ответ. Фактически, если бы мы захотели, мы могли бы заставить Cypress проверять localStorage на наличие токена и выполнять те же тесты, что и с библиотекой тестирования React.
Мысли и заключение
Название игры - получить ее, чтобы вы были уверены, что наполняемый вами код будет иметь достаточное качество для требований пользователей и бизнеса. Если вы укажете это в качестве вашей Полярной звезды, вы будете руководствоваться своим собственным уникальным сочетанием модульных, интеграционных и сквозных тестов.
То, что я сделал для своего Логина, во многих ситуациях является излишним. Между тестами много перекрестков, и я могу просто добавить к нему сквозное через Cypress и ничего больше.
Но давайте представим себе другие ситуации. Допустим, я хотел повторно использовать созданный мною компонент формы и расширить его, чтобы можно было использовать его в приложении, где бы он ни был. Что ж, тогда мне бы хотелось увидеть его изолированным, обернутым вокруг него некоторыми модульными и интеграционными тестами, работающими с фиктивными данными. Это вселило бы в меня уверенность, что такая ключевая часть приложения хорошо освещена.
То же самое можно сказать о запросах и пользовательских хуках. Наш логин использует только два служебных хука, которые мы импортируем, useState и useForm. Однако, если мы захотим создать и повторно использовать наши собственные хуки на всей платформе, что ж, обертывание вокруг них модульных тестов заставит меня почувствовать внутри себя трепет.
Название игры - уверенность.
Я надеюсь, что часть этой статьи поможет вам в следующий раз, когда у вас будут вспотевшие ладони, продвигающиеся к производству.
