Есть несколько больших ведер функциональности мы не смотрели на тестирование еще. В частности, как изменяется внутреннее состояние компонентов состояния, события DOM и изолированное тестирование методов класса компонентов. Джест в одиночку не может этого сделать.
Использование фермента для тестирования DOM
Я надеюсь, что теперь ясно, как Jest, с дорастанием теста по умолчанию, может сделать много тестпокрытия быстро. Снимок охватывает один компонент, со всеми его реквизитом. Одним из ограничений, о котором я говорил, было то, что он не предоставляет компоненты любому типу DOM, поэтому нет никакого способа вызвать событие. К счастью, enzyme, который может управляться Jest позволяет нам делать именно это — имитировать события DOM. Он также имеет интересные функции для проверки реквизита и состояния компонента или методы вызова класса напрямую.
Enzyme не устанавливается в приложении для создания-react по умолчанию. Для установки фермента и адаптера React для фермента:
Теперь, чтобы настроить enzyme в тестовом файле, мы импортируем один или оба его рендеров — монтаж и мелкой — и адаптер React. Адаптер React должен быть добавлен в экземпляр фермента для этой области. Я не использую ни одного из его вариантов. Мои тестовые заголовки файлов для тестов Enzyme выглядят следующим образом:
Мелкие против глубокой рендеринга реагируют компоненты для тестирования ферментов
Фермент имеет два рендера — монтаж и мелкой. Shallow будет мелкой визуализации компонента, что означает, что он не будет оказывать любой из компонентов детей. Это делает его быстрее, чем горе, которое выполняет глубокий рендер и, следовательно, будет оказывать компонент и все его дети.
Если ограничение мелкой не является проблемой для теста, то использовать мелкие, это быстрее. Если вам нужно проверить детей компонента, используйте крепление, потому что таким образом он будет работать. На данный момент, мы будем использовать мелкие, как мы просто тестирования одного компонента. Я расскажу о нескольких случаях, когда горе является лучшим выбором позже.
Моделирование событий перемен с помощью фермента
Рендеринг компонента с мелкой фермента похож на то, что мы делали раньше с Jest в реагировать рендера. Но объект, который возвращается, намного полезнее. Мы можем использовать метод поиска фермента ()с селекторами j’ery, чтобы найти элементы в отрисованной составляющей. Мы можем утверждать значения, основанные на том, что он находит или имитирует события.
Для нашего редактора поста, давайте найдем вход, изменить его и посмотреть, если наши изменения обработчик функции вели себя должным образом. Вот тест, я буду ходить через него ниже:
В верхней части, я импортить мой компонент и инструменты тестирования. Я создал набор тестов для всех событий этого компонента и одного теста. Макет пост такой же, как я использовал для снимка тестов. Это на самом деле идет в том же файле. Я вырезаю эти тесты для ясности здесь.
Я ввел потребность в ферменте, отметив, что мои снимки использовали обработчик изменений, который ничего не сделал. Теперь, когда эти тесты доказывают, что этот компонент правильно настроен для этого реквизита функции обработчика изменений, давайте добавим тест, чтобы доказать, что он работает. Преимущество инъекции зависимости здесь — мы можем протестировать обновление в изоляции, в компоненте, когда его визуализировать внутри другого компонента. Каждый тест добавляет больше слоев покрытия, не создавая прочного соединения.
На этот раз давайте создадим обработчик изменений, который обновляет переменную в области теста. Тогда мы сможем обеспечить, чтобы он возродил правильное значение. Ранее я сказал, что я думаю, что компонент, как это должно пройти весь обновленный пост, а не только название, когда она меняется.
Так что это часть того, что мы будем тестировать. Я собираюсь проверить значение свойства обновленного объекта. Мой обработчик изменений фиксирует это.
Давайте увеличу событие изменения. React передает синтетическое событие DOM обработчику обратного вызова. Это отличный пример полиморфизма в объектно-ориентированном программировании. В React мы никогда не должны касаться DOM, мы касаемся виртуальной абстракции DOM. Поэтому мы должны взаимодействовать с абстракцией события JavaScript, которое работает так же, как и «реальное» событие JavaScript. Я использую «реальные» в кавычках, потому что это на самом деле абстракция JavaScript через веб-API, что React расширяется. Все это абстракция, ничто не реально, мы живем в симуляции. В результате мы позволяем React решать проблемы с кросс-браузером.
Это также упрощает моделирование событий:
Мы не должны издеваться над всем событием, просто event.target.value. Ручное издевательство, как это ограничено, и вы можете использовать Sinon, чтобы сделать насмешки более управляемым.
Тестирование петли с ферментом
Ранее в этой должности, я создал компонент для списка должностей. Они будут завернуты в определенный класс. Один из способов проверить это, чтобы найти все элементы с этим классом, и подсчитать длину результатов.
Обратите внимание, что я использую слово «класс», как в «CSS класса», а не как в «расширяет React.Component класса».
В этом тесте я использую метод поиска фермента для поиска элементов с классом. Опять же, синтаксис j’sry-как. Кроме того, обратите внимание, что я использовал горе вместо мелкой? Почему, shallow не будет оказывать компоненты ребенка, который является то, что я тестирую — как этот компонент оказывает своим детям.
Класс компоненты собственного государства
До сих пор мы рассматривали компоненты, которые не знают об их состоянии. Они принимают в реквизит и общаться изменения через функции, переданные в качестве реквизита. Но государство должно где-то жить. Для этого и существуют компоненты класса — они обрабатывают состояние и осведомлены о событиях жизненного цикла React.
Давайте поместим наш компонент Сообщений в компонент контейнера и используем этот компонент для управления состоянием. Имейте в виду, это то, что реагируют-redux делает. Давайте разберемся в концепции перед разгрузкой концерна Facebook, который в целом должен стать нашей стратегией управления тем, что работы предстоит сделать больше, чем рабочих часов в день. Он также чувствует, как хорошая окупаемое за все время, что Facebook украл у меня, прежде чем я uninstalled, что привыкание поведение с моего телефона.
То, что я бы на самом деле сделать, это оставить мой основной контейнер немой и обернуть его в компоненте более высокого порядка от Redux или WordPress, что вводит состояние, но это другой крутящий момент должность, а также видео с JavaScript для конференции WP вы можете посмотреть на YouTube.
Тем не менее, компоненты stateful полезны при использовании экономно. Давайте превратим компонент, который создает приложение-реакцию, как «App» в контейнер для списка сообщений. Потому что мы начали с самой маленькой части — пост — то работал оттуда — список сообщений, а теперь приложение список сообщений сидит в — это должно быть довольно просто. Все мелкие детали уже описаны. Мы не начинаем с большого массива сообщений и проектирование нескольких компонентов одновременно. Вместо этого, мы ждем, пока у нас есть все строительные блоки, построенные, прежде чем мы соберем их.
Начнем с добавления состояния к конструктору класса с сообщениями в виде пустого массива.
Компонент моих сообщений ожидает массив, который не пуст. Что делать, когда Есть нет должностей не является его озабоченность. Таким образом, в методе Render я хочу использовать условие JSX, чтобы показывать сообщения только тогда, когда этот массив не пуст:
Вот весь мой компонент:
Тестирование состояния компонентов реакции с ферментом
Прежде чем говорить о том, как получить данные в состояние, давайте убедимся, что как только мы это сделаем, это будет работать правильно. Одна вещь за один раз. Одна хорошая вещь о ферменте он может непосредственно мутировать состояние, а также читать состояние компонента.
Практически говоря, это означает, что мы можем проверить, если этот компонент будет работать, когда сообщения добавляются к состоянию, не беспокоясь о том, как добавить сообщения в состояние. Это отдельное осложнение, к которое мы сразу же доберемся.
То, что мы должны проверить в первую очередь две вещи: делает наш цикл, как сообщения, когда state.posts не пуст, и это не показывают ничего, а также не генерировать ошибки, когда state.posts пуст. Enzyme предоставляет метод setState, который позволяет нам вызывать метод setState класса в наших тестах. Этот класс является наивысшим уровнем государственного управления нашей программы, поэтому эта функциональность должна быть blackboxed здесь.
Рассмотрим тест, который добавляет сообщения в состояние и проверяет, правильно ли они отображаются:
Это очень похоже на тест я показал ранее для сообщений компонента. Мы просто убедившись, что он работает должным образом в этом контексте.
Вызов методы реагирования класса с ферментом
Допустим, мы хотели добавить возможность отсвазать один пост с помощью этого приложения. У нас уже есть компонент PostEdit. Но мы должны поставить его с правом пост. Давайте добавим свойство к отоположению для отслеживания идентификатора публикации, которая в настоящее время редактируется. Я не хочу, чтобы скопировать этот пост с state.posts, только его ID.
Поиск должности в состоянии является отдельной задачей, которая получает свой собственный метод. Давайте посмотрим на конструктор и новый метод:
Обратите внимание, как в конструкторе я использовал функцию связывания, чтобы явно связать конструктора это с этим методом. Если бы я этого не сделал, это. Это дополнительный шаг, который необходимо предпринять для каждого метода в классе, использующем реквизит или состояние.
Тогда я могу использовать этот и мой компонент PostEdit в визуализации:
Чтобы проверить эту функциональность — что правильный пост найден и редактор показывает, когда сообщение найдено, я добавлю тесты росы. Каждый из них строится на последнем. Наш предыдущий тест охватывает post.state, так что я могу безопасно сделать то же самое, а затем проверить следующий шаг:
Как только я верил, что работал — поверьте мне, тест не прошел с моей первой версии этого метода — я могу перейти к тестированию, что редактор показывает, когда государство диктует это должно.
Этот тест доказывает, что мы получаем редактора, когда должны. Это не доказывает, что редактор не показывает, когда он не должен. Так что этот тест сам по себе может быть ложным срабатыванием. Нам нужен тест на другую возможность доказать, что это не ложное срабатывание:
Тестирование React Изменение Влияние обработчика на состояние
В конце концов, если бы я был перетащить эту серию для другого 3-4 должностей. Я добавил бы компонент для того чтобы уточнить столб обновлен и провода оно в этот компонент App. Для этого потребуется обработчик изменений в состоянии компонентов приложения. Давайте добавим это и протестируем, чтобы мы могли увидеть пример того, как тестировать состояние, после вызова обработчика изменений компонента.
Тестирование обработчика изменений в изоляции, перед реализацией компонента для управления значением означает, что элемент управления разработан вокруг потребностей интерфейса, в котором он находится, а не наоборот. Кроме того, этот элемент управления подменен, если он работает с обработчиком изменений, нам все равно, что это такое или что он изменяет позже.
Вот простая функция обработчика изменений, мы можем передать вниз к управлению:
Вот тест, который вызывает этот метод непосредственно, а затем тесты состояния с помощью метода состояния фермента
Как насчет загрузки сообщений?
В какой-то момент, вам нужно на самом деле добавить сообщения. Опять же, я бы оставить это на государственное управление в чем-нибудь сложном. Но, если вы хотите инкапсулировать все в этом приложении, вот почему нам нужен класс — чтобы воспользоваться событиями жизненного цикла React.
Реагировать события жизненного цикла, как WordPress действия — способ возможность запуска кода в определенном месте в исполнении программы. Самый ранний или компонент может безопасно сделать AJAX-запрос для данных и состояния обновления является компонентомDidMount. Это событие, которое выполняется при установке компонента на DOM. До этого события мы не могли обновить состояние.
Опять же, я думаю, что запросы API должны обрабатываться Redux, или другой системой управления государством. Этот подход сильно соединяет взаимодействия API с компонентами uI, что делает их менее многоразовыми и означает, что клиент API не может быть повторно использован в тестах или без React.
Разработка реакции с тестом
Я надеюсь, что в этой серии вы забрали две вещи. Во-первых, используя тестовую разработку, мы можем сделать что-то простое, обеспечить его работу, а затем медленно добавить сложности. Для меня это означает разработку одной небольшой единицы функциональности за один раз. Это легче думать, и легче работать. Мне нравится.
Другой большой вынос здесь не чрезмерное использование React компонентов класса. Использование компонентов без состояния, насколько это возможно, уменьшает сложность и увеличивает возможность повторного использования и облегчает тестирование функциональных компонентов, чем компоненты класса.
Самое главное, я надеюсь, что вы видели значение разделения проблем и как React помогает следовать этой практике, что преимущество этого программного обеспечения идеально подходит и react являются более ясными. В следующем посте я расскажу о совместном использовании компонентов React между Гутенбергом и React.
Источник: torquemag.io
