0Pricing
Frontend Academy · Ders

Jest Kurulumu ve Temel Testler

Jest'i yükleyin, describe/it/expect testleri yazın, toBe ve toEqual gibi eşleştiricileri kullanın ve geliştirme sırasında testleri izleme kipinde çalıştırın.

Jest Kurulumu ve Temel Testler, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Ön Uç Kodunu Neden Test Etmelisiniz?

Testler, kodu değiştirdiğinizde gerilemeleri yakalar. Beklenen davranışı belgeler. Yeniden düzenleme yapmanız için güven verir. Testler olmadan her değişiklik, başka bir şeyin bozulup bozulmadığını bilmeden atılan bir adımdır.

Jest'i Kurma

Vite + React projesi için Vitest kullanın (Vite ile yerel olarak çalışan, Jest uyumlu bir test çalıştırıcısı). Diğer kurulumlarda Jest'i TypeScript için babel-jest veya ts-jest ile birlikte kurun.

# Vitest (preferred for Vite projects):
npm install -D vitest

# Or Jest with TypeScript:
npm install -D jest @types/jest ts-jest

Test Dosyalarını Adlandırma

Test dosyalarını kaynak kodun yanına yerleştirin: Button.test.ts, utils.spec.ts. Alternatif olarak bir __tests__/ klasörü kullanabilirsiniz. Jest, *.test.* veya *.spec.* ile eşleşen dosyaları bulur.

describe, it, expect

Testleri describe bloklarıyla (gruplar), it/test işlevleriyle (tek tek testler) yapılandırın. expect ile doğrulama yapın.

import { add, formatCurrency } from './utils';

describe('Math utils', () => {
  it('adds two numbers', () => {
    expect(add(2, 3)).toBe(5);
  });

  it('handles negative numbers', () => {
    expect(add(-1, 1)).toBe(0);
  });
});

describe('Currency formatting', () => {
  it('formats USD', () => {
    expect(formatCurrency(1234.5, 'USD')).toBe('$1,234.50');
  });
});

Yaygın Eşleştiriciler

Jest birçok eşleştirici sağlar: toBe (katı eşitlik), toEqual (derin eşitlik), toContain, toHaveLength, toBeNull, toBeTruthy, toBeFalsy, toThrow, toBeGreaterThan.

expect([1,2,3]).toHaveLength(3);
expect({ a: 1, b: 2 }).toEqual({ a: 1, b: 2 });
expect('hello world').toContain('world');
expect(() => { throw new Error('boom'); }).toThrow('boom');
expect(null).toBeNull();
expect(true).toBeTruthy();

Eş Zamanlı Kodun Test Edilmesi

Testlerde promise'i döndürün veya async/await kullanın. Jest, testi tamamlandı olarak işaretlemeden önce promise'in çözümlenmesini bekler.

it('fetches user data', async () => {
  const user = await fetchUser(1);
  expect(user.name).toBe('Alice');
});

// Or with resolves/rejects matchers:
it('resolves with user', () => {
  return expect(fetchUser(1)).resolves.toMatchObject({ name: 'Alice' });
});

beforeEach ve afterEach

Testleri birbirinden yalıtmak için her testten önce ve sonra kurulum ile temizleme işlemlerini çalıştırın.

describe('User service', () => {
  beforeEach(() => {
    db.seed();
  });
  afterEach(() => {
    db.clear();
  });
  it('creates a user', async () => {
    const user = await userService.create({ name: 'Alice' });
    expect(user.id).toBeDefined();
  });
});

Testleri Çalıştırma

npm test tüm testleri çalıştırır. npm test -- --watch (Jest) veya izleme modundaki vitest, dosya değiştiğinde testleri yeniden çalıştırır. Vitest'in kullanıcı arayüzü (vitest --ui), tarayıcı tabanlı bir test çalıştırıcısı sağlar.

Test Kapsamı

jest --coverage (veya vitest run --coverage), hangi satırların test edildiğini gösteren bir kapsam raporu oluşturur. %70 ve üzeri kapsam, ekipler için yaygın bir hedeftir. %100 kapsam, hatasız kod anlamına gelmez.

Test Edilebilir Kod Yazma

Saf işlevler (yan etkisi olmayanlar) kolayca test edilebilir. İşlevleri küçük ve odaklanmış tutun. Bağımlılıkları doğrudan içe aktarmak yerine dışarıdan sağlayın; bu, test ikamelerini kolayca kullanmanızı sağlar.

Test Yalıtımı

Her test tamamen bağımsız olmalıdır. Birbirlerinin yan etkilerine bağlı olan testler kırılgandır. Testler arasında paylaşılan değiştirilebilir durumdan kaçının. afterEach içinde tüm taklitleri sıfırlayın.

Hızlı Kontrol

İki nesnenin derin eşitliğini hangi Jest eşleştiricisi denetler?

Özet: Jest Temelleri

describe testleri gruplar. it/test tek tek testleri tanımlar. expect ve eşleştiriciler sonuçları doğrular. İlkel değerler için toBe kullanılır. Nesneler/diziler için toEqual kullanılır. Eş zamanlı testlerde async/await kullanılır veya promise döndürülür. Yalıtım için beforeEach/afterEach kullanılır. Kapsam raporları hangi satırların test edildiğini gösterir. Saf işlevler en kolay test edilen işlevlerdir.

Sıkça Sorulan Sorular

“Jest Kurulumu ve Temel Testler” dersi ücretsiz mi?

Evet — “Jest Kurulumu ve Temel Testler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Jest Kurulumu ve Temel Testler” dersinde ne öğreneceğim?

Jest'i yükleyin, describe/it/expect testleri yazın, toBe ve toEqual gibi eşleştiricileri kullanın ve geliştirme sırasında testleri izleme kipinde çalıştırın. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Jest Kurulumu ve Temel Testler” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Jest Kurulumu ve Temel Testler
  2. @testing-library/react: render userEvent
  3. @testing-library/vue: bileşenleri bağlama
  4. Modülleri ve API Çağrılarını Taklit Etme
← Frontend Academy Sayfasına Dön