Краткое руководство по тестовой разработке в React

kratkoe rukovodstvo po testovoj razrabotke v react?v=1656642621

Михаила Барановского

ihN4xq2fK3yqF2qMFTVHgRs4DuWdGr4rpCSU
Случайное изображение Дианы Ричи на Unsplash

Следуя принципам Разработка на основе тестирования (TDD) при написании интерфейса Приложение React может показаться сложнее, чем делать то же самое на сервере.

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

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

Не тратьте свое время

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

Доступные решения

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

Давай возьмем фермент например — какая разница между Неглубокая, Смонтировать и Рендер методы? А какой использовать? По-моему, это не то, о чем вам следует волноваться, когда вы пишете свои тесты. Оно должно быть максимально прямым.

Наш проект

Для целей нашего краткого руководства мы создадим небольшую программу React. После нажатия кнопки будет получена и показана случайная шутка о Чаке Норрисе.

Никто никогда не программировал в паре с Чаком Норрисом и не жил, чтобы рассказать об этом.

Итак начнем.

Начало с создания проекта React в CodeSandbox, а затем установите следующие зависимости (Jоценка уже предварительно установлено, если вы начали со ссылки выше):

  • аксиос — используется для получения данных из внешнего API
  • axios-mock-adapter — используется для имитации ответов сервера
  • react-testing-library – легкая, простая в использовании библиотека тестирования для визуализации, имитации действий и обработки асинхронных методов – создана Кентом С. Доддсом
  • шутить — для выполнения тестов и создания утверждений

Структура папок/файлов

  • src/index.js — точка входа для нашего приложения React
  • src/jokeGenerator.js наш контейнерный компонент, получающий, контролирующий и предоставляющий данные
  • src/joke.js — простой компонент презентации
  • src/__tests__/jokeGenerator.test.js содержит наши тесты

Ваш первый тест

Каждый раз перед тем, как создать компонент мы сначала напишем неудачный тест, а затем попытаемся сделать его успешным. Давайте начнем с написания теста для нашего фиктивного компонента <шутка />, воспроизводящий текст из реквизитов.

Hex65Vqu6mUtqCS1F1-5mJDDes-ua5BSTSNK
jokeGenerator.test.js

Чтение сверху: мы используем метод визуализации из react-testing-library и передайте &lt;Джокe/> компонент (который на данный момент не существует) у него. Он возвращает объект, содержащий несколько очень полезных методов (полный список доступных методов можно найти здесь) — напримердостаточно getByTestId. Затем он возвращает элемент HTML basед.на данных-тestid как аргумент.

Далее мы пишем an ждать используя вышеуказанный метод и data-testid, и проверьте, содержит ли текст элемент из реквизитов. После выполнения тестов мы получаем:

Шутка не определена

Да, мы хотим, чтобы это не удалось! <шутка /> еще не существует, помните? Мы только создали пустой джоke.jс файл все еще. Мы написали тест, в котором мы можем ясно увидеть, что мы ожидаем от компонента. Теперь наша задача – сделать тест пройден без изменения тесt код. Давайте сделаем это тогда:

lCi4BrSPyRaCkptSkuZQO3d7UaBoJ7CZa9ue
joke.js

Теперь, если вы сделали все так же, как я, тест должен быть пройден 🙂

Второй компонент

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

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

wZoc7qf8aDj-omViRiELm9UNsZ89RgibccoP
jokeGenerator.test.js

Мы уже знакомы с рендериты метод, но на этот раз мы берем getByText от объекта возврата. Как вы уже догадались, метод возвращает HTML элемент, если он существует в DOM.

Проведите тесты и…

JokeGenerator не определен

Вы знаете, что с этим делать:

Q5hr0EZ7poKO-fuA2kfkuSAo-nBiWpLSZPx5
jokeGenerator.js

Тест все еще не удается, но на этот раз выводит другую ошибку:

Не удается найти элемент с текстом.

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

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

5RfACQ6NeneEtE4Fz9XHpysVjaBO4zO7a1A8
jokeGenerator.js

