Тестирование приложений React, использующих глобальное состояние Reactn
У нас, в Турбосис, мы давно использовали редукс. Мы никогда не чувствовали себя слишком комфортно с этим, я имею в виду, это довольно надежное решение, хорошо документированное и стабильное, но кривая обучения для менее опытных членов команды - плохая.
Кроме того, иногда кажется, что это может быть проще. Все его шаблоны утомительны: редактировать и тестировать компоненты, которые запускают создателя действий, которые должны быть протестированы, которые запускают действия для редуктора, которые должны быть протестированы ... Слишком много обезьяньего бизнеса :)
Так были выпущены перехватчики React и Charles Stover выпустил Reactn. По его словам: расширение React, которое включает глобальное управление состоянием.
Мы попробовали и получили удовольствие. Не буду вдаваться в подробности, полагаю, вы уже знаете, и он тоже понравился! Я выскажу некоторые мысли о том, как тестировать приложения, написанные с использованием глобального состояния Reactn.
Тестирование использования Reactn Global Hook
В документации Reactn представлен пример компонента Cards, и я тоже буду его использовать. С некоторыми незначительными изменениями это выглядит примерно так:
Мы берем наши карты из глобального состояния (через useGlobal) и отправляем их на отображение компонента Card.
При тестировании компонентов с использованием redux мы обычно создаем имитируемое хранилище с помощью rosie и передаем его нашему компоненту как props:
Используя reactn, мы делаем это немного иначе. Нам нужно смоделировать функцию useGlobal:
Мы высмеяли реакцию и установили для возвращаемого значения useGlobal известный сценарий, который будет передавать состояние в компоненте. В этом примере я решил сделать снимок своего компонента Cards:
Я вообще не буду беспокоиться о том, чтобы вызывалась useGlobal. Для уверенности достаточно самого вывода или любых ожиданий от содержания.
Тестирование функции установки
Таким же образом мы можем протестировать функцию установки. Предположим, у нас есть кнопка для запроса новой карты (я имею в виду игру в блэкджек). Для удобства я сохраню эту кнопку в уже знакомом нам компоненте:
В этом примере, помимо карточек, у нас также есть кнопка для получения случайной карточки. Я абстрагирую способ получения этой случайной карты, я мог бы сделать это в компоненте, если бы захотел, но я хочу, чтобы этот пример был более чистым.
Функция getRandomCard может получить список карточек и выбрать новые карточки, отличные от тех, что у меня в руке (но, возможно, вы захотите написать функцию-редуктор в этом случае).
Чтобы протестировать эту новую версию нашего образца, я сделал:
Этот подход можно использовать и с обещаниями. Все, что вам нужно сделать, это использовать методы mockResolvedValueOnce или mockRejectedValueOnce из функции jest mock.
Вы можете создать папку __mocks__ рядом с node_modules и внутри нее создать файл responsen.js следующим образом:
Таким образом, вы можете избежать имитации useGlobal в каждом тесте, jest может автоматически имитировать его для вас. Даже при этом моя питоническая сторона заставляет меня в любом случае предпочитать явно имитировать модуль в тестовом файле (явное лучше, чем неявное).
Такой же подход работает и с вариантами хуков:
Вот и все! Теперь мы можем легко проверить наше глобальное состояние!
Спасибо за прочтение. Любые комментарии приветствуются;)
