4. Jest: введение

Что такое Jest?

Jest — самый популярный JavaScript тест-раннер от Meta. Работает из коробки для React, Node.js, TypeScript.

Установка

# Для Node.js / TypeScript
npm install --save-dev jest @types/jest ts-jest

# Для React (уже включён в Create React App)
npm install --save-dev jest babel-jest @babel/preset-env @babel/preset-react

# jest.config.js
module.exports = {
  testEnvironment: 'node',  // или 'jsdom' для браузерных тестов
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  collectCoverageFrom: ['src/**/*.{ts,tsx}'],
};

package.json

{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage"
  }
}

Структура теста

// Файлы тестов: *.test.js, *.spec.js, __tests__/*.js

// Группировка тестов
describe('Math utils', () => {
  // Выполняется перед каждым тестом в блоке
  beforeEach(() => {
    // setup
  });

  // Выполняется после каждого теста
  afterEach(() => {
    // teardown
  });

  // Один раз перед всеми тестами блока
  beforeAll(async () => {
    await db.connect();
  });

  // Один раз после всех тестов блока
  afterAll(async () => {
    await db.close();
  });

  // Тест
  test('adds numbers', () => {
    expect(1 + 2).toBe(3);
  });

  // Синоним test()
  it('multiplies numbers', () => {
    expect(2 * 3).toBe(6);
  });
});

Matchers (проверки)

// Равенство
expect(2 + 2).toBe(4);               // ===
expect({ a: 1 }).toEqual({ a: 1 }); // глубокое равенство
expect(null).toBeNull();
expect(undefined).toBeUndefined();
expect(true).toBeTruthy();
expect(0).toBeFalsy();

// Числа
expect(5).toBeGreaterThan(3);
expect(3).toBeLessThan(5);
expect(0.1 + 0.2).toBeCloseTo(0.3); // для float!

// Строки
expect('hello world').toContain('world');
expect('hello').toMatch(/hel/);
expect('hello').toMatch('ell');

// Массивы
expect([1, 2, 3]).toContain(2);
expect([1, 2, 3]).toHaveLength(3);
expect([1, 2, 3]).toEqual(expect.arrayContaining([1, 3]));

// Объекты
expect({ name: 'Alice', age: 28 }).toMatchObject({ name: 'Alice' });
expect({ id: 1, name: 'Alice' }).toHaveProperty('name', 'Alice');

// Ошибки
expect(() => { throw new Error('oops') }).toThrow('oops');
expect(() => { throw new Error('oops') }).toThrow(Error);

// Отрицание
expect(5).not.toBe(6);
expect(null).not.toBeUndefined();

Асинхронные тесты

async/await

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

// Promise
test('fetches user (promise)', () => {
  return fetchUser(1).then(user => {
    expect(user.name).toBe('Alice');
  });
});

// resolves / rejects
test('resolves with user', async () => {
  await expect(fetchUser(1)).resolves.toMatchObject({ name: 'Alice' });
});

test('rejects for missing user', async () => {
  await expect(fetchUser(999)).rejects.toThrow('User not found');
});

Организация тестов

// Пропустить тест
test.skip('will not run', () => { ... });
xtest('also skipped', () => { ... });

// Запустить только этот тест
test.only('runs alone', () => { ... });
fit('also runs alone', () => { ... });

// Параметрические тесты
test.each([
  [1, 2, 3],
  [10, 20, 30],
  [-1, -2, -3],
])('adds %i + %i = %i', (a, b, expected) => {
  expect(a + b).toBe(expected);
});

// Объекты
test.each([
  { input: 'hello', expected: 'HELLO' },
  { input: 'world', expected: 'WORLD' },
])('uppercase $input → $expected', ({ input, expected }) => {
  expect(input.toUpperCase()).toBe(expected);
});

Запуск и фильтрация

# Запустить все тесты
npx jest

# Только файл
npx jest utils.test.js

# По паттерну
npx jest --testNamePattern="adds"

# Watch mode
npx jest --watch

# Coverage
npx jest --coverage

# Verbose (детальный вывод)
npx jest --verbose

Практические задания

1. Установи Jest и напиши 5 тестов для разных Matchers
2. Протестируй async функцию, которая возвращает Promise
3. Используй test.each для таблицы входных данных

Итоги

• Jest — самый популярный тест-раннер
• describe/test/expect — основа структуры
• beforeEach/afterEach — setup и teardown
• async/await работает нативно