React Uygulamalarında Jest ile Unit Testler Nasıl Yazılır?

React, günümüzün en popüler ve güçlü JavaScript kütüphanelerinden biri olarak öne çıkıyor. React'i kullanarak web uygulamaları geliştirmek, kullanıcı deneyimini geliştirmek ve geliştiricilere kolay bir şekilde çalışma imkanı sunmak için harika bir yol sunar. Ancak, büyük ve karmaşık bir uygulama geliştirirken, uygulamanızın hala beklediğiniz gibi çalışıp çalışmadığını doğrulamak ve hataları erken aşamada tespit etmek için testlere ihtiyaç duyarsınız.

React uygulamalarını test etmek için Jest, popüler bir JavaScript test çerçevesidir. Jest, testlerinizi yazmayı kolaylaştıran ve hızlı bir şekilde çalıştırmanıza yardımcı olan açık kaynaklı bir araçtır. Bu makalede, Jest'i React projenize nasıl kuracağınızı ve basit bir birim testi nasıl yazacağınızı öğreneceksiniz.

Adım 1: Jest Kurulumu

React projesinde Jest kullanmaya başlamak için aşağıdaki adımları takip edebilirsiniz:

Proje Dizininde Jest'i Yükleyin: Proje dizininizde terminali açın ve Jest'i yüklemek için aşağıdaki komutu kullanın:
```
npm install --save-dev jest
```
package.json Dosyasını Güncelleyin: Jest'i yükledikten sonra, package.json dosyanızdaki "scripts" bölümüne bir test komutu ekleyin:
```
"scripts": {
  "test": "jest"
}
```

Jest Yapılandırma Dosyası Oluşturun (Opsiyonel): Projeniz özel Jest ayarları gerektiriyorsa, bir Jest yapılandırma dosyası (jest.config.js) oluşturabilirsiniz:

module.exports = {
  testEnvironment: 'jest-environment-jsdom',
  setupFilesAfterEnv: ['<rootDir>/.jest/setup-tests.js'],
  moduleNameMapper: {
    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/.jest/mocks/fileMock.js',
    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
  },
}

Şimdi ise gerekli olan şu paketleri kurun:
```
npm install @babel/core @babel/preset-env @babel/preset-react babel-jest identity-obj-proxy jest-environment-jsdom -D
```
Bu paketler, projenizi geliştirmek ve test etmek için gerekli olan çeşitli araçları ve bileşenleri içerir. İşte bu paketlerin her birinin kısaca ne işe yaradığı:
1. @babel/core: Babel, JavaScript kodunu daha eski tarayıcılarda çalışabilen daha yeni bir JavaScript sürümüne dönüştürmek için kullanılır. Bu, projenizde modern JavaScript özelliklerini kullanmanıza ve hedef kitlenizin daha eski tarayıcılarda bile çalışmasını sağlar.
2. @babel/preset-env: Babel için birçok modern JavaScript özelliğini eski tarayıcılarda çalışacak şekilde dönüştürmek için kullanılan bir "preset" (ayar)dir. Projenizin hedef kitlesi için uygun dönüşümleri otomatik olarak yapılandırır.
3. @babel/preset-react: Babel ile kullanıldığında, React bileşenlerinin JSX sözdizimini eski tarayıcılarda çalışabilen JavaScript koduna dönüştürmek için kullanılır.
4. babel-jest: Jest ile birlikte kullanıldığında, Jest'in testlerinizi çalıştırırken Babel'i kullanmasını sağlar. Bu, Jest testlerinin modern JavaScript ve JSX kodunu anlamasına yardımcı olur.
5. identity-obj-proxy: Bu, Jest ile birlikte kullanılan bir jest-transformer'dır. Jest testlerinde CSS modülleri gibi stil modülleri için varsayılan bir kimlik eşlemesi sağlar.
6. jest-environment-jsdom: Jest testlerini çalıştırırken tarayıcı benzeri bir ortam sağlar. Bu, React uygulamalarını tarayıcıya benzer bir çevrede test etmek için kullanılır.
Yukarıdaki paketler, bir JavaScript projesinde React ve Jest gibi teknolojileri kullanırken, kodu işlemek, test etmek ve uyumlu hale getirmek için gereklidir. Bu paketlerin çoğu, özellikle modern JavaScript ve JSX kullanırken, projenizin verimli bir şekilde çalışmasına ve test edilmesine yardımcı olur.
@testing-library/jest-dom ve @testing-library/reactkurulumu gerçekleştirin:
```
npm i @testing-library/jest-dom @testing-library/react -D
```
@testing-library/react:
- Bu kütüphane, React uygulamalarını test etmek için özel olarak tasarlanmış bir araç setidir. Bu araçlar, React bileşenlerini ekranda render etmek, kullanıcı etkileşimlerini simüle etmek ve bu bileşenlerin ekran üzerinde nasıl göründüğünü sorgulamak için kullanılır.
- React Testing Library, kullanıcıların uygulamanızı kullanırken karşılaştıkları şekilde bileşenlerin davranışlarını ve görünümlerini test etmeyi teşvik eder. Bu, kullanıcı merkezli testlerin yazılmasını ve uygulamanın kullanılabilirliğinin kontrol edilmesini kolaylaştırır.
- Özellikle render, fireEvent, screen, ve waitFor gibi React Testing Library'nin fonksiyonları, bileşenlerin test edilmesini basit ve etkili hale getirir.
@testing-library/jest-dom:
- Bu kütüphane, Jest testlerinde kullanılmak üzere tasarlanmış ek bir kütüphanedir. Jest'in doğal beklenti (expectation) fonksiyonlarına (expect) ek olarak, bu kütüphane, jest testlerinin daha açık ve anlaşılır hale gelmesini sağlayan bir dizi jest eklentisi ekler.
- Jest DOM eklentileri, özellikle kullanıcı arabirimi testlerinde, ekrandaki elementlerin nasıl davranması gerektiğini ve nasıl görünmesi gerektiğini daha açık bir şekilde ifade etmek için kullanılır. Örneğin, toBeInTheDocument, toHaveTextContent, toHaveAttribute, ve toBeVisible gibi fonksiyonlar, ekrandaki elementlerin özelliklerini ve davranışlarını doğrulamak için kullanılır.
- Bu eklentiler, testlerin daha açık ve okunabilir olmasına yardımcı olur ve ekranın beklenen şekilde göründüğünü kontrol etmek için kullanılır.
Ana dizine .jest adında bir klasör oluşturun ve bu klasör içerisinde setup-tests.js adında bir dosya oluşturun. Bu dosya içine jest-dom kütüphanesini import edin:
```
import '@testing-library/jest-dom'
```
.jest klasörünün içerisine mocks klasörü oluşturun ve içerisine fileMock.js adında bir dosya oluşturun. İçerisine şu kodu yazın:
```
module.exports = 'test-file-stub'
```

