Генератор конфигурации Jest

конфиг jest
Далее

Выберите свой стек, TypeScript, React, бэкенд на Node или Svelte, и генератор выдаст файл jest.config.js с нужными трансформерами, маппером модулей, тестовой средой и порогами покрытия. Он включает все опции, о которых часто забывают: moduleNameMapper для CSS и изображений, setupFilesAfterEach, а также testPathIgnorePatterns для node_modules и dist.

Как собрать конфигурацию Jest

  1. 1

    Выберите свой стек

    TypeScript, React, Vue, Svelte, чистый Node или их сочетание, каждый вариант заранее подставляет нужные трансформеры.

  2. 2

    Выберите тестовую среду

    jsdom для кода в браузере, node для бэкенда или пользовательская среда.

  3. 3

    Переключайте возможности

    Пороги покрытия, снапшот-тесты, пути к мокам, пользовательские setup-файлы, шаблоны исключения из преобразования.

  4. 4

    Скачайте конфигурацию

    На выходе, прокомментированный файл `jest.config.js` или `jest.config.ts`, а также npm-скрипты, которые стоит добавить в `package.json`.

Пример вывода: проект на React + TypeScript

module.exports = {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  setupFilesAfterEach: ["<rootDir>/jest.setup.ts"],
  moduleNameMapper: {
    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
    "\\.(jpg|jpeg|png|gif|svg)$": "<rootDir>/__mocks__/fileMock.js",
    "^@/(.*)$": "<rootDir>/src/$1"
  },
  testPathIgnorePatterns: ["/node_modules/", "/dist/", "/build/"],
  transform: {
    "^.+\\.tsx?$": ["ts-jest", { tsconfig: "tsconfig.test.json" }]
  },
  collectCoverageFrom: [
    "src/**/*.{ts,tsx}",
    "!src/**/*.d.ts",
    "!src/**/*.stories.*"
  ],
  coverageThreshold: {
    global: { branches: 80, functions: 80, lines: 85, statements: 85 }
  }
};

Руководство по выбору: какая среда?

Ваш код выполняется в… Используйте
Браузере (DOM, window) jsdom (или @happy-dom/jest-environment для скорости)
Сервере Node node
Service Worker Пользовательская среда на базе node
React Native Пресет react-native

Шпаргалка по трансформерам

Тип исходного кода Трансформер
TypeScript ts-jest или @swc/jest
JSX, скомпилированный Babel babel-jest (по умолчанию)
Vue SFC @vue/vue3-jest + babel-jest
Svelte svelte-jester
Статические изображения Ручной мок в moduleNameMapper

Пороги покрытия: какие цифры?

  • Критический путь / библиотеки: 90%+ строк, 85%+ ветвей.
  • Продуктовые команды: 80% строк, 70% ветвей.
  • Быстро меняющийся UI: 60–70% строк; для бизнес-логики цельтесь выше, для вёрстки, ниже.
  • Прототипы: полностью отключите пороги; отслеживайте покрытие как число, а не как барьер.

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

  • Использовать jsdom для чистого кода на Node. Тесты медленнее, а выгоды никакой, переключитесь на node.
  • Забыть transformIgnorePatterns для ESM-пакетов. Современные пакеты поставляются только в формате ESM; Jest нужно указать, что их следует преобразовывать.
  • Мокать изображения / CSS без маппера. Импортируйте .png в тесте, и без мок-модуля Jest упадёт.
  • Задать clearMocks в false. Моки протекают между тестами, а сбои становятся недетерминированными. Включайте по умолчанию.

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

SWC (@swc/jest) в 10–20 раз быстрее ts-jest, потому что пропускает полную проверку типов внутри Jest. Запускайте проверку типов отдельно как tsc --noEmit в CI. Используйте ts-jest, когда хотите, чтобы ошибки типов проваливали тесты; используйте SWC ради скорости.

happy-dom примерно в 2–3 раза быстрее jsdom и реализует значительную часть DOM API. Он не покрывает некоторые крайние случаи, поэтому при ошибке «not implemented» вернитесь к jsdom.

Да, если ваши компоненты напрямую импортируют файлы .css или .scss. Сопоставьте их с identity-obj-proxy (для CSS-модулей) или с крошечной пустой заглушкой. Без этого тесты будут падать с ошибкой на этапе импорта.

Да. Выберите вариант вывода в TypeScript, и генератор выдаст jest.config.ts. Jest 27 и новее автоматически загружает конфигурации .ts, если установлен ts-node.

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Шпаргалка по Markdown

Практический справочник Markdown с настоящим предпросмотром и готовыми для копирования примерами заголовков, списков, таблиц, кода, ссылок, изображений и синтаксиса GFM.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Шпаргалка по регулярным выражениям

Поисковый справочник регулярных выражений для JavaScript, PCRE2/PHP, Python re и .NET. Сравнивайте токены, синтаксис движков, якоря, группы, проверки и флаги.

Инструмент доступен на других языках