Softonic

Generatore di Configurazione Jest

Passaggio 1 / 2 config Jest
Avanti

Scegli il tuo stack, TypeScript, React, backend Node, Svelte, e il generatore produce un jest.config.js con i giusti trasformatori, mappatore di moduli, ambiente di test e soglie di copertura. Include ogni opzione che le persone dimenticano: moduleNameMapper per CSS/immagini, setupFilesAfterEach, testPathIgnorePatterns per node_modules e dist.

Come costruire una configurazione Jest

  1. 1

    Scegli il tuo stack

    TypeScript, React, Vue, Svelte, puro Node, o una combinazione. Ognuno precompila i giusti trasformatori.

  2. 2

    Scegli l'ambiente di test

    jsdom per codice browser, node per backend, o ambiente personalizzato.

  3. 3

    Attiva le funzionalità

    Soglie di copertura, test di snapshot, percorsi mock, file di setup personalizzati, modelli di ignoranza per la trasformazione.

  4. 4

    Scarica la configurazione

    L'output è un `jest.config.js` commentato o `jest.config.ts`, più gli script npm che dovresti aggiungere a `package.json`.

Output di esempio: progetto 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 }
  }
};

Guida alla decisione: quale ambiente?

Il tuo codice gira in… Usa
Browser (DOM, finestra) jsdom (o @happy-dom/jest-environment per velocità)
Server Node node
Service workers Ambiente personalizzato, base node
React Native Preset react-native

Scheda di riferimento dei trasformatori

Tipo di sorgente Trasformatore
TypeScript ts-jest o @swc/jest
JSX compilato da Babel babel-jest (predefinito)
Vue SFC @vue/vue3-jest + babel-jest
Svelte svelte-jester
Immagini statiche Mock manuale in moduleNameMapper

Soglie di copertura: quali numeri?

  • Percorso critico / librerie: 90%+ linee, 85%+ rami.
  • Team di funzionalità: 80% linee, 70% rami.
  • UI in rapida evoluzione: 60-70% linee; punta più in alto per la logica aziendale, più in basso per il layout.
  • Prototipi: disabilita completamente le soglie; monitora la copertura come numero, non come gate.

Errori comuni

  • Usare jsdom per codice Node puro. Test più lenti e nulla guadagnato, passa a node.
  • Mancanza di transformIgnorePatterns per pacchetti ESM. I pacchetti moderni vengono forniti solo in ESM; Jest deve essere informato di trasformarli.
  • Mockare immagini / CSS senza un mappatore. Importa un .png in un test e Jest fallisce senza un modulo mock.
  • Impostare clearMocks su false. I mock trapelano tra i test e i fallimenti diventano non deterministici. Attivalo per impostazione predefinita.

Domande frequenti

SWC (@swc/jest) è 10-20 volte più veloce di ts-jest perché salta il controllo completo dei tipi all’interno di Jest. Esegui il controllo dei tipi separatamente come tsc --noEmit in CI. Usa ts-jest quando vuoi che gli errori di tipo facciano fallire i test; usa SWC per velocità.

happy-dom è circa 2-3 volte più veloce di jsdom e implementa un ampio sottoinsieme delle API DOM. Manca di alcuni casi limite, quindi se ricevi un errore “non implementato”, torna a jsdom.

Sì, se i tuoi componenti importano file .css o .scss direttamente. Mappali a identity-obj-proxy (per i moduli CSS) o a un piccolo stub vuoto. Senza questo, i tuoi test daranno errore al momento dell’importazione.

Sì. Scegli l’opzione di output TypeScript e il generatore emette jest.config.ts. Jest 27+ carica automaticamente le configurazioni .ts quando ts-node è installato.

Strumenti correlati

Riferimento Tabella ASCII

Tabella ASCII completa da 0 a 127 con decimale, esadecimale, ottale, binario e riferimento numerico HTML per ogni carattere, inclusi i codici di controllo come NUL, LF e DEL.

Riferimento ai caratteri HTML

Elenco ricercabile delle entità HTML, dei loro codici nominati e numerici, e copia con un clic per caratteri e simboli speciali.

Generatore di lettere casuali

Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.

Riferimento scorciatoie da tastiera

Cerca le scorciatoie predefinite documentate di VS Code, Chrome e Bash con GNU Readline su macOS, Windows e Linux.

Creatore di diagrammi di flusso

Crea nel browser diagrammi di flusso visivi con cinque tipi di nodo, connessioni dirette e download SVG o PNG.

Promemoria Markdown

Riferimento pratico Markdown con anteprime reali ed esempi pronti da copiare per titoli, elenchi, tabelle, codice, link, immagini e sintassi GFM.

Strumento disponibile in altre lingue