🚀 Веб-разработка с нуля: Урок 27 — Тестирование Redux с Jest

Привет, будущие эксперты качества кода! 👨💻👩💻
Сегодня научимся писать тесты для Redux-приложения, чтобы ловить баги до того, как их увидят пользователи!

### 🔥 Зачем тестировать Redux?
• Проверка корректности редьюсеров
• Контроль бизнес-логики
• Предотвращение регрессий

### 🛠 Настраиваем тестовое окружение

1️⃣ Устанавливаем зависимости:

npm install jest @types/jest @testing-library/react redux-mock-store --save-dev

2️⃣ Конфиг jest.config.js:

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect']
};

### 💡 Тестируем редьюсер (tasksSlice.test.ts)

import tasksReducer, { addTask, toggleTask } from './tasksSlice';

describe('tasks reducer', () => {
  it('should handle initial state', () => {
    expect(tasksReducer(undefined, { type: 'unknown' })).toEqual([]);
  });

  it('should handle addTask', () => {
    const actual = tasksReducer([], addTask('New task'));
    expect(actual[0].text).toEqual('New task');
    expect(actual[0].completed).toBe(false);
  });

  it('should handle toggleTask', () => {
    const initialState = [{ id: '1', text: 'Test', completed: false }];
    const actual = tasksReducer(initialState, toggleTask('1'));
    expect(actual[0].completed).toBe(true);
  });
});

### 🧪 Тестируем асинхронные thunks

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { loadTasks } from './tasksSlice';

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);

describe('async thunks', () => {
  it('dispatches fulfilled when loadTasks succeeds', async () => {
    const store = mockStore({});
    await store.dispatch(loadTasks() as any);
    const actions = store.getActions();
    
    expect(actions[0].type).toEqual('tasks/load/pending');
    expect(actions[1].type).toEqual('tasks/load/fulfilled');
  });
});

### 🚀 Тестируем компоненты (TaskList.test.tsx)

import { render, screen } from '@testing-library/react';
import { Provider } from 'react-redux';
import { store } from '../../app/store';
import TaskList from './TaskList';

test('renders empty task list', () => {
  render(
    <Provider store={store}>
      <TaskList />
    </Provider>
  );
  
  expect(screen.getByText(/нет задач/i)).toBeInTheDocument();
});

### 📌 Практическое задание
1. Напишите тест для неудачного сценария загрузки задач
2. Протестируйте компонент с заполненным списком
3. Добавьте snapshot-тест для редьюсера

👉 В следующем уроке:
CI/CD — Настраиваем автоматические тесты!

💬 Какие части вашего приложения нужно покрыть тестами в первую очередь?

Подписывайтесь: [t.me/rm_programmer](https://t.me/rm_programmer)
#Jest #Testing #Redux #React #QualityAssurance