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

Прежде чем мы перейдем к созданию теста, давайте вместе разработаем новый адаптивный компонент. Предположим, у нас есть бизнес-клиент, который хотел бы быстро ознакомиться с текущими ключевыми показателями эффективности своего бизнеса. Чтобы помочь ему увидеть свои четыре KPI, давайте создадим компонент под названием <KPICard />, который может представлять с помощью переданных свойств каждый из различных KPI. Дизайн этого компонента предназначен для удовлетворения требований мобильного и веб-решения.

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

Поскольку мы создали красивый и отзывчивый компонент, мы наконец можем погрузиться в его тестирование.

Чтобы смоделировать компонент карты KPI, как он проходит жизненный цикл размонтирования / монтирования, нам поможет метод mount() от Enzyme. Поскольку метод mount() полностью отображает компонент в DOM, нам нужно указать вариант использования, веб-сайт или мобильный телефон, который мы хотим протестировать. Пожалуйста, имейте в виду, когда мы хотим использовать полную визуализацию DOM, нам необходимо иметь полный DOM API, среду, которая «похожа» на среду браузера, доступную в глобальном масштабе. Давайте подробнее рассмотрим метод mount(), он определяется следующим образом.

mount(node[, options]) => ReactWrapper

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

  1. options.context (объект): контекст, передаваемый в компонент
  2. options.attachTo (элемент DOM): элемент DOM для прикрепления компонента к
  3. options.childContextTypes (объект): объединенные contextTypes для всех дочерних элементов оболочки
  4. options.wrappingComponent (тип компонента): компонент, который будет отображаться как родительский узел. Среди прочего, его можно использовать для предоставления контекста узлу.
  5. options.wrappingComponentProps (объект): начальные свойства для передачи компоненту упаковки, если он указан

В нашем случае параметры wrapping component и wrapping component props являются необходимыми параметрами, которые необходимо указать в нашем тесте, поскольку мы хотим заключить содержимое карты KPI с медиа-запрос, а также передать в медиа-запросе свойство ширины экрана.

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

‹Значение ResponsiveContext.Provider = {{width: 1000}}›

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

Объединив эти две части информации, мы можем создать наш тестовый файл. Нам нужно создать параметры, которые будут передаваться в качестве второго аргумента в метод mount() для мобильных устройств и Интернета. Компонент упаковки - это медиа-запрос, поэтому мы используем ResponsiveContext.Provider, как описано выше. Стойки компонентов упаковки будут в каждом случае разной ширины.

После настройки мы можем написать наши тестовые примеры, используя совпадения Jest.

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

Удачного обучения и программирования!