Какие виды тестирования используются во фронтенде?

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

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

Модульное тестирование (Unit)

Проверяет работу отдельных функций, методов или компонентов в изоляции. Например, тестируется, правильно ли компонент отображает переданные пропсы или корректно ли работает функция форматирования даты. Для этого используются библиотеки вроде Jest и Vitest.

// Пример модульного теста на Jest
import { formatDate } from './utils';

test('formatDate returns correct string', () => {
  expect(formatDate(new Date(2023, 0, 1))).toBe('01.01.2023');
});

Интеграционное тестирование

Проверяет взаимодействие нескольких модулей или компонентов. Например, как форма отправляет данные после нажатия кнопки, или как компонент списка обновляется после добавления элемента. Часто используется React Testing Library.

// Пример интеграционного теста с React Testing Library
import { render, screen, fireEvent } from '@testing-library/react';
import App from './App';

test('adds item to list', () => {
  render(<App />);
  fireEvent.click(screen.getByText('Add'));
  expect(screen.getByText('New item')).toBeInTheDocument();
});

Сквозное тестирование (E2E)

Имитирует действия реального пользователя в браузере: клики, ввод текста, навигацию. Проверяет, что все части приложения работают вместе. Инструменты: Cypress, Playwright.

// Пример e2e теста на Cypress
cy.visit('/login');
cy.get('input[name=email]').type('user@example.com');
cy.get('input[name=password]').type('password123');
cy.get('button[type=submit]').click();
cy.url().should('include', '/dashboard');

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