Просмотрите эти удобные для начинающих шаблоны модульного тестирования для React

1656666497 prosmotrite eti udobnye dlya nachinayushhih shablony modulnogo testirovaniya dlya react

Бенедека Гаги

1*JIQ0Vp6gRaNr40h4wDw7GA

Есть много фреймворков и еще больше способов проверить компонент React. Но по моему опыту, есть несколько шаблонов, которые особенно полезно знать, независимо от того, какую структуру тестирования вы предпочитаете (особенно, если вы только знакомитесь с React). Итак, вот 5 каркасно-агностический шаблоны модульного тестирования для React.

Несколько дней назад Алекс Молдован опубликовал прекрасную статью о текущих шаблонах в React. Больше всего мне понравилось, как он подошел к проблеме. Понимаете, поскольку React столь бездумный, универсальное руководство по стилю не подойдет сообществу (мы увидели прямо противоположное, когда Джон Папа опубликовал свое руководство по стилю для AngularJS).

Алекс решает это, предлагая шаблоны, полезные как для начинающих, так и для более опытных разработчиков, не указывая один «истинный» способ делать вещи.

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

Прежде всего: что мне проверить?

Каждый раз, когда я преподаю основы модульного тестирования, мне задают один и тот же вопрос: «Зачем мне писать тесты? Какие случаи должны проверять мои тесты? Ответить одним предложением, которое отвечает всем возможным ситуациям, довольно сложно, но в случае с React это немного проще.

Большинство компонентов, с которыми вы собираетесь работать, не имеют состояния, поэтому их можно рассматривать просто как чистые функции: они получают несколько аргументов в качестве атрибутов и возвращают отрендерированный компонент. Итак, в этом случае ответ на вопрос выше: «Проверьте, приводят ли различные комбинации входных данных к правильным выходам». Если вы спросите меня, это гораздо легче подумать и выполнить!

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

#1: PropTypes

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

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

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

Если вы используете типовые системы, такие как TypeScript или Flow, это может не касаться вас, поскольку в таком случае при компиляции возникнет ошибка. Это большое преимущество, и его следует учитывать, принимая решение об использовании таких инструментов. Спасибо Лиран Тал, которая указала на это!

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

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

#2: Многократный реквизит

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

Проблема с этим решением состоит в том, что редко бывают случаи, когда все предоставленные реквизиты соответствуют данному тесту. В большинстве случаев они существуют только для обеспечения правильного поведения компонента (и для выполнения PropTypes).

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

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

Эта модель имеет три основных преимущества:

  • копирование не нужно, код более сжат, и нет раздутости
  • PropTypes всегда выполняются правильно
  • Читаемость тестов увеличивается, поскольку реквизиты, используемые данным тестовым случаем, подсвечиваются. Достаточно просто взглянуть на определение реквизита, чтобы увидеть, какой кейс там проверяется. Вот почему я люблю переопределять свойство, если оно используется в этом тестовом случае, даже если оно имеет то же или подобное значение в глобальном объекте props.

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

#3: Неглубокая визуализация

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

Одна из этих библиотек использует простое, но элегантное решение, которое, по моему мнению, должно быть частью всех ваших модульных тестов React. Эта библиотека называется Enzyme. Его создали хорошие люди из AirbnbEng, а функция, о которой я говорю, — поверхностное воспроизведение.

Неглубокое воспроизведение – это, по сути, способ воспроизведения компонента React без воспроизведения его подкомпонентов, что делает тест независимым от этих подкомпонентов.

Позвольте привести вам пример. Скажем, у нас есть компонент под названием TextAndButton который имеет дочерний компонент под названием Кнопка:

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

Но когда вы делаете поверхностный рендеринг, подкомпоненты остаются такими, какими они были записаны:

Таким образом, если Кнопка имеет какие-либо зависимости, он не перетягивается для этого визуализации. Еще лучше: родительскому компоненту не нужно ничего знать о своих детях.

Кроме очевидных преимуществ в производительности мне нравится этот подход, потому что он упрощает умственную модель и дает понять, что и где нужно тестировать.

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

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

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

#4: Redux Redux и Action Creators

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

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

По моему опыту, модульного тестирования редукторов и создателей действий как функций вполне достаточно. Убедитесь, что они возвращают правильное значение для заданного ввода (например, редуктор должен возвращать правильный объект состояния для заданного состояния ввода и действия), и все. Делать нечто большее, например симулировать действия или фактически отправлять их в макет магазина, — это чрезмерно — таким образом вы закончите тестировать сам Redux (кроме своего устройства).

Не воспринимайте это от меня: официальная документация тестирования Redux использует тот же упрощенный подход, основанный на функциях.

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

№5: Не тестируйте DOM

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

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

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

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

Выберите целенаправленные запросы, подобные CSS, которые нацелены только на интересующий вас элемент. Опять же, такой запрос div span img это не хорошая идея. Используйте запросы на основе классов, которые не полагаются на структуру HTML.

Последние мнения

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

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

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

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