Если вам интересно, как проверить свой код 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;
  }
};

Я напишу тест, чтобы проверить, что мое состояние обновляется при отправке ошибки, то есть оно не совпадает с начальным состоянием.

Вот и все! Надеюсь, вы кое-что узнали.