> Как проверять конкретный action в reducer в JavaScript/TypeScript? (JavaScript, TypeScript)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Инрэко

Стек: JavaScript, TypeScript

> Пример ответа

Для проверки конкретного action в reducer в JavaScript/TypeScript можно использовать unit-тестирование с помощью фреймворков Jest или Vitest. Основная идея - вызвать reducer с начальным состоянием и тестируемым action, затем проверить, что новое состояние соответствует ожидаемому.

Пример на TypeScript с Jest:

TYPESCRIPT
// reducer.ts
interface State {
  count: number;
}

type Action = { type: 'INCREMENT'; payload: number } | { type: 'DECREMENT'; payload: number };

const initialState: State = { count: 0 };

function counterReducer(state: State = initialState, action: Action): State {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + action.payload };
    case 'DECREMENT':
      return { ...state, count: state.count - action.payload };
    default:
      return state;
  }
}

// reducer.test.ts
import { counterReducer, initialState } from './reducer';

describe('counterReducer', () => {
  it('должен обрабатывать INCREMENT action', () => {
    const action = { type: 'INCREMENT', payload: 5 };
    const newState = counterReducer(initialState, action);
    expect(newState).toEqual({ count: 5 });
  });

  it('должен обрабатывать DECREMENT action', () => {
    const action = { type: 'DECREMENT', payload: 3 };
    const state = { count: 10 };
    const newState = counterReducer(state, action);
    expect(newState).toEqual({ count: 7 });
  });

  it('должен возвращать текущее состояние для неизвестного action', () => {
    const action = { type: 'UNKNOWN' } as any;
    const state = { count: 2 };
    const newState = counterReducer(state, action);
    expect(newState).toBe(state); // проверка, что ссылка не изменилась
  });
});

Ключевые моменты:

Тестируйте каждый action отдельно.
Проверяйте как изменение состояния, так и неизменность исходного объекта (иммутабельность).
Для TypeScript используйте строгую типизацию action и state.
Включайте тест на default case, чтобы убедиться, что reducer возвращает текущее состояние для неизвестных action.