Марсело Лотиф
После того, как укусил пару раз с плохим рефакторингом и сломанным приложением – даже со всеми моими тестами Green – я начал исследовать тесты интеграции в реакции. Возможно, также с Redux и React Router.
Для моего абсолютного шока я не мог найти ни одного хорошего материала там. Те, которые я нашел, либо выполнял неполные интеграционные тесты или просто делать это неправильно.
Таким образом, здесь мы собираемся создать тест интеграции, который инициализирует реактивный компонент, срабатывает имитируемое взаимодействие пользователей и утверждает, что наш компонент меняет способ изменения его изменения.
Что это такое не О: Установка тестирования. Я не собираюсь нырять в это прямо сейчас, но есть очень хорошая причина, по которой мы в Волна ( Мы нанимаем , кстати!) замедляются на наши модульные тесты и переход на тесты интеграции. Прокрутите до дна, если вы заинтересованы в этом.
Раскрытие информации: у меня не было бы этих тестов, работающих так же гладко, как и сейчас, если бы не было для великих передних людей на волне, особенно удивительно Томми Ли Кто разобрался, как подключить роутер, так что спасибо!
Настройка
Для этого проекта мы собираемся использовать Реагировать , Redux С Реагировать / Redux Router (необязательно) и Thunk (Необязательно) Для запуска приложения Jest и Фермент для тестирования.
Я пропущу настройку всех тех, поскольку там много великих учебных пособий по этому поводу.
Чтобы создать основы моего теста интеграции, я немного обманул и создаю функцию UTIL с некотором кода котел:
Тестирование
В вашем тестовом файле вам сначала необходимо импортировать некоторые зависимости, ваш редуктор и ваш компонент:
Тогда, на Rebedeach Функция, настроить вашу тестовые переменные интеграции, используя эту функцию UTIL:
(Если вы не используете React Router или Thunk, вы можете просто удалить их ссылки здесь и в функции UTIL, и она будет работать так же.)
Теперь вы все настроены, чтобы установить свой компонент и проверить его. Давайте представим этот компонент оказывает Div , который отображает текст, исходящий из редуктора. При нажатии на него текст должен изменить на другую строку, скажем «новый текст». Чтобы проверить это взаимодействие, вы можете просто сделать:
Вот это ☺ С этим очень простым кодом вы тестируете Div Вызов производителя действий на щелчок, который отправляет действие на редуктор, что изменяет данные, запускает перенастройку на компоненте, который, как ожидается, изменит способ изменения его изменения. Если какой-либо из этих шагов проходит неудачу, ваш тест идет красный, и вы знаете, что функциональность вашего приложения не работает.
Вы можете попытаться пойти глубже в этой цепочке и утверждать другие вещи:
Тестирование вызовов API
В реальном мире вам, вероятно, нужно позвонить в некоторые API для получения данных для вашего приложения, и именно эта часть вам нужна для того чтобы издеваться, чтобы эффективно тестировать вещи. Мы будем использовать шутки здесь, что не лучший способ изменить HTTP-запросы, но я сделаю это для удобства.
Предполагая, что вы используете гипотетический HTTP-клиент, чтобы вызвать конечную точку через его Получить Функция при нажатии на Div Затем установите возврат этого вызова в редуктор, который отображается обратно в Div :
В еще более реальном мире применение, что Получить Функция вернет вам объект обещания. Сюда становится немного сложным, потому что функция моделируемого клика не знает об этом обещании, и нет способа выполнить его тогда функция. Ссылка на объект была потеряна.
Нам нужно как-то ждать, пока это обещание разрешить перед выполнением утверждений. Мы работаем вокруг этого, делая немного взлома в функции UTIL:
И наш тест теперь будет выглядеть так:
С Async … a ждать Заявление, доступное с ES7, наш тест собирается подождать, пока все обещания не будут решены, поэтому он может сделать его утверждения. У jest в настоящее время нет никакого решения для этого, но этот взлом работает довольно хорошо в реальной жизни.
Если у вас есть более сложные производители действий с другими обещаниями, называемыми в решить или Отклонить Из этого первого обещания я предлагаю вам поставить подразделение тестирования этих звонков, а также проверить окончательные результаты всех случаев в тестах интеграции.
Больше тестирования
Если вам необходимо установить начальное состояние на ваш компонент, вы можете отправлять действия вручную, пока вы не достигнете желаемого состояния:
store.dispatch({ payload: 'data', type: 'SOME_ACTION' });Вы также можете сходить с ума от этих утверждений и тестировать каждую мелочь, или продолжать простым, зная, что тестовое покрытие будет таким же, как если бы вы добавили модульные тесты на каждом из слоев этого приложения, но с большим количеством кода Отказ Кроме того, вы также проверяете, как эти слои соединяются друг с другом и как ваше приложение отвечает на изменения ввода пользователей и хранилища данных.
Пожалуйста, оставьте свое мнение в разделе комментариев, здесь есть много улучшений здесь, и я счастлив изменить это в соответствии с вашими предложениями. Спасибо!
У тебя нет единицы теста?!?
Мы на Волна (Упомяли ли я Мы нанимаем ?) Проделали тонну переднего конечного модуля, и, если честно, большинство из них были несколько бесполезны. Конечно, они находятся в ядре TDD, но некоторые редукторы и продюсеры действий и продюсеры – это просто код Bovertlate и не добавляет большое значение для кода или процесса TDD.
Вы действительно можете сделать действительно хороший TDD только с тестами интеграции, и они будут полезны в будущем, чтобы обнаружить сломанные ссылки между своими слоями приложений и в конечном итоге, чтобы проверить, ведет ли ваше приложение, как ожидалось, для чего есть автоматические тесты.
Не поймите меня неправильно, мы все еще единилируем тестовые краевые чехлы, которые слишком сложны или раздражают для воспроизведения на тестах интеграции, но большинство наших модульных тестов стали бесполезными, как только мы добавили интеграционные тесты, такие как вышеупомянутые. В конце концов, это означает, что время, когда мы сейчас тратят думаем, разрабатывающие и крепежные тесты намного ниже, чем раньше, и они намного эффективнее в приложении. Итак, выиграть победу ☺
Одна проблема, которую вы можете найти, – это глубокий монтаж, а не мелкий рендеринг. Вы можете подумать, что некоторые компонентные деревья слишком сложны для монтирования, но я скажу, что еще одно преимущество монтажа корневого компонента – это тестировать, если дочерние компоненты создаются правильно. Если вы подключили дочерние компоненты, вы можете проверить их отдельно, если вы предпочитаете. Я не пробовал неглубокому рендерингу подключенного компонента, чтобы увидеть, работает ли эта настройка теста интеграции, но вы можете попробовать. Если вы не любите монтировать и не связаны с подключенными дочерними компонентами, другая возможность, которую я не изучил, неглубокий рендеринг, а затем вручную подключив их. Здесь важно чувствовать себя комфортно с суммой и качеством тестов, которые вы пишете, убедившись, что они на самом деле помогают автоматически выполнять некоторые регрессионные тестирования и обнаруживая скрытые проблемы для вас.
Оригинал: “https://www.freecodecamp.org/news/real-integration-tests-with-react-redux-and-react-router-417125212638/”