Тестирование: Vitest и Playwright

Вручную перепроверять сайт после каждого изменения — медленно и скучно. Автотесты делают это за вас и за секунды. Сегодня — два уровня: юнит-тесты функций и e2e-тесты настоящего интерфейса.

Юнит-тесты на Vitest

Vitest — быстрый тест-раннер «в духе Vite». Тестируем чистые функции: вход — ожидаемый выход.

npm install -D vitest

// utils.js
export function discount(price, percent) {
  return Math.round(price * (1 - percent / 100));
}

// utils.test.js
import { describe, it, expect } from "vitest";
import { discount } from "./utils.js";

describe("discount", () => {
  it("считает скидку 10%", () => {
    expect(discount(1000, 10)).toBe(900);
  });
  it("не даёт отрицательную цену", () => {
    expect(discount(100, 200)).toBe(0);
  });
});

// package.json
"scripts": { "test": "vitest run" }
npm test

e2e-тесты на Playwright

Playwright запускает настоящий браузер и проходит сценарий сценария от лица пользователя: открыл страницу, кликнул, увидел результат.

npm install -D @playwright/test
npx playwright install chromium

// tests/cart.spec.js
import { test, expect } from "@playwright/test";

test("добавление товара в корзину", async ({ page }) => {
  await page.goto("http://localhost:5173");
  await page.click("text=В корзину");
  await expect(page.locator(".cart-count")).toHaveText("1");
});

Какой уровень выбрать

• Логика, скидки, фильтры — юнит (быстрые, сотни за секунды);
• Форма, корзина, вход — e2e (несколько важных сценариев);
• Правило пирамиды: много юнит, меньше e2e, интеграция — между ними.