Что такое Integration тесты?

Что такое Integration тесты (Интеграционные тесты)?

Интеграционные тесты — это уровень тестирования ПО, который проверяет взаимодействие и совместную работу нескольких модулей, компонентов или систем после их объединения. В отличие от unit-тестов (которые изолированно проверяют отдельные функции или классы), интеграционные тесты фокусируются на корректности взаимодействия между частями приложения, включая работу с внешними зависимостями: базами данных, API, файловой системой, сторонними сервисами и т.д.

В контексте Frontend-разработки интеграционные тесты часто проверяют:

• Взаимодействие компонентов UI между собой.
• Корректность работы с глобальным состоянием (Redux, MobX, Context API).
• Интеграцию с бэкендом через HTTP-запросы (REST, GraphQL).
• Работу с браузерными API (localStorage, History API, геолокация).
• Поведение приложения в реалистичных сценариях (например, авторизация → загрузка данных → отображение контента).

Ключевые цели интеграционного тестирования:

• Обнаружение дефектов на стыках модулей (например, несоответствие формата данных между фронтендом и бэкендом).
• Проверка корректности интеграции с внешними сервисами (платежные системы, аналитика).
• Подтверждение, что отдельные протестированные модули работают вместе как задумано.
• Обеспечение надежности критических пользовательских сценариев (например, оформление заказа в интернет-магазине).

Пример интеграционного теста для Frontend (React + Jest)

Рассмотрим сценарий: компонент UserDashboard должен загружать данные пользователя через API и отображать их вместе со списком его заказов.

// UserDashboard.jsx
import React, { useEffect, useState } from 'react';
import { fetchUserData, fetchUserOrders } from './api';

const UserDashboard = ({ userId }) => {
  const [user, setUser] = useState(null);
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    const loadData = async () => {
      const userData = await fetchUserData(userId);
      setUser(userData);
      
      const ordersData = await fetchUserOrders(userId);
      setOrders(ordersData);
    };
    loadData();
  }, [userId]);

  if (!user) return <div>Loading...</div>;

  return (
    <div>
      <h1>Welcome, {user.name}!</h1>
      <ul>
        {orders.map(order => (
          <li key={order.id}>{order.product} - ${order.price}</li>
        ))}
      </ul>
    </div>
  );
};

export default UserDashboard;

// UserDashboard.integration.test.js
import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import UserDashboard from './UserDashboard';
import { fetchUserData, fetchUserOrders } from './api';

// Мокаем внешние зависимости (API-модули)
jest.mock('./api');

describe('UserDashboard Integration Test', () => {
  it('should load and display user data with orders', async () => {
    // Задаем мок-данные, которые вернут наши API-функции
    fetchUserData.mockResolvedValue({
      id: 1,
      name: 'Иван Иванов',
      email: 'ivan@example.com'
    });
    
    fetchUserOrders.mockResolvedValue([
      { id: 101, product: 'Ноутбук', price: 999 },
      { id: 102, product: 'Мышь', price: 25 }
    ]);

    // Рендерим компонент с реальными пропсами
    render(<UserDashboard userId={1} />);

    // Проверяем состояние загрузки
    expect(screen.getByText('Loading...')).toBeInTheDocument();

    // Ожидаем завершения асинхронных операций и проверяем результат
    await waitFor(() => {
      expect(screen.getByText('Welcome, Иван Иванов!')).toBeInTheDocument();
    });

    // Проверяем интеграцию с API: функции были вызваны с правильными аргументами
    expect(fetchUserData).toHaveBeenCalledWith(1);
    expect(fetchUserOrders).toHaveBeenCalledWith(1);

    // Проверяем отображение данных, полученных от API
    expect(screen.getByText('Ноутбук - $999')).toBeInTheDocument();
    expect(screen.getByText('Мышь - $25')).toBeInTheDocument();

    // Проверяем, что состояние загрузки скрыто
    expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
  });

  it('should handle API errors gracefully', async () => {
    fetchUserData.mockRejectedValue(new Error('Network error'));
    
    render(<UserDashboard userId={2} />);
    
    // Здесь может быть проверка отображения ошибки
    await waitFor(() => {
      expect(screen.getByText(/error loading data/i)).toBeInTheDocument();
    });
  });
});

Отличия от других типов тестов:

Практические рекомендации по интеграционным тестам во Frontend:

• Используйте специализированные инструменты:

  • Jest + React Testing Library для тестирования React-компонентов.
  • Cypress или Playwright для тестирования интеграции в реальном браузере.
  • MSW (Mock Service Worker) для реалистичного мокирования HTTP-запросов.

• Фокусируйтесь на пользовательских сценариях: Тестируйте не технические детали реализации, а то, что видит и делает пользователь (например, "форма отправляет данные и показывает уведомление об успехе").

• Балансируйте покрытие: Не нужно тестировать все возможные комбинации — сосредоточьтесь на критических путях (happy path) и основных крайних случаях (ошибки сети, пустые данные).

• Изолируйте нестабильные зависимости: Используйте моки для медленных или ненадежных сервисов (платежные шлюзы, геолокация), но старайтесь сохранять реальную интеграцию там, где это возможно.

• Интегрируйте в CI/CD: Запускайте интеграционные тесты на каждом PR, но выделяйте их в отдельную стадию пайплайна, так как они обычно медленнее unit-тестов.

Преимущества интеграционных тестов для Frontend Developer:

• Более высокая уверенность в работоспособности фичей.
• Раннее обнаружение проблем интеграции.
• Документирование ожидаемого поведения системы.
• Сокращение количества дефектов, найденных на продакшене.

Недостатки:

• Большая сложность написания и поддержки.
• Медленнее выполнения по сравнению с unit-тестами.
• Могут быть "хрупкими" (flaky) при зависимостях от внешних сервисов.

В современной Frontend-разработке интеграционные тесты являются критически важным звеном между быстрыми unit-тестами и дорогостоящими E2E-тестами, обеспечивая оптимальный баланс надежности и скорости разработки.