Jest Konfigurationsgenerator
Wähle deinen Stack, TypeScript, React, Node-Backend, Svelte, und der Generator gibt eine jest.config.js mit den richtigen Transformatoren, Modulzuordnungen, Testumgebungen und Abdeckungsgrenzen aus. Enthält jede Option, die die Leute vergessen: moduleNameMapper für CSS/Bilder, setupFilesAfterEach, testPathIgnorePatterns für node_modules und dist.
Wie man eine Jest-Konfiguration erstellt
-
1
Wähle deinen Stack
TypeScript, React, Vue, Svelte, reines Node oder eine Mischung. Jeder füllt die richtigen Transformatoren vor.
-
2
Wähle die Testumgebung
jsdom für Browser-Code, node für Backend oder benutzerdefinierte Umgebung.
-
3
Funktionen umschalten
Abdeckungsgrenzen, Snapshot-Tests, Mock-Pfade, benutzerdefinierte Setup-Dateien, Transformationsignoriermuster.
-
4
Lade die Konfiguration herunter
Die Ausgabe ist eine kommentierte `jest.config.js` oder `jest.config.ts`, plus die npm-Skripte, die du zu `package.json` hinzufügen solltest.
Beispielausgabe: React + TypeScript-Projekt
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 }
}
};
Entscheidungsleitfaden: welche Umgebung?
| Dein Code läuft in… | Verwende |
|---|---|
| Browser (DOM, Fenster) | jsdom (oder @happy-dom/jest-environment für Geschwindigkeit) |
| Node-Server | node |
| Service-Worker | Benutzerdefinierte Umgebung, node-Basis |
| React Native | react-native Voreinstellung |
Transformator-Spickzettel
| Quelltyp | Transformator |
|---|---|
| TypeScript | ts-jest oder @swc/jest |
| Babel-kompiliertes JSX | babel-jest (Standard) |
| Vue SFC | @vue/vue3-jest + babel-jest |
| Svelte | svelte-jester |
| Statische Bilder | Manueller Mock in moduleNameMapper |
Abdeckungsgrenzen: welche Zahlen?
- Kritischer Pfad / Bibliotheken: 90%+ Zeilen, 85%+ Zweige.
- Feature-Teams: 80% Zeilen, 70% Zweige.
- Schnell wechselnde UI: 60-70% Zeilen; strebe höher für Geschäftslogik, niedriger für Layout.
- Prototypen: Abdeckungsgrenzen ganz deaktivieren; Abdeckung als Zahl verfolgen, nicht als Schranke.
Häufige Fehler
jsdomfür reinen Node-Code verwenden. Langsame Tests und nichts gewonnen, wechsle zunode.- Fehlende
transformIgnorePatternsfür ESM-Pakete. Moderne Pakete werden nur als ESM ausgeliefert; Jest muss gesagt werden, dass sie transformiert werden sollen. - Bilder / CSS ohne Mapper mocken. Importiere eine
.pngin einem Test und Jest schlägt ohne ein Mock-Modul fehl. clearMocksauf false setzen. Mocks lecken über Tests hinweg und Fehler werden nicht deterministisch. Standardmäßig aktivieren.
Häufig gestellte Fragen
SWC (@swc/jest) ist 10-20x schneller als ts-jest, da es die vollständige Typprüfung innerhalb von Jest überspringt. Führe die Typprüfung separat als tsc --noEmit in CI aus. Verwende ts-jest, wenn du Typfehler als Testfehler haben möchtest; verwende SWC für Geschwindigkeit.
happy-dom ist ungefähr 2-3x schneller als jsdom und implementiert einen großen Teil der DOM-APIs. Es fehlen einige Randfälle, also wenn du auf einen “nicht implementiert”-Fehler stößt, wechsle zu jsdom.
Ja, wenn deine Komponenten .css oder .scss-Dateien direkt importieren. Ordne sie identity-obj-proxy (für CSS-Module) oder einem kleinen leeren Stub zu. Ohne dies werden deine Tests zur Importzeit fehlschlagen.
Ja. Wähle die TypeScript-Ausgabeoption und der Generator gibt jest.config.ts aus. Jest 27+ lädt .ts-Konfigurationen automatisch, wenn ts-node installiert ist.
Verwandte Tools
ASCII-Tabelle Referenz
Vollständige ASCII-Tabelle von 0 bis 127 mit Dezimal-, Hex-, Oktal-, Binär- und numerischer HTML-Zeichenreferenz für jedes Zeichen, einschließlich Steuerzeichen wie NUL, LF und DEL.
HTML-Zeichenreferenz
Durchsuchbare Liste von HTML-Entitäten, ihren benannten und numerischen Codes sowie eine Ein-Klick-Kopie für Sonderzeichen und Symbole.
Farbrad-Explorer
Erforschen Sie das Farbrad interaktiv. Rotieren Sie Harmonien, vergleichen Sie HSL mit RYB, erkennen Sie komplementäre und triadische Paare in Echtzeit.
Referenz für Tastenkombinationen
Durchsuchen Sie dokumentierte Standardkürzel für VS Code, Chrome und Bash mit GNU Readline unter macOS, Windows und Linux.
Zufallsbuchstaben-Generator
Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.
HTML-Formatter
Formatieren Sie HTML lokal im Browser mit zwei oder vier Leerzeichen Einrückung. HTML wird weder hochgeladen noch validiert.
Tool in anderen Sprachen verfügbar
- Generator Konfigurasi Jest [ID]
- Generator konfiguracji Jest [PL]
- เครื่องมือสร้างไฟล์ตั้งค่า Jest [TH]
- Trình tạo cấu hình Jest [VI]
- Gerador de Configuração Jest [PT]
- Generador de Configuración de Jest [ES]
- مولّد إعداد Jest [AR]
- Jest 設定ジェネレーター [JA]
- Générateur de configuration Jest [FR]
- Jest 설정 생성기 [KO]
- Jest-konfigurationsgenerator [SV]
- Jest-configuratiegenerator [NL]
- Jest Config Generator [EN]
- Generatore di Configurazione Jest [IT]
- Генератор конфигурации Jest [RU]
- Jest Yapılandırma Üreticisi [TR]
- Jest 配置生成器 [ZH]