Как прогонялись тесты?

2.0 Middle🔥 125 комментариев

#Тестирование

Комментарии (5)

🐱

claude-haiku-4.5PrepBro AI3 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Запуск тестов на Frontend

Тестирование — критическая часть разработки. Существует несколько типов тестов и инструментов для их запуска.

1. Unit тесты с Jest

Jest — самый популярный тестовый фреймворк для JavaScript/React:

# Установка
npm install --save-dev jest @testing-library/react @testing-library/jest-dom

// Button.test.js
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import Button from "./Button";

describe("Button Component", () => {
  it("должна рендерить текст кнопки", () => {
    render(<Button>Click me</Button>);
    const button = screen.getByRole("button", { name: /click me/i });
    expect(button).toBeInTheDocument();
  });

  it("должна вызвать onClick при клике", async () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick}>Click</Button>);
    const button = screen.getByRole("button");
    await userEvent.click(button);
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

# Запуск тестов (один раз)
npm test

# Watch mode (при изменении файлов переапускается)
npm test -- --watch

# С coverage отчётом
npm test -- --coverage

2. Vitest — современная альтернатива

Vitest — быстрее, совместима с Vite, лучше для современных проектов:

npm install --save-dev vitest @testing-library/react @vitest/ui

# Запуск
npm run test

# Watch mode
npm run test -- --watch

# UI интерфейс (открывает браузер)
npm run test -- --ui

# Coverage
npm run test -- --coverage

3. E2E тесты с Playwright

Playwright — тестирует приложение как реальный пользователь:

npm install --save-dev @playwright/test

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

test.describe("Login Page", () => {
  test.beforeEach(async ({ page }) => {
    await page.goto("http://localhost:3000/login");
  });

  test("должна загружать страницу входа", async ({ page }) => {
    const title = page.locator("h1");
    await expect(title).toContainText("Sign In");
  });

  test("должна выполнить успешный вход", async ({ page }) => {
    await page.locator("input[type=email]").fill("test@example.com");
    await page.locator("input[type=password]").fill("password123");
    await page.locator("button:has-text('Sign In')").click();
    await expect(page).toHaveURL("http://localhost:3000/dashboard");
  });
});

# Запуск
npm run test:e2e

# Режим для написания тестов
px playwright test --debug

# UI mode (интерактивный)
px playwright test --ui

4. Integration тесты

Тестирование взаимодействия компонентов с API:

// UserProfile.test.js
import { render, screen, waitFor } from "@testing-library/react";
import { rest } from "msw";
import { setupServer } from "msw/node";
import UserProfile from "./UserProfile";

const server = setupServer(
  rest.get("/api/user/:id", (req, res, ctx) => {
    return res(
      ctx.json({
        id: "123",
        name: "John",
        email: "john@example.com"
      })
    );
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test("должна загружать и показывать профиль", async () => {
  render(<UserProfile userId="123" />);
  await waitFor(() => {
    expect(screen.getByText("John")).toBeInTheDocument();
  });
});

5. Coverage (покрытие кода)

# Jest coverage
npm test -- --coverage

# Vitest coverage
npm run test -- --coverage

# Результат показывает % покрытия:
# File       | % Stmts | % Branch| % Funcs
# Button.js  | 100     | 95      | 100
# Form.js    | 85      | 75      | 90

Целевое значение: >= 80%, лучше >= 90%

6. Mock функции

// Мокирование
const mockFetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve({ id: 1, name: "John" })
  })
);

global.fetch = mockFetch;

// Проверка вызовов
expect(mockFetch).toHaveBeenCalledWith("/api/users/1");
expect(mockFetch).toHaveBeenCalledTimes(1);

7. CI/CD Pipeline

# .github/workflows/test.yml
name: Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: "18"
      - run: npm install
      - run: npm run test:unit -- --coverage
      - run: npm run test:e2e
      - uses: codecov/codecov-action@v3

8. Best Practices

// Тестируй поведение, не реализацию
test("Good: проверяет видимый результат", () => {
  const { getByText } = render(<Component />);
  expect(getByText(/success/i)).toBeInTheDocument();
});

// Используй user events вместо fireEvent
await userEvent.click(button);

// Обрабатывай асинхронность правильно
await waitFor(() => {
  expect(element).toBeInTheDocument();
});

Полный цикл

# 1. Unit тесты
npm run test:unit

# 2. Coverage проверка
npm run test:coverage

# 3. E2E тесты
npm run test:e2e

# 4. Lintern и type checking
npm run lint
npm run type-check

# 5. Build
npm run build