Виды тестирования фронтенда
Что такое тестирование?
Тестирование — это процесс проверки кода и интерфейсов на корректность, стабильность и соответствие требованиям. Оно позволяет выявить баги до того, как они попадут к пользователю, и обеспечить качество продукта.
Тесты в фронтенде помогают:
- Проверить логику компонентов и функций
- Отследить регрессии в UI
- Проверить взаимодействие между компонентами
- Убедиться, что приложение работает как ожидается в разных сценариях
Виды тестирования
Unit Testing (Юнит-тестирование)
Юнит-тесты проверяют отдельные единицы кода в изоляции — функции, хуки или компоненты. Это самые быстрые и дешёвые тесты по исполнению.
Используется для:
- Проверки чистых функций
- Тестирования компонентов без сложных зависимостей
- Проверки состояния и пропсов
🛠 Инструменты: Jest, Vitest, Testing Library
test("add() should return sum", () => {
expect(add(2, 3)).toBe(5);
});
Snapshot Testing (Снапшоты)
Снапшоты — это снимки UI-компонента в сериализованном виде. При первом запуске сохраняется "эталон", а затем сравнивается с результатом последующих рендеров.
Помогают:
- Отслеживать нежелательные изменения в верстке
- Поддерживать стабильность визуального отображения компонентов
⚠️ Не стоит использовать для всех компонентов — снапшоты могут легко "загрязниться".
import { render } from "@testing-library/react";
import Button from "./Button";
test("button matches snapshot", () => {
const { asFragment } = render(<Button label="Click" />);
expect(asFragment()).toMatchSnapshot();
});
Integration Testing (Интеграционные)
Интеграционные тесты проверяют взаимодействие нескольких компонентов или слоёв приложения (например, UI + бизнес-логика).
Проверяется:
- Работа формы и API
- Корректный обмен данными между компонентами
- Работа с контекстом и глобальным состоянием
🛠 Инструменты: React Testing Library, MSW (для моков)
// Пример: ввод текста в поле и отправка формы
fireEvent.change(screen.getByLabelText("Имя"), {
target: { value: "Иван" }
});
fireEvent.click(screen.getByText("Отправить"));
expect(mockSubmit).toHaveBeenCalledWith("Иван");
End-to-End Testing (E2E)
E2E (от начала до конца) имитирует настоящее поведение пользователя, проходя через весь UI и backend. Это наивысший уровень тестирования.
Проверяет:
- Как работает весь интерфейс в браузере
- Навигацию, клики, переходы, редиректы
- Реальное взаимодействие с сервером или моками
Инструменты: Cypress, Playwright
// Cypress
cy.visit("/login");
cy.get("input[name=email]").type("user@example.com");
cy.get("input[name=password]").type("123456");
cy.get("button[type=submit]").click();
cy.contains("Добро пожаловать!");
Как выбрать вид теста?
| Задача | Рекомендуемый тест |
|---|---|
| Проверка логики функции или хука | Unit |
| Проверка взаимодействия компонентов | Integration |
| Проверка внешнего вида | Snapshot (с умом) |
| Проверка поведения пользователя | E2E |