Библиотека тестировщика | QA, тестирование, quality assurance, manual testing, autotesting, ручное тестирование, автотесты

⭐️ Как протестировать асинхронные экшены в Redux

Асинхронные экшены в Redux обрабатывают API-запросы и диспатчат действия по результату. Их можно проверить без UI — через мок-хранилище и анализ последовательности.

Почему важно:

📍 Проверка цепочки: запуск → результат → обработка

📍 Контроль над данными и ошибками

📍 Возможность изолировать бизнес-логику от UI

Как протестировать:

1. Установим зависимости:

npm install redux-mock-store redux-thunk --save-dev

2. Создадим мок-хранилища:

import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';

const store = configureStore([thunk])();

3. Пример экшена:

export const fetchData = () => async dispatch => {
  dispatch({ type: 'FETCH_START' });
  try {
    const res = await fetch('/api/data');
    const data = await res.json();
    dispatch({ type: 'FETCH_SUCCESS', payload: data });
  } catch (e) {
    dispatch({ type: 'FETCH_ERROR', error: true });
  }
};

4. Позитивный сценарий:

it('dispatches FETCH_START и FETCH_SUCCESS', async () => {
  global.fetch = jest.fn(() =>
    Promise.resolve({ json: () => Promise.resolve({ name: 'test' }) })
  );

  await store.dispatch(fetchData());

  const actions = store.getActions();
  expect(actions).toEqual([
    { type: 'FETCH_START' },
    { type: 'FETCH_SUCCESS', payload: { name: 'test' } }
  ]);
});

5. Негативный сценарий (сетевая ошибка):

it('dispatches FETCH_ERROR при сбое запроса', async () => {
  global.fetch = jest.fn(() => Promise.reject('Network error'));

  await store.dispatch(fetchData());

  const actions = store.getActions();
  expect(actions).toEqual([
    { type: 'FETCH_START' },
    { type: 'FETCH_ERROR', error: true }
  ]);
});

Что проверяет тестировщик:

— Последовательность действий

— Корректность переданных данных

— Обработку ошибок и fallback-поведение

— Отсутствие лишних или пропущенных экшенов

💡 Такие проверки позволяют выявлять ошибки бизнес-логики без зависимости от UI. Это удобно при регрессионном тестировании, CI и тестировании без доступа к фронту.

🐸 Библиотека тестировщика

#буст

Please open Telegram to view this post

VIEW IN TELEGRAM

🤩5👍3🥰2🔥1

www.tgoop.com/testerlib/3608

720 viewsJul 9 at 07:01

⭐️ Как протестировать асинхронные экшены в Redux

Асинхронные экшены в Redux обрабатывают API-запросы и диспатчат действия по результату. Их можно проверить без UI — через мок-хранилище и анализ последовательности.

Почему важно:

📍 Проверка цепочки: запуск → результат → обработка

📍 Контроль над данными и ошибками

📍 Возможность изолировать бизнес-логику от UI

Как протестировать:

1. Установим зависимости:

npm install redux-mock-store redux-thunk --save-dev

import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';

const store = configureStore([thunk])();

export const fetchData = () => async dispatch => {
  dispatch({ type: 'FETCH_START' });
  try {
    const res = await fetch('/api/data');
    const data = await res.json();
    dispatch({ type: 'FETCH_SUCCESS', payload: data });
  } catch (e) {
    dispatch({ type: 'FETCH_ERROR', error: true });
  }
};

it('dispatches FETCH_START и FETCH_SUCCESS', async () => {
  global.fetch = jest.fn(() =>
    Promise.resolve({ json: () => Promise.resolve({ name: 'test' }) })
  );

  await store.dispatch(fetchData());

  const actions = store.getActions();
  expect(actions).toEqual([
    { type: 'FETCH_START' },
    { type: 'FETCH_SUCCESS', payload: { name: 'test' } }
  ]);
});

it('dispatches FETCH_ERROR при сбое запроса', async () => {
  global.fetch = jest.fn(() => Promise.reject('Network error'));

  await store.dispatch(fetchData());

  const actions = store.getActions();
  expect(actions).toEqual([
    { type: 'FETCH_START' },
    { type: 'FETCH_ERROR', error: true }
  ]);
});