Типи фронтенд-тестування

Що таке Тестування?

Тестування — це процес перевірки коду та інтерфейсів на правильність, стабільність та відповідність вимогам. Це дозволяє виявляти помилки до того, як вони досягнуть користувача, і забезпечує якість продукту.

Тести на фронтенді допомагають:

Перевіряти логіку компонентів та функцій
Відстежувати регресії UI
Перевіряти взаємодію між компонентми
Забезпечувати, щоб додаток працював як очікується в різних сценаріях

Типи Тестування

Юніт Тестування (Unit Testing)

Юніт тести перевіряють окремі одиниці коду в ізоляції — функції, хуки або компоненти. Це найшвидші та найдешевші тести для виконання.

Використовуються для:

Перевірки чистих функцій
Тестування компонентів без складних залежностей
Перевірки стану та пропсів

🛠 Інструменти: Jest, Vitest, Testing Library

tsx

test("add() should return sum", () => {
  expect(add(2, 3)).toBe(5);
});

Снапшот Тестування (Snapshots)

Снапшоти — це снапшоти UI компонентів у серіалізованій формі. При першому запуску зберігається "референс", який потім порівнюється з результатом наступних рендерів.

Допомагають:

Відстежувати небажані зміни макету
Підтримувати візуальну стабільність рендеринг компонентів

⚠️ Не слід використовувати для всіх компонентів — снапшоти можуть легко "забруднитися".

tsx

import { render } from "@testing-library/react";
import Button from "./Button";

test("button matches snapshot", () => {
  const { asFragment } = render(<Button label="Click" />);
  expect(asFragment()).toMatchSnapshot();
});

Інтеграційне Тестування (Integration)

Інтеграційні тести перевіряють взаємодію кількох компонентів або шарів додатка (наприклад, UI + бізнес-логіка).

Перевіряють:

Роботу форми та API
Коректний обмін даними між компонентми
Роботу з контекстом та глобальним станом

🛠 Інструменти: React Testing Library, MSW (для моків)

tsx

// Приклад: введення тексту в поле та відправка форми
fireEvent.change(screen.getByLabelText("Name"), {
  target: { value: "Ivan" }
});
fireEvent.click(screen.getByText("Submit"));
expect(mockSubmit).toHaveBeenCalledWith("Ivan");

Тестування "Кінець до Кінця" (E2E)

E2E (end to end) імітує реальну поведінку користувача, проходячи через весь UI та бекенд. Це найвищий рівень тестування.

Перевіряє:

Як працює весь інтерфейс у браузері
Навігацію, кліки, переходи, редиректи
Реальну взаємодію з сервером або моками

Інструменти: 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("Welcome!");

Як Вибрати Тип Тесту?

Завдання	Рекомендований Тест
Перевірка логіки функції або хуку	Юніт
Перевірка взаємодії компонентів	Інтеграція
Перевірка зовнішнього вигляду	Снапшот (обережно)
Перевірка поведінки користувача	E2E

Зміст

Що таке Тестування?Типи ТестуванняЯк Вибрати Тип Тесту?

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань