Тестирование в React, часть 2: Библиотека тестирования React
Эта статья является частью серии о тестировании в React:
Тестирование в React, часть 2: Библиотека тестирования React
Тестирование в React, Часть 5: Сквозное тестирование с Cypress
Заголовок для библиотеки тестирования React: «Тестирование функциональности, не реализации». Идея, лежащая в основе этой концепции, заключается в том, что реализация постоянно совершенствуется и совершенствуется, и поэтому ненадежна как средство тестирования UX.
Например, предположим, что вы работаете над небольшим компонентом React, для которого на раннем этапе вы пишете тесты. Компонент обрабатывает определенную логику и отображает что-то в DOM. По мере роста вашего приложения растет и этот компонент, и в конечном итоге имеет смысл разбить его на несколько компонентов. Что касается пользователя, ничего не изменилось - то, что отображается в DOM, остается прежним. Другими словами, вы изменили только реализацию, но не функциональность.
Если бы ваши первоначальные тесты были написаны для тестирования реализации, они бы сломались. Но при тестировании функциональности - узлов DOM, а не визуализированных компонентов - ваши тесты продолжают проходить (если, конечно, вы не испортите рефакторинг).
Небольшое примечание перед тем, как мы начнем. без другого. Вы можете думать о Jest как о фактическом тестировании, в то время как React Testing Library воссоздает объект для тестирования (будь то событие, узел и т. Д.). Любые упомянутые здесь функции Jest будут подробно рассмотрены в моем следующем посте.
Функциональность тестирования
Утилиты, которые предоставляет эта библиотека, облегчают выполнение запросов к DOM так же, как это сделал бы пользователь. Поиск элементов формы по тексту их меток (как пользователь), поиск ссылок и кнопок по их тексту (как пользователь). Он также предоставляет рекомендуемый способ поиска элементов по
data-testidв качестве «escape-штриховки» для элементов, где текстовое содержимое и метка не имеют смысла или непрактичны.
Вышеупомянутое, взятое из официальной документации, резюмирует суть этой библиотеки. Говоря простым языком, библиотека тестирования React 1. отображает компонент React и 2. выполняет поиск (или «запросы») для узла DOM. После запроса тестирование возвращается к Jest (или Jest-Dom), который может фактически проверить свойство запрашиваемого узла (то есть то, что он существует в DOM или имеет указанную длину).
Рендеринг в тестовой среде
Синтаксически этот первый шаг прост. Тестируемый компонент импортируется в тестовый файл, а затем отображается с помощью функции render. Действительно так просто, как это возможно. Реализация в реальном мире завершит render тестом Jest, который мы рассмотрим, когда перейдем к Jest. А пока представьте себе это:
import App from './App'; render(<App />);
Запросы API
Шаг 2, поиск чего-либо в DOM, облегчается запросами API. Два самых популярных запроса - это getByText и getByRole, но их гораздо больше. Заявления состоят из вариантов (getBy) и запросов (Text).
Доступные варианты:
getBygetAllByqueryByqueryAllByfindByfindAllBy
Доступные запросы:
ByLabelTextByPlaceholderTextByTextByAltTextByTitleByDisplayValueByRoleByTestId
Они говорят сами за себя, поэтому я не буду здесь подробно останавливаться на каждом из них. Я быстро укажу, что, поскольку get, query и find - все, казалось бы, слова, которые означают одно и то же, что у них разные значения.
get будет вашим выбором, query обычно будет использоваться для подтверждения отсутствия элемента, а find может использоваться для элементов, которые появляются асинхронно.
Кроме того, те, кто принимает строку в качестве аргумента, могут также принимать выражение регулярного выражения, которое полезно при поиске частичных совпадений. Вы можете прочитать больше о каждом из вариантов и запросов в официальной документации.
Экран
Эти запросы вызываются для объекта screen, предоставленного библиотекой, который похож на document.body, но для вашей тестовой среды. Фактически, screen поставляется с каждым запросом, предварительно привязанным к document.body.
Кроме того, screen имеет функцию debug, которая будет печатать указанный HTML-код на вашем терминале, позволяя вам видеть, что на самом деле отображается для пользователя. Запросы API можно передать функции debug, например, как показано ниже:
screen.debug(screen.getByText('submit'))
События
Поскольку основа React реагирует на события, React Testing Library позволяет вам тестировать запуск событий. Вы можете сделать это, используя описанную выше функцию, чтобы выбрать узел, который запускает событие (например, кнопку), а затем использовать fireEvent для воссоздания тестируемого события. fireEvent предоставляет ряд удобных методов, благодаря которым вам не нужно создавать новые пользовательские события для чего-то простого, например для щелчка.
Удобные методы:
- "Полный список"
click,dblClick,drag,drop,mouseEnter,mouseLeavecopy,cut,pastefocus,blur,focusIn,focusOutchange,input,invalid,submit,resetkeyDown,keyPress,keyUpselectscroll
Маркер «полный список» под списком удобных методов предоставит как полный список вспомогательных событий, так и подробную информацию, включая eventProperties по умолчанию.
Функция fireEvent будет иметь такую структуру:
fireEvent[eventName](node: HTMLElement, eventProperties: Object)
Примером может служить приведенный ниже (предоставленный официальной документацией), который имитирует щелчок правой кнопкой мыши по кнопке отправки (button: 0 - щелчок левой кнопкой, button: 2 - щелчок правой кнопкой мыши)
const rightClick = { button: 2 }
fireEvent.click(getByText('Submit'), rightClick)
Доступные eventProperties для большинства удобных методов включают bubbling и cancelable, но некоторые из них будут иметь специфические для него свойства, например click со свойством button.
Асинхронный
Наконец, поскольку асинхронный код может сильно повлиять на то, что находится в DOM в любой момент времени, React Testing Library предоставляет функциональные возможности для проверки изменений в DOM, которые происходят асинхронно.
Асинхронные утилиты
waitForwaitForElementToBeRemoved
Другие устаревшие утилиты по-прежнему доступны, поэтому вы можете увидеть другие в существующем коде (например, просто wait), но именно эти две следует использовать в настоящее время.
Обычно эти функции используются для ожидания того, что что-то произойдет в ответ на событие, просто учитывая тот факт, что вещи в JavaScript не обязательно происходят мгновенно.
Как я уже говорил ранее, библиотека тестирования React используется вместе с Jest, о чем мы поговорим позже. Как только мы поймем, как они работают, мы сможем увидеть, как все это объединяется в эффективный набор для тестирования.
Предыдущий: Тестирование на реакцию, часть 1: Типы и инструменты
