Generator konfiguracji Jest
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
Wybierz stack
TypeScript, React, Vue, Svelte, czysty Node albo mieszanka. Każdy wstępnie wypełnia właściwe transformery.
-
2
Wybierz środowisko testowe
jsdom dla kodu przeglądarkowego, node dla backendu albo środowisko niestandardowe.
-
3
Przełącz funkcje
Progi pokrycia, testy snapshotów, ścieżki mocków, niestandardowe pliki setup, wzorce ignorowania transformacji.
-
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
jsdomdla czystego kodu Node. Wolniejsze testy i nic w zamian, przełącz nanode. - Brak
transformIgnorePatternsdla pakietów ESM. Nowoczesne pakiety dostarczane są tylko jako ESM; trzeba powiedzieć Jestowi, by je transformował. - Mockowanie obrazów / CSS bez mappera. Zaimportuj
.pngw teście, a Jest się wywróci bez modułu mock. - Ustawienie
clearMocksna 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
Tabela ASCII
Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.
Referencja znaków HTML
Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.
Skróty klawiaturowe
Wyszukuj udokumentowane skróty domyślne VS Code, Chrome i Bash z GNU Readline w macOS, Windows i Linux.
Generator EditorConfig
Wygeneruj plik .editorconfig z własnymi regułami stylu i rozmiaru wcięć, końca linii, kodowania i białych znaków, aby uzyskać spójne formatowanie w różnych IDE i edytorach.
Walidator adresów e-mail
Zweryfikuj adres e-mail: sprawdzenie składni RFC 5322, sprawdzenie rekordu MX w czasie rzeczywistym oraz szczegóły dotyczące części lokalnej, domeny i długości. Żadna wiadomość nie jest wysyłana.
Formatowanie HTML
Formatuj HTML lokalnie w przeglądarce, używając wcięć dwóch lub czterech spacji. HTML nie jest wysyłany ani walidowany.
Narzędzie jest dostępne w innych językach
- Générateur de configuration Jest [FR]
- Jest-konfigurationsgenerator [SV]
- เครื่องมือสร้างไฟล์ตั้งค่า Jest [TH]
- مولّد إعداد Jest [AR]
- Generator Konfigurasi Jest [ID]
- Trình tạo cấu hình Jest [VI]
- Jest 설정 생성기 [KO]
- Jest Konfigurationsgenerator [DE]
- Generador de Configuración de Jest [ES]
- Jest-configuratiegenerator [NL]
- Jest 設定ジェネレーター [JA]
- Gerador de Configuração Jest [PT]
- Генератор конфигурации Jest [RU]
- Jest Yapılandırma Üreticisi [TR]
- Jest 配置生成器 [ZH]
- Jest Config Generator [EN]
- Generatore di Configurazione Jest [IT]