⭐️ Как протестировать асинхронные экшены в 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 и тестировании без доступа к фронту.

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

#буст

🥹🥹

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

#развлекалово

🖥️ Как проверить адаптивность приложения для нестандартных разрешений экрана

При тестировании приложений часто забывают про экраны с необычными разрешениями, например, 800x600 или 5K. Эти размеры требуют отдельного подхода, чтобы убедиться, что интерфейс остаётся функциональным и красивым на всех типах устройств.

Промпт:

How can I check the responsiveness of my application for screen resolutions that are rarely used (e.g., 800x600 or 5K)? What testing tools and
methods should be applied for these screen sizes?

Чем полезен:

➡️ Проверяет, как приложение ведет себя на экранах с редкими разрешениями

➡️ Помогает выявить проблемы с отображением и интерфейсом на разных типах экранов

➡️ Рекомендует методы тестирования, включая эмуляцию и использование инструментов

Дополнительно можно запросить:

— Как настроить медиа-запросы для таких разрешений

— Использование инструментов, таких как Chrome DevTools, для проверки адаптивности

— Рекомендации по улучшению интерфейса для редких экранов

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

#буст