Jest Konfigurationsgenerator

jest-Konfiguration
Weiter

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. 1

    Wähle deinen Stack

    TypeScript, React, Vue, Svelte, reines Node oder eine Mischung. Jeder füllt die richtigen Transformatoren vor.

  2. 2

    Wähle die Testumgebung

    jsdom für Browser-Code, node für Backend oder benutzerdefinierte Umgebung.

  3. 3

    Funktionen umschalten

    Abdeckungsgrenzen, Snapshot-Tests, Mock-Pfade, benutzerdefinierte Setup-Dateien, Transformationsignoriermuster.

  4. 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

  • jsdom für reinen Node-Code verwenden. Langsame Tests und nichts gewonnen, wechsle zu node.
  • Fehlende transformIgnorePatterns fü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 .png in einem Test und Jest schlägt ohne ein Mock-Modul fehl.
  • clearMocks auf 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

Tool in anderen Sprachen verfügbar