Cypress ile Birim Test Örneği

Test otomasyonu dünyasında Cypress, özellikle modern web uygulamaları için en çok tercih edilen araçlardan biri haline geldi. Çoğunlukla uçtan uca (E2E) testler için kullanılıyor olsa da, Cypress aynı zamanda bileşen testleri (component testing) ile birim test yaklaşımına da imkan tanıyor.

Bu yazıda, Cypress ile basit bir React bileşeni üzerinde birim test örneği yapacağız.

Cypress ile Birim Test Nedir?

Birim test, uygulamanın en küçük bağımsız parçalarını (örneğin: fonksiyon, bileşen, buton davranışı) test etmeye odaklanır. Cypress burada şu avantajları sağlar:

Bileşeni gerçek bir tarayıcı ortamında render eder.

Kullanıcının etkileşimlerini (tıklama, yazma vb.) taklit eder.

Görünümün doğru olup olmadığını kolayca kontrol eder.

npm install cypress --save-dev

npx cypress open

Örnek Bileşen

Diyelim ki elimizde basit bir Counter (Sayaç) bileşeni var:

// Counter.jsx

import React, { useState } from "react";



function Counter() {

  const [count, setCount] = useState(0);



  return (

    


      
Sayac: {count}

       setCount(count + 1)}>Arttır

       setCount(count - 1)}>Azalt

    

  );

}



export default Counter;

Cypress Birim Testi

Şimdi bu bileşen için Cypress ile bir test yazalım:

// Counter.cy.jsx

import React from "react";

import Counter from "./Counter";



describe("Counter Component", () => {

  it("başlangıç değerini doğru göstermeli", () => {

    cy.mount();

    cy.contains("Sayac: 0");

  });



  it("arttır butonuna basınca değer artmalı", () => {

    cy.mount();

    cy.contains("Sayac: 0");

    cy.get("button").contains("Arttır").click();

    cy.contains("Sayac: 1");

  });



  it("azalt butonuna basınca değer azalmalı", () => {

    cy.mount();

    cy.contains("Sayac: 0");

    cy.get("button").contains("Azalt").click();

    cy.contains("Sayac: -1");

  });

});

Test Sonucu

Cypress’i çalıştırdığımızda, testlerimizi canlı olarak tarayıcıda görebiliriz.

✔ başlangıç değerini doğru göstermeli
✔ arttır butonuna basınca değer artmalı
✔ azalt butonuna basınca değer azalmalı

Hepsi geçtiğinde Cypress’in kullanıcı dostu arayüzü sayesinde hangi adımların çalıştığını görsel olarak da takip edebiliyoruz.


Cypress sadece uçtan uca test için değil, aynı zamanda birim ve component testleri için de güçlü bir araçtır. Bu örnekte gördüğümüz gibi, küçük bir React bileşenini test etmek oldukça kolay.

Yazar: Mert Akbağ