Mocking

Mock'lar ile herhangi bir nedenle doğrudan kullanmak istemediğimiz veya kullanamadığımız bileşenleri simüle eder/taklit ederiz

Mock Service Worker ile API Mocking

Tipik bir örnek API'lerdir. Mocking sayesinde, henüz var olmayan bir API ile etkileşime geçebiliriz (örneğin backend ekibi

paralel olarak üzerinde çalışıyorsa) ve hangi verilerin döneceğini her zaman tam olarak biliriz.

Mock Service Worker bunun için çok güçlü ve popüler bir araçtır.

MSW Kurulumu

MSW'yi npm install --save-dev msw ile kuruyoruz

Handler Ts dosyasi olusturma

src/mock/handlers.ts dosyasını oluşturuyoruz. Burada bireysel rotalar mock'lanır.

Bu dosya örneğin şöyle görünebilir:

import { http, HttpResponse } from 'msw'
import { birds } from '../data/birds'
export const handlers = [
  // burada https://tolleapi.com/hello'ya gelen tüm GET isteklerini yakalıyoruz
  http.get('https://tolleapi.com/hello', () => {
    // ve onları {text: "Merhaba Dünya!"} nesnesiyle yanıtlıyoruz
    return HttpResponse.json({text: "Merhaba Dünya!"})
  }),
]

Bu kod, Mock Service Worker (MSW) kullanarak bir API'yi taklit etmek için bir handler tanımlar.

• İlk olarak, MSW'den gerekli fonksiyonlar import edilir: http ve HttpResponse.
• Ardından, handlers adında bir dizi oluşturulur. Bu dizi, taklit edilecek API rotalarını içerir.
• Örnekte, https://tolleapi.com/hello adresine gelen GET istekleri yakalanır.
• Bu isteğe karşılık olarak, {text: "Merhaba Dünya!"} şeklinde bir JSON yanıtı döndürülür.

Bu handler, gerçek bir API olmadan geliştirme yaparken kullanışlıdır. Örneğin, backend henüz hazır değilken frontend geliştirmesine devam etmek için bu tür mock'lar kullanılabilir. Ayrıca, testlerde tutarlı ve öngörülebilir API yanıtları sağlamak için de kullanılabilir.

Browser Dosyasi Olusturma

Sonra src/mock/browser.ts adında bir dosya daha oluşturuyoruz

Burada rotalarımız toplanır ve özellikle tarayıcıda kullanım için paketlenir

import { setupWorker } from 'msw/browser'
import { handlers } from './handlers'
export const worker = setupWorker(...handlers)

Bu kod, Mock Service Worker (MSW) kurulumunun bir parçasını oluşturuyor.

• import { setupWorker } from 'msw/browser': MSW'nin tarayıcı sürümünden setupWorker fonksiyonunu import ediyor.
• import { handlers } from './handlers': Daha önce tanımladığımız API mock handler'larını import ediyor.
• export const worker = setupWorker(...handlers): setupWorker fonksiyonunu çağırarak bir MSW worker'ı oluşturuyor ve bunu handlers ile yapılandırıyor. Bu worker, tarayıcıda çalışacak ve belirtilen API isteklerini yakalayıp mock yanıtlar üretecek.

Bu kod, MSW'nin tarayıcı ortamında çalışması için gerekli olan temel yapılandırmayı sağlar.

Service worker oluşturma

Şimdi npx msw init ./public --save ile bir service worker oluşturuyoruz.

Bu, daha sonra gelen istekleri yakalayıp yeniden yazacak.

Artık MSW'yi entegre edebiliriz.

App’i mock data icin yeniden yapilandirma

Bunu App.tsx'te yapıyoruz, hem de React'i başlatmadan önce:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import "./index.css";

async function enableMocking() {
  if (process.env.NODE_ENV !== "development") {
    return;
  }
  const { worker } = await import("./mocks/browser");
  // `worker.start()` Service Worker'ın hazır olup istekleri yakalamaya başladığında
  // çözümlenen bir Promise döndürür.
  return worker.start();
}

enableMocking().then(() =>
  createRoot(document.getElementById("root")!).render(
    <StrictMode>
      <App />
    </StrictMode>
  )
);

1. Import İfadeleri

import { StrictMode } from "react";

import { createRoot } from "react-dom/client";

import App from "./App.tsx";

import "./index.css";

Bu ifadeler, React uygulamasının temel bileşenlerini ve stillerini import eder. StrictMode, geliştirme sırasında potansiyel sorunları tespit etmek için kullanılır. createRoot, React 18 ile gelen yeni bir render yöntemidir.

2. enableMocking Fonksiyonu

async function enableMocking() {
  if (process.env.NODE_ENV !== "development") {
    return;
  }
  const { worker } = await import("./mocks/browser");
  return worker.start();
}

Bu fonksiyon şunları yapar:

• Ortam kontrolü yapar. Sadece geliştirme ortamında çalışır.
• MSW worker'ını dinamik olarak import eder. Bu, developer build'inde gereksiz kod içermemek için önemlidir.
• worker.start() çağrısı, Service Worker'ı başlatır ve API isteklerini yakalamaya hazır hale getirir.

process.env.NODE_ENV Açıklaması

process.env.NODE_ENV, Node.js uygulamalarında yaygın olarak kullanılan bir ortam değişkenidir. Bu değişken, uygulamanın hangi ortamda çalıştığını belirtir. Genellikle üç ana değer alır:

• development: Geliştirme ortamını ifade eder. Bu modda genellikle hata ayıklama özellikleri etkindir.
• production: Canlı ortamı ifade eder. Performans optimizasyonları etkindir ve hata ayıklama özellikleri devre dışıdır.
• test: Test ortamını ifade eder. Otomatik testler çalıştırılırken kullanılır.

Kodumuzda, if (process.env.NODE_ENV !== "development") kontrolü, uygulamanın yalnızca geliştirme ortamında mock servisi kullanmasını sağlar. Bu, production ortamında gerçek API'ye bağlanılmasını garanti eder.

3. React Uygulamasının Başlatılması

enableMocking().then(() =>
  createRoot(document.getElementById("root")!).render(
    <StrictMode>
      <App />
    </StrictMode>
  )
);

Bu bölüm:

• Önce enableMocking() fonksiyonunu çağırır ve tamamlanmasını bekler.
• createRoot ile 'root' id'li DOM elementinde bir React kökü oluşturur.
• StrictMode içinde App bileşenini render eder. StrictMode, potansiyel sorunları vurgulamak için bazı kontroller yapar ve uyarılar verir.

Bu yapı, MSW'nin React uygulaması başlamadan önce hazır olmasını sağlar. Böylece, uygulama başladığında yapılan API çağrıları hemen yakalanabilir ve mock edilebilir. Bu, gerçek bir backend olmadan frontend geliştirmesi yapılmasına olanak tanır ve API yanıtlarının kontrollü bir şekilde simüle edilmesini sağlar.

Sonuc

Artık her şey hazır olmalı ve ilgili rotaya yapılan bir fetch isteği bize "mock'lanmış" veriler döndürmeli

Github Repo:

https://github.com/snahmd/birdsift