Генератор конфигурации Jest
Выберите свой стек, TypeScript, React, бэкенд на Node или Svelte, и генератор выдаст файл jest.config.js с нужными трансформерами, маппером модулей, тестовой средой и порогами покрытия. Он включает все опции, о которых часто забывают: moduleNameMapper для CSS и изображений, setupFilesAfterEach, а также testPathIgnorePatterns для node_modules и dist.
Как собрать конфигурацию Jest
-
1
Выберите свой стек
TypeScript, React, Vue, Svelte, чистый Node или их сочетание, каждый вариант заранее подставляет нужные трансформеры.
-
2
Выберите тестовую среду
jsdom для кода в браузере, node для бэкенда или пользовательская среда.
-
3
Переключайте возможности
Пороги покрытия, снапшот-тесты, пути к мокам, пользовательские setup-файлы, шаблоны исключения из преобразования.
-
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. Сравнивайте токены, синтаксис движков, якоря, группы, проверки и флаги.
Инструмент доступен на других языках
- Jest-konfigurationsgenerator [SV]
- مولّد إعداد Jest [AR]
- Générateur de configuration Jest [FR]
- Generator Konfigurasi Jest [ID]
- Jest Konfigurationsgenerator [DE]
- Jest 설정 생성기 [KO]
- Jest-configuratiegenerator [NL]
- Jest 設定ジェネレーター [JA]
- เครื่องมือสร้างไฟล์ตั้งค่า Jest [TH]
- Generator konfiguracji Jest [PL]
- Generador de Configuración de Jest [ES]
- Trình tạo cấu hình Jest [VI]
- Gerador de Configuração Jest [PT]
- Jest Config Generator [EN]
- Generatore di Configurazione Jest [IT]
- Jest Yapılandırma Üreticisi [TR]
- Jest 配置生成器 [ZH]