Softonic

Jest Yapılandırma Üreticisi

Adım 1 / 2 jest yapılandırması
Sonraki

Teknoloji yığınınızı seçin, TypeScript, React, Node arka ucu ya da Svelte, ve üretici, doğru dönüştürücüler, modül eşleyici, test ortamı ve kapsam eşikleriyle birlikte bir jest.config.js üretsin. İnsanların sıkça unuttuğu her seçeneği de içerir: CSS/görseller için moduleNameMapper, setupFilesAfterEach ve node_modules ile dist için testPathIgnorePatterns.

Jest yapılandırması nasıl oluşturulur

  1. 1

    Teknoloji yığınınızı seçin

    TypeScript, React, Vue, Svelte, saf Node ya da bir karışım. Her biri doğru dönüştürücüleri önceden doldurur.

  2. 2

    Test ortamını seçin

    Tarayıcı kodu için jsdom, arka uç için node ya da özel bir ortam.

  3. 3

    Özellikleri açıp kapatın

    Kapsam eşikleri, anlık görüntü (snapshot) testleri, mock yolları, özel setup dosyaları ve dönüşümü yok sayma kalıpları.

  4. 4

    Yapılandırmayı indirin

    Çıktı, yorum satırları eklenmiş bir `jest.config.js` veya `jest.config.ts` dosyasının yanı sıra `package.json` dosyanıza eklemeniz gereken npm betiklerinden oluşur.

Örnek çıktı: React + TypeScript projesi

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

Karar rehberi: hangi ortam?

Kodunuz şurada çalışıyor… Kullanın
Tarayıcı (DOM, window) jsdom (veya hız için @happy-dom/jest-environment)
Node sunucusu node
Service worker Özel ortam, node tabanlı
React Native react-native ön ayarı

Dönüştürücü kopya kâğıdı

Kaynak türü Dönüştürücü
TypeScript ts-jest veya @swc/jest
Babel ile derlenmiş JSX babel-jest (varsayılan)
Vue SFC @vue/vue3-jest + babel-jest
Svelte svelte-jester
Statik görseller moduleNameMapper içinde elle mock

Kapsam eşikleri: hangi sayılar?

  • Kritik yol / kütüphaneler: %90+ satır, %85+ dal.
  • Özellik ekipleri: %80 satır, %70 dal.
  • Hızla değişen arayüz: %60-70 satır; iş mantığı için daha yükseği, düzen için daha düşüğü hedefleyin.
  • Prototipler: eşikleri tamamen devre dışı bırakın; kapsamı bir geçit olarak değil, bir sayı olarak izleyin.

Sık yapılan hatalar

  • Saf Node kodu için jsdom kullanmak. Daha yavaş testler ve hiçbir kazanç yok, node’a geçin.
  • ESM paketleri için transformIgnorePatterns’i unutmak. Modern paketler yalnızca ESM olarak dağıtılır; Jest’e bunları dönüştürmesi söylenmelidir.
  • Görselleri / CSS’i bir eşleyici olmadan mock’lamak. Bir testte .png içe aktarın; mock modülü olmadan Jest çöker.
  • clearMocks’i false yapmak. Mock’lar testler arasında sızar ve hatalar belirsiz (non-deterministik) hâle gelir. Varsayılan olarak açın.

Sık Sorulan Sorular

SWC (@swc/jest), Jest içindeki tam tip denetimini atladığı için ts-jest‘e göre 10–20 kat daha hızlıdır. Tip denetimini CI’de tsc --noEmit olarak ayrı çalıştırın. Tip hatalarının testleri başarısız kılmasını istiyorsanız ts-jest‘i, hız için ise SWC’yi kullanın.

happy-dom, jsdom‘a göre yaklaşık 2–3 kat daha hızlıdır ve DOM API’lerinin büyük bir bölümünü uygular. Bazı uç durumları kaçırdığından, “not implemented” hatasıyla karşılaşırsanız jsdom’a geri dönün.

Evet, bileşenleriniz doğrudan .css veya .scss dosyalarını içe aktarıyorsa. Bunları identity-obj-proxy‘ye (CSS modülleri için) veya küçük boş bir stub’a eşleyin. Bu olmadan testleriniz içe aktarma anında hata verir.

Evet. TypeScript çıktı seçeneğini seçin; üretici jest.config.ts üretir. ts-node kuruluysa Jest 27 ve üzeri, .ts yapılandırmalarını otomatik olarak yükler.

İlgili Araçlar

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

EditorConfig Oluşturucu

Girinti stili ve boyutu, satır sonu, karakter kümesi ve boşluk kurallarınızla bir .editorconfig dosyası oluşturarak IDE ve editörler arasında tutarlı biçimlendirme sağlayın.

E-posta Doğrulayıcı

Bir e-posta adresini doğrulayın: RFC 5322 sözdizimi kontrolü, canlı MX kaydı sorgulama, ayrıca yerel kısım, alan adı ve uzunluk bilgileri. Hiçbir e-posta gönderilmez.

Araç diğer dillerde mevcuttur