Jest: установка и настройка

Jest — JavaScript testing framework от Meta, устанавливается через npm/yarn и работает "из коробки" для CommonJS-проектов без дополнительной конфигурации.

Зачем нужно

Правильная начальная настройка Jest экономит часы отладки. Нужно понять: какое окружение (Node/jsdom), нужна ли трансформация (TypeScript/ESM/JSX), как подключить дополнительные матчеры. Один раз настроив, получаешь работающий runner для всего проекта.

Где используется

  • Любые Node.js и браузерные JavaScript/TypeScript проекты
  • React приложения (Create React App, Vite + React, Next.js)
  • Библиотеки и npm-пакеты

Основной контент

Установка

# Базовая установка
npm install --save-dev jest

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

# Для React + TypeScript
npm install --save-dev jest ts-jest @types/jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

Минимальный package.json

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

Инициализация конфига

npx jest --init
# Интерактивный мастер создаёт jest.config.js

Конфигурация для React + TypeScript

// jest.config.js
/** @type {import('jest').Config} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterFramework: ['<rootDir>/jest.setup.ts'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '\\.(css|scss)$': '<rootDir>/__mocks__/styleMock.js',
  },
};

// jest.setup.ts
import '@testing-library/jest-dom';

Конфигурация для ESM-проектов

// package.json
{
  "type": "module",
  "scripts": {
    "test": "node --experimental-vm-modules node_modules/.bin/jest"
  }
}

// jest.config.js
export default {
  extensionsToTreatAsEsm: ['.ts'],
  transform: {
    '^.+\\.tsx?$': ['ts-jest', { useESM: true }],
  },
};

Первый тест

// sum.js
export const sum = (a, b) => a + b;

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

npx jest  # запуск

Частые ошибки

  • SyntaxError: Cannot use import statement — Jest по умолчанию ожидает CommonJS; для ES-модулей нужен transform с Babel или ts-jest
  • Cannot find module '@testing-library/jest-dom' — нужно установить пакет и добавить его в setupFilesAfterFramework
  • testEnvironment не задан для браузерного кода — без jsdom не будет document, window, localStorage
  • Версионный конфликт jest и ts-jest — проверяй совместимость в peerDependencies ts-jest

Связанные темы

Ресурсы