Что такое Jest и для чего он используется?react-72

Jest — это мощный инструмент для тестирования JavaScript-кода, разработанный Facebook. Он особенно популярен в экосистеме React, но может использоваться и с другими библиотеками/фреймворками.

Основные возможности

  1. Тест-раннер (Test Runner)
    Запускает тесты и предоставляет отчет о результатах

  2. Моки (Mocks)
    Позволяет создавать mock-функции и модули для изолированного тестирования

  3. Снимки (Snapshots)
    Тестирование React-компонентов через сравнение с "слепками" (snapshots)

  4. Измерение покрытия (Code Coverage)
    Показывает процент кода, покрытого тестами

Основные сценарии использования

1. Юнит-тесты

Тестирование отдельных функций или модулей:

// sum.js
function sum(a, b) {
  return a + b;
}

// sum.test.js
test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

2. Тестирование React-компонентов

Пример с React Testing Library:

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

test('renders button with correct text', () => {
  render(<Button>Click me</Button>);
  const buttonElement = screen.getByText(/click me/i);
  expect(buttonElement).toBeInTheDocument();
});

3. Снапшот-тесты

import renderer from 'react-test-renderer';
import Link from '../Link';

test('Link renders correctly', () => {
  const tree = renderer
    .create(<Link page="http://example.com">Example</Link>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

Ключевые преимущества

  1. Нулевая конфигурация (Zero-configuration)
    Работает "из коробки" в create-react-app проектах

  2. Быстрая работа
    Использует умное кэширование и параллельный запуск тестов

  3. Интуитивный API
    Простые в использовании matchers (проверки):

    • toBe()
    • toEqual()
    • toMatchSnapshot()
    • и многие другие

  4. Интеграция с Babel/TypeScript
    Поддержка современных JavaScript-функций

Примеры проверок

// Проверка равенства
expect(2 + 2).toBe(4);

// Проверка объекта
expect({a: 1}).toEqual({a: 1});

// Проверка массива
expect(['a', 'b']).toContain('a');

// Проверка исключений
expect(() => { throw new Error() }).toThrow();

Настройка проекта

Для React-проектов, созданных через create-react-app, Jest уже настроен. Для ручной настройки:

  1. Установка:
npm install --save-dev jest
  1. Добавление в package.json:
{
  "scripts": {
    "test": "jest"
  }
}
  1. Запуск тестов:
npm test
# Или для наблюдения:
npm test -- --watch

Резюмируем

Jest — это полнофункциональный фреймворк для тестирования JavaScript-кода, который особенно удобен для React-приложений. Он предоставляет все необходимые инструменты для unit-тестов, интеграционных тестов и тестирования компонентов, помогая поддерживать качество кода на высоком уровне.

Вопросы

Собеседования