React Uygulamalarını Jest ile Test Etmeye Yönelik Pratik Bir Kılavuz
React Uygulamalarını Test Etmeye Giriş
Test, yazılım geliştirme yaşam döngüsünün kritik bir parçasıdır ve uygulamanızın beklendiği gibi davrandığından emin olur ve gerilemeleri önler. Kullanıcı arayüzleri oluşturmak için popüler bir kütüphane olan React, sağlam bir test stratejisinden büyük ölçüde fayda sağlar. Facebook tarafından geliştirilen bir JavaScript test çerçevesi olan Jest, basitliği, hızı ve güçlü özellikleri nedeniyle React uygulamalarını test etmek için yaygın olarak kullanılır.
React Testleri İçin Neden Jest Kullanılmalı?
Jest, React geliştiricileri için birkaç avantaj sunan kapsamlı bir test çözümüdür:
- Sıfır Yapılandırma: Jest, minimal kurulumla kutudan çıkar çalışır, böylece hızlı bir şekilde test etmeye başlamayı kolaylaştırır.
- Hızlı ve Verimli: Jest, testleri paralel olarak çalıştırarak performansı optimize eder ve test yürütme süresini azaltır.
- Anlık Görüntü Testi: Jest, React bileşenlerinin anlık görüntülerini yakalayabilir, böylece zaman içinde değişiklikleri takip etmenize yardımcı olur.
- Taklit Özellikleri: Jest, bileşenleri izole etmenize ve bağımsız olarak test etmenize olanak tanıyan güçlü taklit özellikleri sunar.
React İçin Jest Kurulumu
Bir React uygulamasında Jest ile başlamak için aşağıdaki adımları izleyin:
1. Jest ve İlgili Paketleri Yükleyin
Create React App kullanıyorsanız, Jest zaten dahil edilmiştir. Aksi takdirde, manuel olarak yükleyebilirsiniz:
npm install --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom2. Jest’i Yapılandırın
Jest ayarlarını özelleştirmek için proje kökünüzde bir jest.config.js dosyası oluşturun:
module.exports = {
testEnvironment: 'jsdom',
setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
moduleNameMapper: {
'\.(css|less|scss|sass)$': 'identity-obj-proxy',
},
};İlk Testinizi Yazma
Bir React bileşeni için basit bir test yazalım. Temel bir Button bileşenini ele alalım:
// Button.js
import React from 'react';
const Button = ({ label, onClick }) => {
return (
<button onClick={onClick}>
{label}
</button>
);
};
export default Button;
Şimdi, bu bileşen için bir test yazalım:
// Button.test.js
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';
test(‘düğmeyi doğru etiketle render eder’, () => {
render(<Button label=“Click Me” />);
const buttonElement = screen.getByText(/click me/i);
expect(buttonElement).toBeInTheDocument();
});
test(‘düğme tıklandığında onClick işleyicisini çağırır’, () => {
const handleClick = jest.fn();
render(<Button label=“Click Me” onClick={handleClick} />);
fireEvent.click(screen.getByText(/click me/i));
expect(handleClick).toHaveBeenCalledTimes(1);
});
Gerçek Dünya Kullanım Durumları
Jest ile React uygulamalarını test etmek, çeşitli gerçek dünya senaryolarında uygulanabilir:
1. Kullanıcı Etkileşimlerini Test Etme
Düğmelere tıklama veya formları doldurma gibi kullanıcı etkileşimlerinin beklendiği gibi çalıştığından emin olun. Örneğin, bir giriş formunu test etme:
test('doğru kimlik bilgileriyle formu gönderir', () => {
const handleSubmit = jest.fn();
render(
<form onSubmit={handleSubmit}>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<button type="submit">Submit</button>
</form>
);
fireEvent.change(screen.getByPlaceholderText(/email/i), {
target: { value: '[email protected]' },
});
fireEvent.change(screen.getByPlaceholderText(/password/i), {
target: { value: 'password123' },
});
fireEvent.submit(screen.getByText(/submit/i));
expect(handleSubmit).toHaveBeenCalled();
});2. API Çağrılarını Test Etme
Veri getirmeyi nasıl ele aldığınızı test etmek için API çağrılarını taklit edin. Örneğin, kullanıcı verilerini getiren bir bileşeni test etme:
import axios from 'axios';
jest.mock(‘axios’);
test(‘kullanıcı verilerini getirir ve görüntüler’, async () => {
const mockData = { name: ‘John Doe’, email: ‘[email protected]’ };
axios.get.mockResolvedValue({ data: mockData });
render(<UserProfile />);
expect(await screen.findByText(/john doe/i)).toBeInTheDocument();
expect(axios.get).toHaveBeenCalledWith(‘/api/user’);
});
Gelişmiş Test Teknikleri
Testlerinizi bir sonraki seviyeye taşımak için bu gelişmiş teknikleri göz önünde bulundurun:
1. Anlık Görüntü Testi
Anlık görüntü testi, bir bileşenin render edilen çıktısını yakalamanıza ve daha önce kaydedilmiş bir anlık görüntüyle karşılaştırmanıza olanak tanır. Bu, beklenmeyen değişiklikleri tespit etmenize yardımcı olur:
test('anlık görüntüyle eşleşir', () => {
const tree = renderer.create(<Button label="Click Me" />).toJSON();
expect(tree).toMatchSnapshot();
});2. Özel Hookları Test Etme
Özel hooklar, hooku kullanan bir bileşen oluşturarak ve ardından bileşeni test ederek test edilebilir:
// useCounter.js
import { useState } from 'react';
export const useCounter = (initialValue = 0) => {
const [count, setCount] = useState(initialValue);
const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);
return { count, increment, decrement };
};
// useCounter.test.js
import { renderHook, act } from ‘@testing-library/react-hooks’;
import { useCounter } from ‘./useCounter’;
test(‘sayacı artırmalı’, () => {
const { result } = renderHook(() => useCounter());
act(() => {
result.current.increment();
});
expect(result.current.count).toBe(1);
});
React ile Jest Kullanımı için En İyi Uygulamalar
Testlerinizin etkili ve sürdürülebilir olmasını sağlamak için bu en iyi uygulamaları izleyin:
- Testleri İzole Edin: Her test, hata ayıklamayı kolaylaştırmak için tek bir davranış veya bileşene odaklanmalıdır.
- Açıklayıcı Test Adları Kullanın: Açıklayıcı ve net test adları, her testin neyi doğruladığını anlamanıza yardımcı olur.
- Harici Bağımlılıkları Taklit Edin: Bileşenlerinizi harici hizmetlerden izole etmek için Jest’in taklit özelliklerini kullanın.
- Testleri Hızlı Tutun: Testlerin hızlı çalışmasını ve hızlı geri bildirim sağlamasını sağlamak için testlerinizde yavaş işlemlerden kaçının.
- Anlık Görüntüleri Düzenli Olarak Güncelleyin: Bileşenlerde kasıtlı değişiklikler yaparken anlık görüntüleri gözden geçirin ve güncelleyin.
Sonuç
Jest ile React uygulamalarını test etmek, bileşenlerinizin güvenilir ve beklendiği gibi davrandığından emin olmak için güçlü bir yoldur. Bu kılavuzda özetlenen pratik örnekleri ve en iyi uygulamaları izleyerek, hataları erken yakalayan ve uygulamanızın genel kalitesini artıran sağlam bir test stratejisi oluşturabilirsiniz. Bugün React projelerinize Jest’i entegre etmeye başlayın ve iyi test edilmiş bir kod tabanının avantajlarını deneyimleyin.
