Тестування Redux

Однією з головних переваг Redux є те, що його надзвичайно легко тестувати. Оскільки більшість логіки (редюсери, селектори) — це чисті функції, для їх тестування навіть не потрібно запускати React.

Інструменти

Ми будемо використовувати стандартний стек:

• Vitest (або Jest): Тест-раннер.
• React Testing Library: Для тестування компонентів.
• MSW (Mock Service Worker): Для моку мережевих запитів (API).

Налаштування (Vitest)

Якщо ви використовуєте Vite, налаштування дуже просте.

npm install -D vitest jsdom @testing-library/react @testing-library/user-event

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.js',
  },
});

Що ми будемо тестувати?

Ми дотримуємося піраміди тестування:

1. Unit Tests: Редюсери, Селектори, Thunks. (Багато, швидко пишуться).
2. Integration Tests: Компоненти + Redux Store. (Менше, перевіряють зв'язки).
3. E2E Tests: Весь додаток в браузері. (Мало, повільні).

У наступних розділах ми пройдемося по кожному рівню.

👉 Далі: Тестування Reducers