Şimdi ise ana dizine babel.config.jsondosyası açın ve içerisine şu kodları yapıştırın:

{
    "presets": [
      ["@babel/preset-env", { "targets": { "esmodules": true } }],
      ["@babel/preset-react", { "runtime": "automatic" }]
    ]
  }

Son olarak package.jsondosyasında şu değişikliği yapalım:
```
"type": "commonjs"
```

Adım 2: Basit Bir Birim Testi Yazma

Öncelikle, bir App.jsx bileşeni oluşturalım:

// App.jsx
import "./App.css";

function App() {
  return (
    <>
      <h1>Learn React</h1>
      <p>Lorem ipsum dolor sit amet consectetur,
 adipisicing elit. Omnis nostrum non voluptatibus ratione reiciendis quae animi voluptas eveniet cum facilis. </p>
    </>
  );
}

export default App;

Sonrasında App.test.js dosyası oluşturalım ve App.jsx bileşenini test etmek için Jest ile birim testler yazalım:

App.test.js
import { render, screen } from "@testing-library/react";

import App from "./App";

test("renders learn react h1 tag", () => {
  render(<App />);
  const linkElement = screen.getByText(/Learn React/i);
  expect(linkElement).toBeInTheDocument();
});

Bu kod, bir Jest testi yazıyor ve bu testte "App" adlı bir React bileşeninin belirli bir davranışını kontrol ediyor. İşte bu kodun adım adım açıklamaları:

import { render, screen } from "@testing-library/react";: Bu satır, React Testing Library'nin render ve screen fonksiyonlarını projeye içe aktarır. Bu fonksiyonlar, React bileşenlerini render etmek ve ekrandaki elementleri sorgulamak için kullanılır.
import App from "./App";: Bu satır, test edilecek "App" adlı React bileşenini içe aktarır. "App" bileşeni, uygulamanın ana bileşenini temsil eder.
test("renders learn react h1 tag", () => { ... });: Bu kod, bir Jest testini başlatır. Testin adı "renders learn react h1 tag" olarak belirlenmiştir.
render(<App />);: Bu satır, "App" bileşenini ekranda render eder. Bu, uygulamanızın test edilen bileşenini simüle eder ve testler sırasında bu bileşenin nasıl göründüğünü ve nasıl davrandığını kontrol etmenizi sağlar.
const linkElement = screen.getByText(/Learn React/i);: Bu satır, ekrandaki metin içeriğinde "Learn React" ifadesini içeren bir elementi bulmak için screen.getByText fonksiyonunu kullanır. Bu elementi linkElement adlı bir değişkene atar.
expect(linkElement).toBeInTheDocument();: Bu satır, linkElement adlı elementin ekran üzerinde göründüğünü doğrular. Eğer "Learn React" metni içeren bir h1 etiketi bulunursa, bu ifade doğru döner ve test başarılı olur. Aksi takdirde, test başarısız olur.

Bu test, "App" bileşeninin başlık etiketi (h1) içinde "Learn React" metni içerip içermediğini kontrol eder. Eğer bu metin h1 etiketi içerisinde mevcutsa, test başarılı olur ve aksi halde başarısız olur. Bu, bir React bileşeninin belirli bir davranışını kontrol etmek için yazılan basit bir Jest testidir.

Bu testleri çalıştırmak için aşağıdaki komutu kullanabilirsiniz:

npm test

Jest, testleri algılayacak, çalıştıracak ve sonuçları raporlayacaktır. Başarılı bir test sonucunda şuna benzer bir çıktı görmelisiniz:

PASS  src/App.test.js
  √ renders learn react h1 tag (27 ms)

Test Suites: 1 passed, 1 total                                         
Tests:       1 passed, 1 total                                         
Snapshots:   0 total
Time:        1.582 s, estimated 2 s
Ran all test suites.

Bu basit birim test ile Jest'i nasıl kullanacağınızı öğrenebilirsiniz. Daha karmaşık test senaryoları için Jest dökümantasyonunu inceleyebilirsiniz.

React projelerinizde Jest kullanarak uygulamanızı test etmek, uygulamanızın kalitesini artırmak ve güvenilirliğini sağlamak için mükemmel bir yoldur. Bu makale, Jest'i React projenize nasıl entegre edeceğinizi ve temel bir birim testi nasıl yazacağınızı anlatmıştır. İyi şanslar ve testlerinizin başarılı olmasını dilerim!