0Pricing
Frontend Academy · Ders

Modülleri ve API Çağrılarını Taklit Etme

ES modüllerini jest.mock() ile taklit edin, fetch'i MSW (Mock Service Worker) ile sahteleyin ve gerçek ağ çağrıları olmadan dış verilere bağlı bileşenleri test edin.

Modülleri ve API Çağrılarını Taklit Etme, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. 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.

Neden Taklit Kullanılır?

Birim testleri yalıtılmış olmalıdır. Gerçek API çağrıları yavaş, güvenilmez ve maliyetlidir. Taklit kullanımı, bağımlılıkları öngörülebilir yanıtlar döndüren denetimli test ikameleriyle değiştirir.

jest.mock() — Modüllerin Tümünü Taklit Etme

jest.mock('module-path'), modülün tamamını otomatik olarak taklit edilmiş sürümlerle değiştirir. Tüm dışa aktarımlar jest.fn() saplamalarına dönüşür. Dönüş değerlerini ayarlamak için mockReturnValue veya mockResolvedValue çağırın.

jest.mock('./api');
import { fetchUser } from './api';

(fetchUser as jest.Mock).mockResolvedValue({ id: 1, name: 'Alice' });

test('renders user name', async () => {
  render(<Profile userId="1" />);
  await screen.findByText('Alice');
  expect(fetchUser).toHaveBeenCalledWith('1');
});

jest.fn() — El ile Saplamalar

jest.fn(), izleyebileceğiniz ve denetleyebileceğiniz bir taklit işlevi oluşturur. Geri çağırma özellikleri ve hizmet bağımlılıkları için kullanışlıdır.

const onSubmit = jest.fn();
render(<Form onSubmit={onSubmit} />);

await user.click(screen.getByRole('button', { name: /submit/i }));

expect(onSubmit).toHaveBeenCalledOnce();
expect(onSubmit).toHaveBeenCalledWith({ email: 'alice@example.com' });

beforeEach ile Taklitleri Sıfırlama

Durum sızıntısını önlemek için testler arasında taklitleri sıfırlayın. beforeEach içinde jest.clearAllMocks() kullanın.

beforeEach(() => {
  jest.clearAllMocks(); // reset call counts and implementations
});

afterAll(() => {
  jest.restoreAllMocks(); // restore original implementations
});

MSW — Mock Service Worker

MSW, gerçek fetch/XHR çağrılarını ağ katmanında Service Worker'lar (tarayıcı) veya Node.js araya giricileri (testler) kullanarak yakalar. Sahte yanıtlar döndüren istek işleyicileri yazın.

import { setupServer } from 'msw/node';
import { http, HttpResponse } from 'msw';

const server = setupServer(
  http.get('/api/users', () => {
    return HttpResponse.json([{ id: 1, name: 'Alice' }]);
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

Test Başına MSW Geçersiz Kılmaları

Belirli bir test senaryosu için varsayılan işleyiciyi geçersiz kılın.

test('handles server error', async () => {
  server.use(
    http.get('/api/users', () => new HttpResponse(null, { status: 500 }))
  );

  render(<UserList />);
  await screen.findByText(/server error/i);
});

localStorage ile Sahteleme

localStorage kullanan sınamalarda Web Depolama yöntemlerini sahtelemek için jest.spyOn kullanın.

beforeEach(() => {
  const store: Record<string, string> = {};
  jest.spyOn(Storage.prototype, 'getItem').mockImplementation((key) => store[key] ?? null);
  jest.spyOn(Storage.prototype, 'setItem').mockImplementation((key, val) => { store[key] = val; });
});

Zamanlayıcıları Sahteleme

jest.useFakeTimers(), setTimeout/setInterval işlevlerini Jest tarafından denetlenen sürümlerle değiştirir. jest.runAllTimers(), tüm zamanlayıcıları hızla ilerletir.

jest.useFakeTimers();

test('shows toast for 3 seconds', () => {
  render(<Toast message="Saved!" />);
  expect(screen.getByText('Saved!')).toBeInTheDocument();

  jest.advanceTimersByTime(3000);
  expect(screen.queryByText('Saved!')).not.toBeInTheDocument();
});

afterEach(() => jest.useRealTimers());

Modül Fabrikası Deseni

TypeScript'te sahte modül fabrikaları uygun türleri döndürür.

jest.mock('./services/auth', () => ({
  login: jest.fn().mockResolvedValue({ token: 'test-token' }),
  logout: jest.fn()
}));

Anlık Görüntüsü Sınaması — Ölçülü Kullanın

Anlık görüntüsü sınamaları, bir bileşenin çıktısının serileştirilmiş gösterimini kaydeder ve bu çıktı değişirse başarısız olur. Oluşturulmaları kolaydır; ancak gürültülü yanlış pozitifler üretebilirler. Bunları yalnızca kararlı, saf sunum bileşenleri için kullanın.

Hızlı Kontrol

Uygulama programlama arayüzlerini sahteleme açısından MSW'nin jest.mock('fetch') karşısındaki temel avantajı nedir?

Özet: Sahteleme

jest.mock() modülleri değiştirir. jest.fn() izlenebilir sahte işlevler oluşturur. Sahtelemeleri beforeEach içinde sıfırlayın. MSW, HTTP'yi ağ düzeyinde yakalar; bu, en gerçeğe yakın sahteleme yaklaşımıdır. Hata senaryoları için her sınamaya özel server.use() geçersiz kılmalarını kullanın. Zamana bağlı kodlar için sahte zamanlayıcıları kullanın. Bileşen bütünleştirme sınamalarında MSW'yi tercih edin.

Sıkça Sorulan Sorular

“Modülleri ve API Çağrılarını Taklit Etme” dersi ücretsiz mi?

Evet — “Modülleri ve API Çağrılarını Taklit Etme” 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.

“Modülleri ve API Çağrılarını Taklit Etme” dersinde ne öğreneceğim?

ES modüllerini jest.mock() ile taklit edin, fetch'i MSW (Mock Service Worker) ile sahteleyin ve gerçek ağ çağrıları olmadan dış verilere bağlı bileşenleri test edin. 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 4. dersidir.

“Modülleri ve API Çağrılarını Taklit Etme” 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