🚀 Тестирование API и эффектов в React: простые шаги для качественного кода Тестирование API-запросов и эффектов, таких как useEffect, — это важная часть разработки, особенно в компонентах, которые взаимодействуют с сервером. Давайте разберём основные подходы и инструменты, которые помогут вам писать надёжные тесты. 🔹 Почему это важно? Компоненты, работающие с API, часто становятся источником ошибок: проблемы с сетью, некорректные данные или неожиданные состояния. Тестирование помогает: - Убедиться, что компоненты правильно обрабатывают запросы. - Обнаруживать и предотвращать ошибки на ранних стадиях. - Сохранять функциональность при изменении кода. 🔹 Тестирование API-запросов 1. Мокирование запросов с MSW MSW позволяет имитировать серверные ответы без изменения кода компонента. Пример настройки MSW:

import { setupServer } from 'msw/node';
import { rest } from 'msw';

const server = setupServer(
  rest.get('/api/data', (req, res, ctx) => {
    return res(ctx.json({ message: 'Success' }));
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

Тестирование компонента:

import { render, screen, waitFor } from '@testing-library/react';
import App from './App';

test('показывает данные после успешного запроса', async () => {
  render(<App />);
  
  expect(screen.getByText(/загрузка/i)).toBeInTheDocument();
  
  await waitFor(() => {
    expect(screen.getByText(/success/i)).toBeInTheDocument();
  });
});

2. Использование jest.fn() для мокирования функций Если компонент вызывает функцию, переданную через пропсы, можно замокировать её с помощью jest.fn().

const mockFetchData = jest.fn(() => Promise.resolve({ message: 'Success' }));

test('вызывает fetchData при рендере', async () => {
  render(<App fetchData={mockFetchData} />);
  expect(mockFetchData).toHaveBeenCalledTimes(1);
});

🔹 Тестирование эффектов useEffect часто используется для выполнения API-запросов, и важно убедиться, что компонент правильно реагирует на изменения. 1. Проверка побочных эффектов

import { render, screen } from '@testing-library/react';
import App from './App';

test('выполняет побочный эффект при монтировании', () => {
  render(<App />);
  
  expect(screen.getByText(/загрузка/i)).toBeInTheDocument();
});

2. Тестирование отмены эффектов Если эффект включает очистку (например, отмену запросов), это тоже можно протестировать.

test('отменяет запрос при размонтировании', () => {
  const mockFetchData = jest.fn(() => Promise.resolve());
  const { unmount } = render(<App fetchData={mockFetchData} />);
  
  unmount();
  expect(mockFetchData).toHaveBeenCalledTimes(1);
});

🔹 Рекомендации 1. Мокируйте API-запросы вместо использования реального сервера. Это делает тесты быстрыми и надёжными. 2. Проверяйте поведение компонентов, а не их внутреннюю реализацию. 3. Тестируйте как успешные, так и ошибочные запросы. 4. Используйте cleanup для удаления ненужных эффектов. 🎯 Заключение Тестирование API и эффектов — это основа стабильного приложения. MSW, Jest и React Testing Library — ваши главные помощники для проверки всех сценариев, от загрузки данных до обработки ошибок. Пишите тесты, и ваш код скажет вам спасибо! 😊 ReactJs Daily | #testing