Softonic

Generator Konfigurasi Jest

Langkah 1 / 2 konfigurasi jest
Berikutnya

Pilih tumpukan teknologi Anda, TypeScript, React, backend Node, atau Svelte, dan generator akan menghasilkan jest.config.js dengan transformer yang tepat, pemeta modul, lingkungan pengujian, serta ambang batas cakupan. Termasuk setiap opsi yang sering terlupakan: moduleNameMapper untuk CSS/gambar, setupFilesAfterEach, dan testPathIgnorePatterns untuk node_modules dan dist.

Cara membuat konfigurasi Jest

  1. 1

    Pilih tumpukan teknologi Anda

    TypeScript, React, Vue, Svelte, Node murni, atau kombinasinya, masing-masing mengisi transformer yang tepat secara otomatis.

  2. 2

    Pilih lingkungan pengujian

    jsdom untuk kode peramban, node untuk backend, atau lingkungan kustom.

  3. 3

    Aktifkan/nonaktifkan fitur

    Ambang batas cakupan, pengujian snapshot, jalur mock, berkas setup kustom, dan pola pengabaian transformasi.

  4. 4

    Unduh konfigurasi

    Hasilnya berupa `jest.config.js` atau `jest.config.ts` yang dilengkapi komentar, beserta skrip npm yang perlu Anda tambahkan ke `package.json`.

Contoh keluaran: proyek 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 }
  }
};

Panduan keputusan: lingkungan mana?

Kode Anda berjalan di… Gunakan
Peramban (DOM, window) jsdom (atau @happy-dom/jest-environment untuk kecepatan)
Server Node node
Service worker Lingkungan kustom, basis node
React Native Preset react-native

Contekan transformer

Jenis sumber Transformer
TypeScript ts-jest atau @swc/jest
JSX yang dikompilasi oleh Babel babel-jest (bawaan)
Vue SFC @vue/vue3-jest + babel-jest
Svelte svelte-jester
Gambar statis Mock manual dalam moduleNameMapper

Ambang batas cakupan: angka berapa?

  • Jalur kritis / pustaka: 90%+ baris, 85%+ cabang.
  • Tim fitur: 80% baris, 70% cabang.
  • UI yang cepat berubah: 60-70% baris; bidik lebih tinggi untuk logika bisnis, lebih rendah untuk tata letak.
  • Prototipe: nonaktifkan ambang batas sepenuhnya; pantau cakupan sebagai angka, bukan sebagai gerbang.

Kesalahan umum

  • Menggunakan jsdom untuk kode Node murni. Pengujian lebih lambat dan tidak ada keuntungan, beralihlah ke node.
  • Melupakan transformIgnorePatterns untuk paket ESM. Paket modern hanya dikirim sebagai ESM; Jest perlu diberi tahu untuk mentransformasinya.
  • Mem-mock gambar / CSS tanpa pemeta. Impor sebuah .png dalam pengujian dan Jest akan gagal tanpa modul mock.
  • Menyetel clearMocks menjadi false. Mock bocor antar-pengujian dan kegagalan menjadi tidak deterministik. Aktifkan secara default.

Pertanyaan yang Sering Diajukan

SWC (@swc/jest) 10–20 kali lebih cepat dibandingkan ts-jest karena melewati pemeriksaan tipe secara lengkap di dalam Jest. Jalankan pemeriksaan tipe secara terpisah sebagai tsc --noEmit dalam CI. Gunakan ts-jest jika Anda ingin kesalahan tipe menggagalkan pengujian; gunakan SWC untuk kecepatan.

happy-dom sekitar 2–3 kali lebih cepat dibandingkan jsdom dan mengimplementasikan sebagian besar DOM API. Ia melewatkan beberapa kasus khusus, jadi jika Anda menemui kesalahan “not implemented”, kembalilah ke jsdom.

Ya, jika komponen Anda mengimpor berkas .css atau .scss secara langsung. Petakan ke identity-obj-proxy (untuk modul CSS) atau ke stub kosong kecil. Tanpa ini, pengujian Anda akan gagal saat proses impor.

Bisa. Pilih opsi keluaran TypeScript dan generator akan menghasilkan jest.config.ts. Jest 27+ memuat konfigurasi .ts secara otomatis ketika ts-node terpasang.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Referensi pintasan papan ketik

Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.

Pemformat HTML

Format HTML secara lokal di browser dengan inden dua atau empat spasi. HTML tidak diunggah atau divalidasi.

Generator EditorConfig

Buat file .editorconfig dengan gaya dan ukuran indentasi, akhir baris, charset, dan aturan spasi Anda untuk format yang konsisten di berbagai IDE dan editor.

Validator Email

Validasi alamat email: pemeriksaan sintaks RFC 5322, pengecekan live record MX, serta detail bagian lokal, domain, dan panjang. Tidak ada email yang dikirim.

Alat ini tersedia dalam bahasa lain