Test piramidi: Jest, RTL, Cypress

Üç araç üç farklı katmanı test eder. İlan "Unit / Integration / E2E Testing" diye ayrı ayrı saydığı için mülakatta "hangisini ne zaman kullanırsın" sorusu neredeyse kesin gelir.

1. Jest — birim (unit) test

Tek bir fonksiyonu, dış dünyadan izole şekilde test eder. Hızlıdır (milisaniyeler), network/DB yoktur. "Bu fonksiyon doğru hesaplıyor mu?" sorusuna cevap verir.

// priceUtils.ts
export function applyDiscount(price: number, pct: number) {
  if (pct < 0 || pct > 100) throw new Error("Geçersiz yüzde");
  return Math.round(price * (1 - pct / 100));
}

// priceUtils.test.ts
import { applyDiscount } from "./priceUtils";

describe("applyDiscount", () => {
  it("yüzde 10 indirimi doğru hesaplar", () => {
    expect(applyDiscount(1000, 10)).toBe(900);
  });
  it("geçersiz yüzdede hata fırlatır", () => {
    expect(() => applyDiscount(1000, 150)).toThrow("Geçersiz yüzde");
  });
});

2. React Testing Library — component testi

Bir component'i gerçek bir DOM'a render edip, kullanıcının göreceği şeyler üzerinden (metin, rol, label) etkileşim kurar. RTL'in felsefesi: "implementation detail değil, davranışı test et."

// Buton.test.tsx
import { render, screen, fireEvent } from "@testing-library/react";
import { Buton } from "./Buton";

test("tıklanınca onClick çağrılır", () => {
  const onClick = jest.fn();
  render(<Buton etiket="Kaydet" onClick={onClick} />);

  // Kullanıcı gibi sorgula: className değil, GÖRÜNEN metin/rol
  fireEvent.click(screen.getByRole("button", { name: "Kaydet" }));

  expect(onClick).toHaveBeenCalledTimes(1);
});

3. Cypress — uçtan uca (E2E) test

Gerçek bir tarayıcıda, gerçek (ya da mock'lanmış) backend'e karşı tüm kullanıcı akışını test eder. İlandaki "fatura ödeme, TL yükleme" gibi kritik akışlar için birebir bu katman kullanılır.

// cypress/e2e/fatura-odeme.cy.ts
describe("Fatura ödeme akışı", () => {
  it("kullanıcı faturasını başarıyla öder", () => {
    cy.visit("/fatura-odeme");
    cy.get('[data-testid="fatura-no"]').type("123456789");
    cy.get('[data-testid="devam-btn"]').click();
    cy.get('[data-testid="odeme-tutari"]').should("contain", "₺");
    cy.get('[data-testid="ode-btn"]').click();
    cy.contains("Ödemeniz başarıyla alındı").should("be.visible");
  });
});

Egzersizler