Сейчас проходят тесты, потому мы можем переходить к добавлению новых функций. Представьте, что когда мы нажимаем кнопку, стандартный текст в компоненте исчезает, освобождая место для «Загрузка…сообщение. Звучит довольно просто, не правда ли? Мы можем проверить этот сценарий только с помощью три строки кода!

Давайте импортируем Симулировать сначала метод, поскольку нам понадобится это:

import { render, Simulate } from “react-testing-library”

gGK6Sfw3gmdLpdjyQqgZFRWYJe5kYXU88HlD
Добавьте его в наш второй тест — jokeGenerator.test.js

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

Не удалось найти элемент с текстом: Загрузите случайную шутку

Нам нужно создать кнопку и установить onClick метод, который установит загрузка состояние до правда.

uoGJiY5bC4-yyK5HpLuREFgnlSdavInme7rV
jokeGenerator.js

Вот так тест снова проходит. Теперь пора получить нашу случайную шутку! Ну… это не будет случайно в наших тестах. Мы будем высмеивать это с помощью MockAxios.

импорт * как axios из «axios»
импортировать MockAxios из «axios-mock-adapter»

Над нашими тестами в jokeGenerator.test.js, вставьте эти две строки кода:

VA9ve3xfI5JUv-vznDWIHRIs7QEkl3ooEcJC
Вставьте выше всех тестов – jokeGenerator.test.js

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

В верхней части нашего второго теста, где мы проверяем <Генератор шуток /> компонент, добавьте:

nSEIFJmjCd5aaTwFb0mEK9SrNp6zRwXvuzXV
Верх второго теста – jokeGenerator.test.js

Это высмеивает ответ любого ПОЛУЧИТЬ звонок через аксиос. В конце того же теста:

Ssf6gSyjvVaJ4G1MtujRqjSq7whZIksqXnG3
jokeGenerator.test.js

Не забудьте импортировать жди:

import { render, Simulate, wait } from “react-testing-library”

The жди метод ожидает (4500 мс по умолчанию), пока функция обратного вызова не прекратит выдавать ошибку. Проверяется с интервалом 50 мс. В основном мы просто ждем, пока сообщение о загрузке исчезнет из DOM.

жди также доступен как отдельный пакет npm (react-testing-library использует его как зависимость). Его создал Łukasz Gozda Gandecki.

После внесения всех изменений в код и запуска тестов мы должны получить следующее сообщение об ошибке:

Ожидаемая стихия нет присутствовать
Получено:

Загрузка…

Как вы думаете, это может быть? Согласно нашему тесту, мы ожидаем, что сообщение о загрузке исчезнет. Кроме того, мы хотим получить нашу шутку с API и сохранить его в состояние так что дальше ждать проходит.

RiBFROcMESY6up039OAXvaOtUb3vsReZWCM8
jokeGenerator.js
ZEaKt3f6itVBQb5lzlg2Vq0G2nMZd-48mLGv
Вставьте в метод render() — jokeGenerator.js

Теперь тесты должны сдать снова. Мы уверены, что все работает, как ожидалось… не правда ли? Обратите внимание, что мы имеем никогда не открывал наш браузер и не проверял вручную, работает ли наше приложение…Однако благодаря тому, как мы писали наши тесты (чтобы наши тесты походили на то, как пользователь будет использовать программу), мы можем быть почти на 100% уверены, что наша маленькая программа просто работает.

Как последнюю часть кода, давайте добавим это в index.js и откроем браузер 🙂

PzjDJRbEJAjgV6qTqIzxIC8FRfXptZI2HnWO
index.js

Бонус

Благодаря тому, как мы написали наши тесты, мы можем использовать их как e2e тесты без добавления ни одной строки кода! Все, что нам нужно сделать, это удалить все строки, связанные с MockAxios и снова запустите тесты! Теперь они будут использовать настоящий внешний API. Круто, не правда ли? 🙂

Резюме

Весь код доступен на сайте проекта CodeSandbox. Я действительно призываю вас ознакомиться с полным react-testing-library документация. Вы найдете там множество других примеров и случаев использования.

Надеюсь, вам понравился мой Краткое руководство по TDD в React, и что вы сегодня узнали что-нибудь новое.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *