В этой статье я хотел бы поделиться своими идеями о том, как автоматизировать написание модульных тестов в приложениях React/Redux. Эти идеи родились в одной из дискуссий с коллегами, в процессе написания тестов, и, мне кажется, предложенное решение имеет право на жизнь.
О проблеме
Я бы хотел не думать о необходимости модульных тестов и сразу перейти к делу.Как нам теперь тестировать селекторы? Селектор Redux — это функция, которая принимает состояние приложения (сохранение) и возвращает результат. Даже если селектор создается с помощью reselect createSelector() и объединяет несколько селекторов, он все равно принимает хранилище в качестве входных данных.
Соответственно, чтобы протестировать селектор, нужно передать в него полный магазин.
Конечно, создав макет хранилища, мы можем исключить ненужные области, но если мы тестируем сложный селектор, объединяющий другие селекторы из разных частей хранилища, нам придется воссоздавать полное или почти полное состояние.
И так по каждому случаю.
Сюда можно пойти несколькими способами:
- Воссоздать состояние приложения в тестовой среде и выгрузить состояние с помощью, например, расширения redux devtools;
- Просто создайте объект, что называется, вручную.
Если приложение большое и его состояние содержит множество ветвей, это может оказаться достаточно сложным и трудоемким процессом.
Идея автоматизации процессов
Представьте, что у вас есть промежуточное программное обеспечение, которое, помимо прочего, знает обо всех селекторах приложений.Такое промежуточное программное обеспечение может рассчитывать все селекторы после каждого действия и готовить тестовый пример, состоящий из:
- Произошедшее событие (действие);
- Состояние приложения (магазин);
- Результат выполнения всех селекторов с этим состоянием;
Те.
у нас есть наборы данных из реального приложения, подготовка которых занимает минимум времени.
Осталось только научиться сохранять эти данные и как-то автоматически выполнять селекторы и сравнивать результаты, но задача эта простая, техническая, и я ее за вас решил.
В этой главе я просто хотел передать идею.
Как это работает?
Если в целом идея понятна (и кажется вам адекватной :)), предлагаю приступить к реализации.Сначала нам нужно расширение для браузера Редукс CheckState .
Это расширение получает все действия вашего приложения, выполняет селекторы и сохраняет тестовые примеры.
В конечном итоге вы нажимаете на кнопку и загружаете файл с полученными тест-кейсами.
Это выглядит примерно так: 
Чтобы расширение могло получать данные о происходящих действиях и иметь возможность выполнять селекторы, нужно произвести небольшие манипуляции с проектом.
Шаг 1. Экспорт селекторов
В корне проекта вам нужно создать файл checkState.config.js и экспортировать из него все селекторы, которые вы хотите протестировать.В моем тестовом проекте это выглядит так:
Посмотреть пример на github .export { selectCategories, selectActiveCategory, selectIsCategoryActive, selectActiveCategoryId, } from "./state/category"; export { selectPopup, selectPopupType, selectIsPopupOpen, } from ".
/state/popup"; export { selectTasks, selectActiveTasks, selectActiveDoneTasks, selectActiveInProgressTasks, } from ".
/state/task";
Шаг 2. Реализация промежуточного программного обеспечения
Теперь нам нужно добавить промежуточное программное обеспечение, которое будет передавать все действия и другие данные в расширение.
Код предельно прост: import * as selectors from ".
/checkState.config";
const checkStateMiddleware = (options = {}) => {
return window && window["__checkStoreExtension__"] ? window["__checkStoreExtension__"](options) :
store => next => action => next(action);
};
В моем тестовое приложение вы также можете посмотреть вариант реализации в машинописном тексте.
Вот и все, кодирование завершено.
Теперь запускаем приложение, открываем расширение и начинаем использовать приложение от имени пользователя.
Вам необходимо совершить как можно больше действий.
Вы увидите каждое совершенное действие в расширении.
Вы также можете нажать на любое действие и просмотреть результаты работы селекторов.
Когда все действия будут выполнены идеально, просто скачайте файл и поместите его в проект. Теперь осталось только запустить тесты.
Здесь все еще проще.
Запуск тестов
Для запуска тестов я подготовил инструмент CLI. Давайте установим пакет:npm я проверяю состояние -gЗатем в папке проекта выполним команду:
начало проверки состоянияCLI проверки состояния найдет файл с тестовыми примерами, созданными расширением браузера, найдет и скомпилирует экспортированные селекторы (при условии, что поддерживаются JavaScript и Typescript).
После этого все тест-кейсы будут пройдены последовательно, каждый селектор будет выполнен с состоянием приложения из тест-кейса и вычисленное значение будет сравнено с ожидаемым (тоже из тест-кейса).
Если разницы нет, мы увидим зеленую линию, если есть красную, с информацией, которая поможет диагностировать проблему:
- Имя селектора, который вернул неверный результат;
- Ожидаемый результат;
- Текущий результат;
- Снимок состояния приложения из тестового примера.
Пример неудачного теста.
Для того, чтобы вы поэкспериментировали с инструментом, я подготовил тестовое приложение, имеющее несколько селекторов и уже реализовавшее состояние Check: пример приложения
Заключение
Надеюсь, вам понравилась идея автоматизации написания автотестов и, возможно, вы реализуете этот подход в своем проекте :) Если вас интересует техническая реализация инструментов:- Расширение для браузера Redux CheckState на github ;
- Инструмент командной строки Проверить состояние на github .
-
Вышел Spb Shell 3D
19 Oct, 24
