0Pricing
Frontend Academy · Урок

Настройка Jest и базовые тесты

Установите Jest, пишите тесты describe/it/expect, используйте сопоставители вроде toBe и toEqual и запускайте тесты в режиме наблюдения во время разработки.

«Настройка Jest и базовые тесты» — бесплатный урок Frontend Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Зачем тестировать внешний интерфейс

Тесты обнаруживают регрессии при изменении кода. Они документируют ожидаемое поведение. Они дают уверенность при рефакторинге. Без тестов каждое изменение превращается в риск: что-то ещё могло сломаться.

Установка Jest

Для проекта Vite + React используйте Vitest — средство запуска тестов, совместимое с Jest и нативное для Vite. Для других конфигураций установите Jest с babel-jest или ts-jest для TypeScript.

# Vitest (preferred for Vite projects):
npm install -D vitest

# Or Jest with TypeScript:
npm install -D jest @types/jest ts-jest

Именование файлов тестов

Размещайте файлы тестов рядом с исходным кодом: Button.test.ts, utils.spec.ts. Другой вариант — папка __tests__/. Jest находит файлы, соответствующие шаблонам *.test.* или *.spec.*.

Группировка, отдельные тесты и проверки

Структурируйте тесты с помощью блоков describe (группы) и функций it/test (отдельные тесты). Проверяйте результаты с помощью expect.

import { add, formatCurrency } from './utils';

describe('Math utils', () => {
  it('adds two numbers', () => {
    expect(add(2, 3)).toBe(5);
  });

  it('handles negative numbers', () => {
    expect(add(-1, 1)).toBe(0);
  });
});

describe('Currency formatting', () => {
  it('formats USD', () => {
    expect(formatCurrency(1234.5, 'USD')).toBe('$1,234.50');
  });
});

Распространённые сопоставители

Jest предоставляет множество сопоставителей: toBe (строгое равенство), toEqual (глубокое равенство), toContain, toHaveLength, toBeNull, toBeTruthy, toBeFalsy, toThrow, toBeGreaterThan.

expect([1,2,3]).toHaveLength(3);
expect({ a: 1, b: 2 }).toEqual({ a: 1, b: 2 });
expect('hello world').toContain('world');
expect(() => { throw new Error('boom'); }).toThrow('boom');
expect(null).toBeNull();
expect(true).toBeTruthy();

Тестирование асинхронного кода

Возвращайте промис или используйте async/await в тестах. Jest дождётся разрешения промиса, прежде чем пометить тест как завершённый.

it('fetches user data', async () => {
  const user = await fetchUser(1);
  expect(user.name).toBe('Alice');
});

// Or with resolves/rejects matchers:
it('resolves with user', () => {
  return expect(fetchUser(1)).resolves.toMatchObject({ name: 'Alice' });
});

beforeEach и afterEach

Запускайте настройку и очистку перед каждым тестом и после него, чтобы тесты оставались изолированными.

describe('User service', () => {
  beforeEach(() => {
    db.seed();
  });
  afterEach(() => {
    db.clear();
  });
  it('creates a user', async () => {
    const user = await userService.create({ name: 'Alice' });
    expect(user.id).toBeDefined();
  });
});

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

npm test запускает все тесты. npm test -- --watch (Jest) или vitest в режиме наблюдения повторно запускает тесты при изменении файла. Графический интерфейс Vitest (vitest --ui) предоставляет средство запуска тестов в браузере.

Покрытие тестами

jest --coverage (или vitest run --coverage) создаёт отчёт о покрытии, показывающий, какие строки проверяются. Цель в 70% и более — распространённый командный ориентир. Покрытие 100% не означает отсутствие ошибок.

Написание кода, удобного для тестирования

Чистые функции (без побочных эффектов) легко тестировать. Делайте функции небольшими и сфокусированными. Передавайте зависимости извне, а не импортируйте их напрямую — так проще подставлять тестовые двойники.

Изоляция тестов

Каждый тест должен быть полностью независимым. Тесты, зависящие от побочных эффектов друг друга, ненадёжны. Избегайте общего изменяемого состояния между тестами. Сбрасывайте все имитации в afterEach.

Быстрая проверка

Какой сопоставитель Jest проверяет глубокое равенство двух объектов?

Итоги: основы Jest

describe объединяет тесты в группы. it/test определяет отдельные тесты. expect и сопоставители проверяют результаты. Используйте toBe для примитивов, а toEqual — для объектов и массивов. Асинхронные тесты пишите с async/await или возвращайте промис. beforeEach и afterEach обеспечивают изоляцию. Отчёты о покрытии показывают, какие строки проверяются. Чистые функции тестировать проще всего.

Часто задаваемые вопросы

Урок «Настройка Jest и базовые тесты» бесплатный?

Да — полный текст урока «Настройка Jest и базовые тесты» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Настройка Jest и базовые тесты»?

Установите Jest, пишите тесты describe/it/expect, используйте сопоставители вроде toBe и toEqual и запускайте тесты в режиме наблюдения во время разработки. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Настройка Jest и базовые тесты»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Настройка Jest и базовые тесты
  2. @testing-library/react: render и userEvent
  3. @testing-library/vue: монтирование компонентов
  4. Имитация модулей и API-вызовов
← Назад к Frontend Academy