Frontend tarafında kaliteyi korumanın en sağlam yolu testtir. Bu yazıda, farklı amaçlara hizmet eden iki güçlü aracı birlikte ele alıyoruz: Jest ve Cypress.

Jest Nedir?

Jest, özellikle unit ve integration testlerde sık kullanılan hızlı bir JavaScript test framework'üdür. React projelerinde de çok yaygın kullanılır.

Kurulum

1npm install --save-dev jest

Basit Test Örneği

1function toplama(a, b) {
2  return a + b;
3}
4
5test("2 + 3 eşittir 5", () => {
6  expect(toplama(2, 3)).toBe(5);
7});

Grup Testleri

1describe("Toplama Fonksiyonu", () => {
2  it("2 + 3 eşittir 5", () => {
3    expect(toplama(2, 3)).toBe(5);
4  });
5
6  it("0 + 0 eşittir 0", () => {
7    expect(toplama(0, 0)).toBe(0);
8  });
9});

Mocking Örneği

1jest.mock("axios");
2
3it("API çağrısı başarılı olursa veriyi döndürmeli", async () => {
4  const veriler = { data: { isim: "Ali" } };
5  axios.get.mockResolvedValue(veriler);
6
7  const cevap = await apiCagir();
8  expect(cevap.isim).toBe("Ali");
9});

Snapshot Örneği

1import { render } from "@testing-library/react";
2import MyComponent from "./MyComponent";
3
4test("MyComponent snapshot testi", () => {
5  const { asFragment } = render(<MyComponent />);
6  expect(asFragment()).toMatchSnapshot();
7});

Cypress Nedir?

Cypress, gerçek tarayıcıda çalışan ve kullanıcı akışlarını uçtan uca test etmeye odaklanan bir E2E test aracıdır.

Frontend Testing Araçları: Jest ve Cypress ile Başlamak

Kurulum

1npm install cypress --save-dev

Basit E2E Senaryosu

1describe("Form Testi", () => {
2  it("Formu doldurmalı ve göndermeli", () => {
3    cy.visit("https://ornekwebsayfasi.com");
4    cy.get('input[name="isim"]').type("Ali");
5    cy.get('input[name="email"]').type("ali@example.com");
6    cy.get('button[type="submit"]').click();
7    cy.get(".success-message").should("contain", "Başarıyla gönderildi!");
8  });
9});

Jest ve Cypress Farkı

Jest Ne Zaman?

• Fonksiyon ve component düzeyi testler
• Mocking/snapshot ihtiyaçları
• Hızlı geri bildirim

Cypress Ne Zaman?

• Kullanıcı akışı testleri
• Form, yönlendirme, auth gibi senaryolar
• Gerçek tarayıcı davranışı doğrulama

Sonuç

Jest ve Cypress birbirinin alternatifi değil, tamamlayıcısıdır. Jest ile iç mantığı, Cypress ile gerçek kullanıcı deneyimini doğrulayarak daha güvenilir bir frontend geliştirme süreci kurulabilir.