Softonic

Jest-configuratiegenerator

Stap 1 / 2 jest-config
Volgende

Kies je stack, TypeScript, React, Node-backend of Svelte, en de generator produceert een jest.config.js met de juiste transformers, module-mapper, testomgeving en dekkingsdrempels. Bevat elke optie die mensen vergeten: moduleNameMapper voor CSS/afbeeldingen, setupFilesAfterEach, en testPathIgnorePatterns voor node_modules en dist.

Hoe je een Jest-configuratie opbouwt

  1. 1

    Kies je stack

    TypeScript, React, Vue, Svelte, puur Node of een combinatie. Elk vult de juiste transformers alvast in.

  2. 2

    Kies de testomgeving

    jsdom voor browsercode, node voor de backend, of een aangepaste omgeving.

  3. 3

    Functies aan- en uitzetten

    Dekkingsdrempels, snapshot-tests, mockpaden, aangepaste setup-bestanden en patronen om transformatie te negeren.

  4. 4

    Download de configuratie

    De uitvoer is een becommentarieerde `jest.config.js` of `jest.config.ts`, plus de npm-scripts die je aan `package.json` moet toevoegen.

Voorbeelduitvoer: React + TypeScript-project

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 }
  }
};

Beslissingsgids: welke omgeving?

Jouw code draait in… Gebruik
Browser (DOM, window) jsdom (of @happy-dom/jest-environment voor snelheid)
Node-server node
Service workers Aangepaste omgeving, node-basis
React Native react-native-preset

Transformers-spiekbriefje

Brontype Transformer
TypeScript ts-jest of @swc/jest
Door Babel gecompileerde JSX babel-jest (standaard)
Vue SFC @vue/vue3-jest + babel-jest
Svelte svelte-jester
Statische afbeeldingen Handmatige mock in moduleNameMapper

Dekkingsdrempels: welke cijfers?

  • Kritiek pad / bibliotheken: 90%+ regels, 85%+ vertakkingen.
  • Featureteams: 80% regels, 70% vertakkingen.
  • Snel veranderende UI: 60-70% regels; mik hoger voor bedrijfslogica, lager voor lay-out.
  • Prototypes: schakel de drempels helemaal uit; volg dekking als een getal, niet als een poort.

Veelgemaakte fouten

  • jsdom gebruiken voor pure Node-code. Tragere tests en niets gewonnen, schakel over naar node.
  • transformIgnorePatterns vergeten voor ESM-pakketten. Moderne pakketten worden alleen als ESM geleverd; Jest moet te horen krijgen dat het ze moet transformeren.
  • Afbeeldingen / CSS mocken zonder een mapper. Importeer een .png in een test en Jest valt om zonder een mockmodule.
  • clearMocks op false zetten. Mocks lekken tussen tests door en fouten worden niet-deterministisch. Zet het standaard aan.

Veelgestelde vragen

SWC (@swc/jest) is 10 tot 20 keer sneller dan ts-jest, omdat het de volledige typecontrole binnen Jest overslaat. Voer de typecontrole apart uit als tsc --noEmit in de CI. Gebruik ts-jest wanneer je wilt dat typefouten tests laten mislukken; gebruik SWC voor snelheid.

happy-dom is ongeveer 2 tot 3 keer sneller dan jsdom en implementeert een grote subset van de DOM-API’s. Het mist enkele randgevallen, dus als je een “not implemented”-fout tegenkomt, val dan terug op jsdom.

Ja, als je componenten rechtstreeks .css- of .scss-bestanden importeren. Koppel ze aan identity-obj-proxy (voor CSS-modules) of aan een kleine lege stub. Zonder dit geven je tests een fout op het moment van importeren.

Ja. Kies de TypeScript-uitvoeroptie en de generator geeft jest.config.ts terug. Jest 27+ laadt .ts-configuraties automatisch wanneer ts-node is geïnstalleerd.

Gerelateerde tools

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

E-mailvalidator

Valideer een e-mailadres: RFC 5322-syntaxcontrole, live MX-record-zoekopdracht, plus details over lokaal deel, domein en lengte. Er wordt geen e-mail verstuurd.

EditorConfig-generator

Genereer een .editorconfig-bestand met uw regels voor inspringstijl en -grootte, regeleinde, tekenset en witruimte voor consistente opmaak in alle IDE's en editors.

HTML-opmaker

Formatteer HTML lokaal in de browser met twee of vier spaties inspringing. HTML wordt niet geüpload of gevalideerd.

Tool beschikbaar in andere talen