React UI'sunu Jest ve Testing Library Ile Test Etmek

Adı : React UI'sunu Jest ve Testing Library Ile Test Etmek

React UI'larını Jest ve Testing Library ile Test Etmek

React, modern web uygulama geliştirme sürecinde popüler bir JavaScript kütüphanesidir. Bu kütüphane, bileşen tabanlı bir yaklaşımla kullanıcı arayüzlerini oluşturmak için tasarlanmıştır. Her ne kadar React uygulamaları geliştirmek hızlı ve kolay olsa da, bu uygulamaları test etmek önemlidir. Test, geliştirdiğimiz kodun işlevselliğini doğrulamak ve hataları tespit etmek için kullanılır. Jest ve Testing Library, React UI'larını test etmek için iki popüler araçtır. Bu yazıda, React UI'larını Jest ve Testing Library ile nasıl test edeceğimizi öğreneceğiz.

### Jest ve Testing Library Nedir?

[Jest](https://jestjs.io/) JavaScript ve React uygulamaları için bir test çerçevesidir. Jest, JavaScript'e özgü Assertions (Doğrulamalar) sağlar ve aynı zamanda özel kütüphanelerin olduğu assertions listesine de erişebilir. Jest, test dosyalarının otomatik olarak algılanmasını sağlar ve her bir testi ayrı ayrı gerçekleştirme yeteneğine sahiptir.

[Testing Library](https://testing-library.com/) ise jest'in yanında kullanılan bir başka test kütüphanesidir. Bu kütüphane, kullanıcıların uygulamanızla nasıl etkileşime geçeceğini ve nasıl kullanacağını modellemeye yardımcı olur. Böylece, uygulamanın gerçek dünya senaryolarında nasıl davrandığını test edebilirsiniz. Kullanıcı tanımlı işlevleri ve React bileşenlerini test etmek için özel seçiciler ve fonksiyonlar sunar.

### React UI'su Nasıl Test Edilir?

React UI'larını Jest ve Testing Library ile test etmek için aşağıdaki adımları takip edebilirsiniz:

1. Jest Kütüphanesinin Yüklenmesi: İlk olarak, testleri çalıştırabilmek için Jest kütüphanesini projenize eklemeniz gerekmektedir. Bunun için aşağıdaki komutu kullanabilirsiniz:

```bash
npm install --save-dev jest
```

2. React Component'inin Oluşturulması: Test etmek istediğiniz React bileşenini oluşturmanız gerekmektedir. Örneğin, aşağıdaki gibi bir React bileşeni oluşturduğunuzu düşünelim:

```jsx
// Button.js
import React from 'react';

const Button = ({ label }) => {
return {label};
};

export default Button;
```

3. Test Dosyasının Oluşturulması: Jest, test dosyalarını algılar ve otomatik olarak çalıştırır. Bu nedenle, test dosyası için özel bir klasör oluşturun. Örneğin, `__tests__` adında bir klasör oluşturun ve içine yeni bir dosya oluşturun. Adını `Button.test.js` olarak ayarlayabilirsiniz.

4. React Component'inin Test Edilmesi: Test dosyasını açın ve aşağıdaki gibi Jest ve Testing Library öğelerini içe aktarın:

```jsx
// Button.test.js
import React from 'react';
import { render } from '@testing-library/react';
import Button from '../Button';

test('renders button with the correct label', () => {
const { getByText } = render();
const buttonElement = getByText(/Click me/i);
expect(buttonElement).toBeInTheDocument();
});
```

Bu örnekte, `render` fonksiyonu aracılığıyla React bileşenini test ediyoruz. Testimiz, `label` prop'unu alarak düğmenin doğru bir şekilde render edilip edilmediğini kontrol ediyor.

5. Testin Yürütülmesi: Testleri yürütmek için aşağıdaki komutu kullanabilirsiniz:

```bash
npm test
```

Bu komut jest'i başlatacak ve tüm test dosyalarınızı otomatik olarak algılayacaktır.

Yukarıda açıklanan adımları takip ederek Jest ve Testing Library kullanarak React UI'larınızı test edebilirsiniz.

### Örnekler

Aşağıda, Jest ve Testing Library ile React UI'larının nasıl test edileceğine dair farklı örnekler bulunmaktadır:

1. Bileşenin Görüntülenip Görüntülenmediğini Kontrol Etme:

Bu örnek, bir bileşenin doğru bir şekilde görüntülenip görüntülenmediğini kontrol etmek için kullanılabilir. Örneğin, aşağıdaki gibi bir Card bileşenimiz olduğunu düşünelim:

```jsx
// Card.js
import React from 'react';

const Card = ({ title, description }) => {
return (

{title}

{description}

);
};

export default Card;
```

Card bileşenini test etmek için aşağıdaki gibi bir test oluşturabiliriz:

```jsx
// Card.test.js
import React from 'react';
import { render } from '@testing-library/react';
import Card from '../Card';

test('renders card with the correct title and description', () => {
const title = 'Example Title';
const description = 'Example Description';
const { getByText } = render();
const titleElement = getByText(/Example Title/i);
const descriptionElement = getByText(/Example Description/i);
expect(titleElement).toBeInTheDocument();
expect(descriptionElement).toBeInTheDocument();
});
```

Bu test, Card bileşeninin doğru bir şekilde başlık ve açıklamayı içerdiğini kontrol edecektir.

2. Bileşene Tıklama İşlemi Ekleme:

Bu örnek, bir bileşene tıklanabilirliği eklemek için kullanılabilir. Örneğin, aşağıdaki gibi bir Button bileşenimiz olduğunu düşünelim:

```jsx
// Button.js
import React, { useState } from 'react';

const Button = ({ label }) => {
const [count, setCount] = useState(0);

const handleClick = () => {
setCount(count + 1);
};

return (

{label}

Count: {count}