Projelerde test deneyiminizden bahsedin.

Projelerde, kaliteyi sağlamak için çeşitli test türleri kullandım:

1. Birim testleri: Jest ve React Testing Library kullanarak bağımsız bileşenleri, fonksiyonları ve modülleri izole edip kontrol etmek. Bu, küçük ve bağımsız kod parçalarında mantık hatalarını hızlıca tespit etmeye yardımcı olur.

   // Jest ve React Testing Library ile Button bileşeninin birim testi örneği
   import { render, screen } from '@testing-library/react';
   import Button from './Button';
   
   test('doğru metinle butonu render eder', () => {
     render(<Button>Click Me</Button>);
     const buttonElement = screen.getByText(/Click Me/i);
     expect(buttonElement).toBeInTheDocument();
   });
   

2. Entegrasyon testleri: Birden fazla bileşen veya modül arasındaki etkileşimi kontrol etmek. Sistem parçalarının birlikte düzgün çalıştığından emin olmak. Bunun için de React Testing Library kullandım.

   // Form ve gönder butonunun entegrasyon testi örneği
   import { render, screen, fireEvent } from '@testing-library/react';
   import Form from './Form';
   
   test('form gönderildiğinde onSubmit doğru verilerle çağrılır', () => {
     const mockSubmit = jest.fn();
     render(<Form onSubmit={mockSubmit} />);
   
     const input = screen.getByLabelText(/Username:/i);
     const submitButton = screen.getByRole('button', { name: /Submit/i });
   
     fireEvent.change(input, { target: { value: 'testuser' } });
     fireEvent.click(submitButton);
   
     expect(mockSubmit).toHaveBeenCalledWith({ username: 'testuser' });
   });
   

3. E2E testleri: Bazı projelerde Cypress veya Playwright kullanarak gerçek tarayıcıda kullanıcı senaryolarını baştan sona test ettim. Bu, uygulamanın genel olarak beklendiği gibi çalıştığını doğrulamaya yardımcı olur.

   // Cypress ile E2E test örneği
   // cypress/integration/todo.spec.js
   describe('Todo Uygulaması', () => {
     it('yeni bir todo öğesi eklemeli', () => {
       cy.visit('/'); // Uygulama sayfasına git
   
       cy.get('.new-todo').type('Buy milk{enter}'); // Metin gir ve Enter'a bas
   
       cy.get('.todo-list li')
         .should('have.length', 1) // Öğelerin sayısını kontrol et
         .first()
         .should('have.text', 'Buy milk'); // İlk öğenin metnini kontrol et
     });
   });
   

4. Snapshot testi: Jest ile bileşenin yapısını yakalamak ve markup'ta istenmeyen değişiklikleri tespit etmek (örneğin, refaktörasyon sonrası).

   // Card bileşeni için snapshot testi örneği
   import renderer from 'react-test-renderer';
   import Card from './Card';
   
   test('Card doğru şekilde render edilir', () => {
     const tree = renderer
       .create(<Card title="Test Title">Test Content</Card>)
       .toJSON();
     expect(tree).toMatchSnapshot(); // Kaydedilen snapshot ile karşılaştır
   });
   

Testlerin geliştirme sürecinin önemli bir parçası olduğunu düşünüyorum, çünkü kod kalitesini korumaya, refaktörasyonu kolaylaştırmaya ve üretimde hata olasılığını azaltmaya yardımcı olurlar. Yeni fonksiyonlar geliştirirken veya hataları düzeltmeden önce testler yazıyorum (TDD yaklaşımı, uygun olduğunda).