Если вам интересно, как проверить свой код redux, читайте дальше!
Предпосылки для лучшего понимания сообщения
- Базовое понимание redux
- Базовое понимание разработки через тестирование
- Использование Jest для тестирования
Что вы узнаете
- Как протестировать создателя действий
- Как протестировать тестовый редуктор
- Полезные модули, которые можно использовать при тестировании
Разбираем redux и его жаргон
Redux - это инструмент управления состоянием (т.е. данными) для веб-приложений, который можно использовать со многими библиотеками и фреймворками.
Все состояния в redux хранятся и управляются через redux store и создаются с помощью метода createStore (). Метод создания хранилища принимает в качестве аргумента ** редуктор **.
Чтобы обновить свое состояние в redux, вы должны отправить (то есть отправить) действие с помощью создателя действия. Действие - это объект, содержащий тип и часто полезную нагрузку. Тип описывает действие, это строка, и вы можете называть ее как хотите. Полезная нагрузка - это данные, которые вы хотите добавить в свое хранилище redux. Данные могут относиться к любому типу данных, и вы можете называть их как-нибудь иначе, кроме полезной нагрузки, но полезная нагрузка обычно используется. Действия используются для передачи данных в ваш магазин.
Создатели действий - это функции, возвращающие объект действия.
Упомянутый ранее reducer - это функция, которая взаимодействует с магазином. Это чистая функция, то есть она принимает в качестве аргументов предыдущее состояние и действие и всегда возвращает новое состояние.
Настройка для тестирования
Я продемонстрирую это путем тестирования создателя действий, который выводит пользователя из вашего веб-приложения.
Для начала я создам тестовый файл поддержки. Обычно я называю свой файл test-support.js.
Создатель тестового действия
Теперь, когда настройка закончена, я могу перейти к тестированию нашего создателя действий.
Сначала я определю тип действия в переменной
const LOGOUT_USER = “LOGOUT_USER”;
Приведенный ниже код является создателем действия, который выполняет выход пользователя из веб-приложения. Создатель действия вызывает api-маршрут.
const logout = () => { return dispatch => { return axios.get("/api/logout").then(() => { dispatch({ type: LOGOUT_USER, payload: false }); }); }; };
В приведенном ниже коде я тестирую, что определенная выше функция выхода из системы возвращает правильное действие для выхода пользователя из системы. Я предполагаю, что вы знакомы с синтаксисом тестирования с использованием шутки, и не буду вдаваться в подробности об этом.
Редуктор тестирования
Как мы уже знаем, редуктор - это функция, которая возвращает действие и отвечает за обновление вашего состояния в магазине.
Ниже я объявляю редуктор предупреждений, который буду тестировать.
const alertReducer = (state = {}, action) => { switch (action.type) { case ADD_ERROR: return { state, ...action.payload }; default: return state; } };
Я напишу тест, чтобы проверить, что мое состояние обновляется при отправке ошибки, то есть оно не совпадает с начальным состоянием.
Вот и все! Надеюсь, вы кое-что узнали.