В чем разница между видами тестирования?

# Виды тестирования в Frontend разработке

В процессе разработки frontend приложения используются различные уровни и типы тестирования. Каждый из них решает свою задачу и имеет разные цели, временные затраты и покрытие функционала.

Основные виды тестирования

Unit тесты

Unit тесты проверяют отдельные функции, компоненты и модули в изоляции. Это самые быстрые и легкие в написании тесты. Они не требуют браузера и фокусируются на логике конкретной единицы кода.

Пример с Jest/Vitest:

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

describe('Button component', () => {
  it('should render button with correct text', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
  });

  it('should call onClick handler when clicked', () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick}>Click</Button>);
    screen.getByRole('button').click();
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

Integration тесты

Integration тесты проверяют взаимодействие нескольких компонентов и модулей вместе. Они проверяют, правильно ли компоненты работают вместе, как правильно передаются props, состояние и события.

Пример:

describe('User Form Integration', () => {
  it('should submit form with user data', () => {
    const handleSubmit = jest.fn();
    render(<UserForm onSubmit={handleSubmit} />);
    
    fireEvent.change(screen.getByLabelText(/name/i), { target: { value: 'John' } });
    fireEvent.change(screen.getByLabelText(/email/i), { target: { value: 'john@example.com' } });
    fireEvent.click(screen.getByRole('button', { name: /submit/i }));
    
    expect(handleSubmit).toHaveBeenCalledWith({
      name: 'John',
      email: 'john@example.com'
    });
  });
});

E2E (End-to-End) тесты

E2E тесты проверяют приложение с точки зрения пользователя. Они используют реальный браузер (Chromium, Firefox, WebKit) и проверяют полные пользовательские сценарии от начала до конца. Это самые медленные, но самые ценные тесты.

Пример с Playwright:

import { test, expect } from '@playwright/test';

test('user can login and view dashboard', async ({ page }) => {
  await page.goto('http://localhost:3000/login');
  await page.fill('input[name="email"]', 'user@example.com');
  await page.fill('input[name="password"]', 'password123');
  await page.click('button:has-text("Login")');
  
  await expect(page).toHaveURL('http://localhost:3000/dashboard');
  await expect(page.locator('h1')).toContainText('Welcome');
});

Snapshot тесты

Snapshot тесты сохраняют текущий вывод компонента и сравнивают его с будущими версиями. Полезны для отслеживания неожиданных изменений UI, но требуют внимания при обновлении снимков.

it('should match snapshot', () => {
  const { container } = render(<Header title="Test" />);
  expect(container).toMatchSnapshot();
});

Пирамида тестирования

Классическая пирамида тестирования рекомендует соотношение:

• 70% Unit тесты - быстрые, много штук, дешевые в поддержке
• 20% Integration тесты - проверяют взаимодействие модулей
• 10% E2E тесты - критические пути пользователя

Выбор правильного типа теста

Для каждого случая используй правильный тип:

• Утилиты, хуки, чистая логика → Unit
• Взаимодействие компонентов, формы → Integration
• Критические сценарии, авторизация, оплата → E2E
• Внешний вид компонентов → Snapshot или Visual regression

Инструменты

• Unit/Integration: Vitest, Jest с Testing Library
• E2E: Playwright, Cypress
• Мониторинг покрытия: nyc, c8
• Visual regression: Percy, Chromatic

Правильный выбор типов тестирования обеспечивает надежность приложения при минимизации времени на написание и выполнение тестов.