Какие знаешь фреймворки для тестов?

Фреймворки для тестирования фронтенда

Экосистема JavaScript тестирования очень разнообразна. Каждый фреймворк решает свои задачи и имеет уникальные преимущества. Рассмотрю основные инструменты, которые используются в продакшене.

Unit-тесты

Jest

Most popular тестовый фреймворк для JavaScript. Включает всё необходимое из коробки:

describe('User Service', () => {
  test('должен получить пользователя по ID', () => {
    const user = getUserById(1);
    expect(user).toBeDefined();
    expect(user.name).toBe('John');
  });

  test('должен выбросить ошибку если ID не существует', () => {
    expect(() => getUserById(999)).toThrow();
  });
});

Преимущества:

• Встроенные assert'ы (expect)
• Снимки (snapshots) для UI
• Хорошее покрытие (coverage)
• Быстро, с параллелизацией

Недостатки:

• Медленнее конкурентов в больших проектах
• Конфигурация может быть сложной

Vitest

Современная альтернатива Jest, написана для Vite. Намного быстрее:

import { describe, it, expect, vi } from 'vitest';

describe('Counter', () => {
  it('должен увеличить значение', () => {
    const counter = new Counter();
    counter.increment();
    expect(counter.value).toBe(1);
  });
});

Преимущества:

• Очень быстро (нативная ES modules поддержка)
• Watch mode работает отлично
• API похож на Jest (легко мигрировать)
• Встроенная поддержка TypeScript

Mocha

Гибкий и минималистичный фреймворк. Требует доп. библиотеки для assert'ов:

const { expect } = require('chai');
const mocha = require('mocha');

describe('Array', () => {
  it('должен содержать элемент', () => {
    const arr = [1, 2, 3];
    expect(arr).to.include(2);
  });
});

Преимущества:

• Гибкость и минимализм
• Встроенный reporter'ы
• Хорошо для сложных сценариев

Component-тесты (React)

React Testing Library

Рекомендованный подход от React команды. Тестирует компоненты как пользователь их использует:

import { render, screen, fireEvent } from '@testing-library/react';

describe('LoginForm', () => {
  test('должен отправить форму с данными', async () => {
    render(<LoginForm />);
    
    const input = screen.getByLabelText('Email');
    const button = screen.getByRole('button', { name: /sign in/i });
    
    fireEvent.change(input, { target: { value: 'test@test.com' } });
    fireEvent.click(button);
    
    expect(await screen.findByText('Success')).toBeInTheDocument();
  });
});

Преимущества:

• Тестирует UX, не реализацию
• Лучше всех работает с accessibility
• Очень близко к реальному использованию

Enzyme

Старый подход, тестирует реализацию компонента. Уходит на закат:

const wrapper = shallow(<Button />);
expect(wrapper.find('button')).toHaveLength(1);

Недостатки: деталь-ориентированный подход неудобен

E2E тесты

Playwright

Московский Playwright тестирует приложение в реальном браузере:

test('пользователь может войти', async ({ page }) => {
  await page.goto('http://localhost:3000/login');
  
  await page.fill('input[name="email"]', 'user@test.com');
  await page.fill('input[name="password"]', 'password123');
  await page.click('button[type="submit"]');
  
  await expect(page).toHaveURL('http://localhost:3000/dashboard');
});

Преимущества:

• Поддержка Chrome, Firefox, Safari одновременно
• Отлично работает с async операциями
• Видео и скриншоты при падении
• Быстро, параллельно

Cypress

Популярный E2E фреймворк с отличным API:

describe('Todo App', () => {
  it('должен добавить todo', () => {
    cy.visit('/');
    cy.get('input').type('Buy milk');
    cy.get('button').click();
    cy.get('li').should('have.length', 1);
  });
});

Преимущества:

• Интерактивный UI для отладки
• Хорошая документация
• TimeTravel отладка

Недостатки:

• Медленнее Playwright
• Только Chrome-like браузеры

Selenium

Старая парадигма, всё ещё используется в legacy проектах:

const driver = new webdriver.Builder()
  .forBrowser('chrome')
  .build();

await driver.get('http://localhost:3000');
await driver.findElement(By.id('submit')).click();

Недостатки: медленно, API устарел

Mocking и утилиты

Jest Mock

Встроенная система для mock'ов:

const mockApi = jest.fn();
mockApi.mockResolvedValue({ name: 'John' });

await mockApi();
expect(mockApi).toHaveBeenCalledWith();

MSW (Mock Service Worker)

Моки для HTTP запросов на уровне сети:

import { setupServer } from 'msw/node';
import { http, HttpResponse } from 'msw';

const server = setupServer(
  http.get('/api/user', () => {
    return HttpResponse.json({ id: 1, name: 'John' });
  })
);

Coverage инструменты

Istanbul (встроен в Jest)

npm test -- --coverage

Показывает какой процент кода протестирован.

Рекомендуемый стек для новых проектов

• Unit: Vitest (быстро)
• Components: React Testing Library (как пользователь)
• E2E: Playwright (надёжно и быстро)
• Mocking: MSW (реалистично)

История эволюции

1. Jasmine → основа для Jest
2. Jest → господствующий стандарт
3. Vitest → современный вызов Jest
4. Playwright → будущее E2E

Выбор фреймворка зависит от специфики проекта, но в 2025 году Vitest + React Testing Library + Playwright — лучший выбор.