Generator konfiguracji Jest

konfiguracja Jest
Dalej

Wybierz swój stack, TypeScript, React, backend Node, Svelte, a generator wypluje jest.config.js z właściwymi transformerami, mapperem modułów, środowiskiem testowym i progami pokrycia. Zawiera każdą opcję, o której ludzie zapominają: moduleNameMapper dla CSS/obrazów, setupFilesAfterEach, testPathIgnorePatterns dla node_modules i dist.

Jak zbudować konfigurację Jest

  1. 1

    Wybierz stack

    TypeScript, React, Vue, Svelte, czysty Node albo mieszanka. Każdy wstępnie wypełnia właściwe transformery.

  2. 2

    Wybierz środowisko testowe

    jsdom dla kodu przeglądarkowego, node dla backendu albo środowisko niestandardowe.

  3. 3

    Przełącz funkcje

    Progi pokrycia, testy snapshotów, ścieżki mocków, niestandardowe pliki setup, wzorce ignorowania transformacji.

  4. 4

    Pobierz konfigurację

    Wynikiem jest skomentowany `jest.config.js` lub `jest.config.ts`, plus skrypty npm, które warto dodać do `package.json`.

Przykładowy wynik: projekt 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 }
  }
};

Przewodnik decyzyjny: które środowisko?

Twój kod działa w… Użyj
Przeglądarce (DOM, window) jsdom (lub @happy-dom/jest-environment dla szybkości)
Serwerze Node node
Service workerach Środowisko niestandardowe, baza node
React Native Preset react-native

Ściąga transformerów

Typ źródła Transformer
TypeScript ts-jest lub @swc/jest
JSX kompilowany Babelem babel-jest (domyślny)
Vue SFC @vue/vue3-jest + babel-jest
Svelte svelte-jester
Obrazy statyczne Ręczny mock w moduleNameMapper

Progi pokrycia: jakie liczby?

  • Ścieżka krytyczna / biblioteki: 90%+ linii, 85%+ gałęzi.
  • Zespoły funkcjonalne: 80% linii, 70% gałęzi.
  • Szybko zmieniający się UI: 60-70% linii; celuj wyżej dla logiki biznesowej, niżej dla układu.
  • Prototypy: całkowicie wyłącz progi; śledź pokrycie jako liczbę, nie jako bramkę.

Częste błędy

  • Używanie jsdom dla czystego kodu Node. Wolniejsze testy i nic w zamian, przełącz na node.
  • Brak transformIgnorePatterns dla pakietów ESM. Nowoczesne pakiety dostarczane są tylko jako ESM; trzeba powiedzieć Jestowi, by je transformował.
  • Mockowanie obrazów / CSS bez mappera. Zaimportuj .png w teście, a Jest się wywróci bez modułu mock.
  • Ustawienie clearMocks na false. Mocki przeciekają między testami, a awarie stają się niedeterministyczne. Włącz domyślnie.

Najczęściej zadawane pytania

SWC (@swc/jest) jest 10-20x szybszy niż ts-jest, bo pomija pełne sprawdzanie typów wewnątrz Jesta. Sprawdzanie typów uruchamiaj osobno jako tsc --noEmit w CI. Użyj ts-jest, gdy chcesz, by błędy typów oblały testy; użyj SWC dla szybkości.

happy-dom jest mniej więcej 2-3x szybszy niż jsdom i implementuje duży podzbiór API DOM. Pomija niektóre przypadki brzegowe, więc jeśli trafisz na błąd „not implemented”, wróć do jsdom.

Tak, jeśli Twoje komponenty importują pliki .css lub .scss bezpośrednio. Zmapuj je na identity-obj-proxy (dla modułów CSS) albo na maleńki pusty stub. Bez tego testy będą wyrzucać błąd przy imporcie.

Tak. Wybierz opcję wyniku TypeScript, a generator wyemituje jest.config.ts. Jest 27+ automatycznie ładuje konfiguracje .ts, gdy zainstalowany jest ts-node.

Powiązane narzędzia

Narzędzie jest dostępne w innych językach