React uygulamaları geliştirirken, bileşenlerin doğru çalıştığından emin olmak için testler yazmak önemlidir. Jest ve React Testing Library, React bileşenlerinin test edilmesi için popüler araçlardır. Jest, Facebook tarafından geliştirilen bir JavaScript test çerçevesidir. React Testing Library ise, React uygulamalarının test edilmesi için özel olarak tasarlanmış bir kütüphanedir. Bu araçlarla, bileşenlerin doğru çalıştığından emin olabilir ve hataları erken tespit edebilirsiniz.
Aşağıda, Jest ve React Testing Library kullanarak React bileşenlerini test etme işlemi için bir örnek verilmiştir:
import React from ‘react’;
import { render, screen } from ‘@testing-library/react’;
import userEvent from ‘@testing-library/user-event’;
import Button from ‘./Button’;
describe('Button', () => {
test('renders a button with the given label', () => {
const label = 'Click me';
render(<Button label={label} />);
const buttonElement = screen.getByRole('button', { name: label });
expect(buttonElement).toBeInTheDocument();
});
test('calls the onClick function when the button is clicked', () => {
const onClick = jest.fn();
const label = 'Click me';
render(<Button label={label} onClick={onClick} />);
const buttonElement = screen.getByRole('button', { name: label });
userEvent.click(buttonElement);
expect(onClick).toHaveBeenCalledTimes(1);
});
});
Bu örnekte, Button adlı bir bileşen test ediliyor. İlk test, bileşenin doğru bir şekilde render edilip edilmediğini kontrol ediyor. İkinci test, bileşenin onClick işlevini doğru bir şekilde çağırdığını kontrol ediyor.
Testleri çalıştırmak için terminalde aşağıdaki komut kullanılabilir:
bash
npm test
Bu komut, Jest tarafından tespit edilen tüm testleri çalıştıracaktır.
Bu örnek, Jest ve React Testing Library kullanarak React bileşenlerini test etme işlemini göstermektedir. Bu araçlar, bileşenlerin doğru çalıştığından emin olmanıza ve uygulamanızda hataların erken tespit edilmesine yardımcı olabilir.