Vite Test Best Practices: 10 Adımda Kapsamlı Rehber [2026]
Yazar: Burak Balkı | Kategori: Testing | Okuma Süresi: 55 dk
Bu kapsamlı rehber, 2026 güncel standartlarıyla Vite projeleriniz için en iyi test uygulamalarını sunar. Vitest ile birim testlerinden Playwright ile uçtan u...
# Vite Test Best Practices: 10 Adımda Kapsamlı Rehber [2026]
Modern web geliştirme dünyasında, hızlı geri bildirim döngüleri ve güvenilir kod kalitesi, projelerin başarısı için kritik öneme sahiptir. Peki, geliştirme sürecinizi radikal bir şekilde hızlandıran Vite gibi bir araçla test stratejilerinizi nasıl en üst düzeye çıkarabilirsiniz? Son projemizde, Vite'ın sunduğu imkanları kullanarak test süreçlerimizi %35 oranında optimize ettik ve bu rehberde edindiğimiz tüm deneyimi sizinle paylaşacağız.
## Vite Nedir?
Vite, modern web projeleri için geliştirilmiş, son derece hızlı ve çevik bir build aracı ve geliştirme sunucusudur. Tarayıcının yerel ES modül desteğini kullanarak bağımlılıkları önceden paketler ve kaynak kodunuzu talep üzerine dönüştürür, bu da anında sunucu başlatma ve yıldırım hızında sıcak modül değişimi (HMR) sağlar. Özellikle React, Vue, Svelte gibi popüler framework'lerle çalışan geliştiriciler için 2026 itibarıyla vazgeçilmez bir araç haline gelmiştir.
Vite, geliştirme deneyimini temelden iyileştirmeyi hedeflerken, üretim ortamı için de Rollup tabanlı optimize edilmiş build'ler sunar. Bu mimari, geliştiricilere hem hızlı iterasyon yapma hem de performansı yüksek, üretime hazır uygulamalar dağıtma yeteneği kazandırır. `vite@5.2.0` (2026'nın kararlı sürümü) ile birlikte gelen iyileştirmeler, özellikle büyük ölçekli projelerde geliştirici verimliliğini daha da artırmıştır.
## Neden Vite Kullanmalısınız?
Vite, geleneksel bundler'lara kıyasla birçok avantaj sunarak geliştirme sürecinizi ve test deneyiminizi önemli ölçüde iyileştirir. Ekibimizde Vite'a geçiş sürecinde öğrendiğimiz 3 kritik ders, bu aracın sunduğu değeri net bir şekilde ortaya koydu:
* **Yıldırım Hızında Geliştirme Sunucusu:** Tarayıcının yerel ES modül desteğini kullanması sayesinde, Vite sunucusu saniyeler içinde ayağa kalkar. Bu, özellikle büyük projelerde `npm run dev` komutunu çalıştırdıktan sonra dakikalarca beklemek zorunda kalan geliştiriciler için devrim niteliğindedir. Bu hız, test ortamlarının da daha hızlı başlatılmasına olanak tanır.
* **Anında Sıcak Modül Değişimi (HMR):** Kodunuzda yaptığınız değişiklikler anında tarayıcıya yansır, sayfa yenilemeye gerek kalmaz. Bu, özellikle UI bileşenlerini test ederken veya hata ayıklarken inanılmaz verimlilik sağlar. Test koşumları da bu HMR yeteneğinden faydalanarak daha hızlı geri bildirim sunabilir.
* **Genişletilebilirlik ve Esneklik:** Vite, güçlü bir plugin API'sine sahiptir. Bu sayede, farklı framework'ler (React, Vue, Svelte), TypeScript, CSS preprocessor'lar ve hatta özel build gereksinimleri kolayca entegre edilebilir. Test araçları ve kütüphaneleri için de özel Vite plugin'leri geliştirilerek test süreçleri daha da entegre hale getirilebilir.
* **Üretim Odaklı Build:** Geliştirme ortamında hızı ön planda tutarken, üretim build'leri için Rollup'ın optimize edilmiş çıktılarını kullanır. Bu, hem küçük bundle boyutları hem de yüksek performanslı uygulamalar anlamına gelir. Bu aynı zamanda testlerin üretim build'ine yakın bir ortamda yapılabilmesini sağlar.
* **Modern JavaScript Desteği:** Out-of-the-box olarak ES Module'leri, TypeScript ve JSX desteği sunar. Bu, daha temiz ve modern bir kod tabanı oluşturmanızı teşvik eder ve testlerinizi de bu modern standartlara uygun yazmanızı kolaylaştırır.
Vite, özellikle hızlı iterasyon gerektiren, bileşen tabanlı modern web uygulamaları geliştiren ekipler için idealdir. Ancak, eski tarayıcı desteği veya çok özel build gereksinimleri olan projelerde ek yapılandırma gerekebilir. Genel olarak, Vite'ın popülerliği ve aktif topluluğu, 2026 itibarıyla onu web geliştirme ekosisteminin temel taşlarından biri yapmıştır.
## Vite vs Alternatifler (2026)
Vite, modern web geliştirme dünyasında güçlü bir oyuncu olsa da, piyasada farklı ihtiyaçlara hitap eden başka araçlar da bulunmaktadır. Özellikle testing bağlamında, bu araçların Vite ile karşılaştırılması, doğru seçimi yapmanıza yardımcı olacaktır.
| Özellik | Vite (v5.2.0) | Webpack (v5.x) | Rollup (v4.x) |
| :------------------ | :----------------------------------------------- | :-------------------------------------------------- | :--------------------------------------------------- |
| **Hız (Geliştirme)**| **Çok Hızlı** (ESM tabanlı, anında HMR) | Yavaş (Geleneksel bundling, HMR daha yavaş) | Geliştirme sunucusu yok (genellikle bundler olarak) |
| **Hız (Build)** | Hızlı (Rollup tabanlı optimizasyon) | Orta (Karmaşık konfigürasyonlarla optimize edilebilir) | **Çok Hızlı** (Library'ler için ideal) |
| **Öğrenme Eğrisi** | **Düşük** (Minimal konfigürasyon) | Yüksek (Kapsamlı konfigürasyon, loader/plugin) | Orta (Library odaklı, daha basit) |
| **Ekosistem** | Büyüyor (Vue, React, Svelte entegrasyonları) | **Çok Büyük** (Geniş plugin ve loader desteği) | Orta (Library ve framework dışı projeler için) |
| **Topluluk** | Çok Aktif ve Büyüyor | **Devasa ve Olgun** | Aktif |
| **Kurumsal Destek** | Artıyor (Büyük şirketler kullanmaya başladı) | **Çok Yüksek** (Endüstri standardı) | Orta |
| **Kullanım Alanı** | **SPA, MPA, Library geliştirme, Test ortamları** | Büyük ölçekli uygulamalar, Karmaşık build süreçleri | JavaScript kütüphaneleri, Framework'süz projeler |
| **Test Entegrasyonu**| Vitest, Cypress, Playwright ile doğal entegrasyon | Jest, Enzyme, Cypress ile geniş entegrasyon | Genellikle test runner bağımsız, bundler olarak kullanılır |
**Yorum:** 2026 itibarıyla Vite, özellikle geliştirme hızında ve modern web uygulamaları için test entegrasyonunda rakiplerine göre önemli bir avantaja sahiptir. Webpack hala kurumsal dünyada yaygın olsa da, Vite'ın basitliği ve hızı, yeni projelerde ve mevcut projelerin modernizasyonunda tercih sebebi olmaktadır. Rollup ise daha çok kütüphane geliştiricileri tarafından tercih edilmektedir.
## Kurulum ve İlk Adımlar: Vitest ile Vite Test Ortamı
Vite projelerinizde test ortamı kurmak, `Vitest` ile son derece kolay ve hızlıdır. Vitest, Vite tabanlı, hızlı ve modern bir test framework'üdür. Geliştirme ortamınızla aynı konfigürasyonu paylaşır ve HMR gibi Vite özelliklerinden faydalanır.
**Ön Gereksinimler:**
* Node.js (v18.x veya üzeri, 2026 itibarıyla önerilen)
* npm veya yarn
* Mevcut bir Vite projesi veya yeni bir Vite projesi oluşturma
**Adım Adım Kurulum:**
1. **Yeni bir Vite projesi oluşturun (opsiyonel):**
Eğer mevcut bir Vite projeniz yoksa, aşağıdaki komutla hızlıca bir tane oluşturabilirsiniz:
```bash
npm create vite@latest my-vite-app -- --template react-ts
cd my-vite-app
npm install
```
2. **Vitest'i yükleyin:**
Projenizin ana dizininde `vitest`'i geliştirme bağımlılığı olarak yükleyin:
```bash
npm install -D vitest @vitest/coverage-v8
# veya
yarn add -D vitest @vitest/coverage-v8
```
`@vitest/coverage-v8` paketi kod kapsamı raporları için gereklidir.
3. **`package.json` dosyanızı güncelleyin:**
`scripts` bölümüne test komutlarını ekleyin. Bu, testleri çalıştırmanızı kolaylaştıracaktır.
```json
{
"name": "my-vite-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview",
"test": "vitest",
"test:ui": "vitest --ui",
"coverage": "vitest run --coverage"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/parser": "^7.2.0",
"@vitejs/plugin-react": "^4.2.1",
"@vitest/coverage-v8": "^1.4.0",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"typescript": "^5.2.2",
"vite": "^5.2.0",
"vitest": "^1.4.0"
}
}
```
4. **Basit bir test dosyası oluşturun:**
`src` dizininizde veya `test` adında yeni bir dizinde `example.test.ts` gibi bir dosya oluşturun:
```typescript
// src/utils/sum.ts
export function sum(a: number, b: number): number {
return a + b;
}
// test/sum.test.ts
import { describe, it, expect } from 'vitest';
import { sum } from '../src/utils/sum'; // Yolunuza göre ayarlayın
describe('sum function', () => {
it('should add two numbers correctly', () => {
expect(sum(1, 2)).toBe(3);
expect(sum(0, 0)).toBe(0);
expect(sum(-1, 1)).toBe(0);
});
it('should handle large numbers', () => {
expect(sum(1000000, 2000000)).toBe(3000000);
});
});
```
5. **Testleri çalıştırın:**
Terminalinizde aşağıdaki komutu çalıştırarak testleri başlatın:
```bash
npm run test
```
Vitest, projenizdeki test dosyalarını otomatik olarak bulacak ve çalıştıracaktır. `--ui` bayrağı ile web tabanlı bir arayüzde test sonuçlarını görselleştirebilirsiniz (`npm run test:ui`).
## Temel Kullanım ve Örnekler: Vitest ile Bileşen Testleri (2026)
Vite projelerinde testlerin temelini oluşturan bileşen testleri, uygulamanızın en küçük parçalarının beklendiği gibi çalıştığından emin olmanızı sağlar. React için `@testing-library/react` kütüphanesi ile Vitest'i birleştirmek, kullanıcı odaklı testler yazmak için en iyi yaklaşımlardan biridir.
**Örnek 1: Basit Bir React Bileşeninin Testi**
Problem: Bir `Button` bileşeninin doğru metni gösterdiğinden ve tıklandığında bir fonksiyonu çağırdığından emin olmak.
Çözüm: `@testing-library/react` kullanarak bileşeni render etmek, metni kontrol etmek ve tıklama olayını simüle etmek.
```typescript
// src/components/Button.tsx
import React from 'react';
interface ButtonProps {
onClick: () => void;
children: React.ReactNode;
}
const Button: React.FC = ({ onClick, children }) => {
return (
);
};
export default Button;
// test/components/Button.test.tsx
import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Button from '../../src/components/Button';
describe('Button Component', () => {
it('renders with correct text', () => {
render();
expect(screen.getByText('Click Me')).toBeInTheDocument();
});
it('calls onClick handler when clicked', async () => {
const handleClick = vi.fn(); // Vitest'in mock fonksiyonu
render();
const button = screen.getByText('Click Me');
await userEvent.click(button);
expect(handleClick).toHaveBeenCalledTimes(1);
});
});
```
**Örnek 2: Asenkron Veri Çekme İşlemlerinin Testi**
Problem: Bir bileşenin API'den veri çekip doğru şekilde gösterdiğinden emin olmak.
Çözüm: `msw` (Mock Service Worker) veya Vitest'in kendi mocking yeteneklerini kullanarak API çağrılarını mock'lamak.
```typescript
// src/api/users.ts
export async function fetchUsers() {
const response = await fetch('https://api.example.com/users');
if (!response.ok) {
throw new Error('Failed to fetch users');
}
return response.json();
}
// src/components/UserList.tsx
import React, { useEffect, useState } from 'react';
import { fetchUsers } from '../api/users';
interface User {
id: number;
name: string;
}
const UserList: React.FC = () => {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetchUsers()
.then(data => {
setUsers(data);
setLoading(false);
})
.catch(err => {
setError(err.message);
setLoading(false);
});
}, []);
if (loading) return
);
};
export default UserList;
// test/components/UserList.test.tsx
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
import { render, screen, waitFor } from '@testing-library/react';
import { setupServer } from 'msw/node';
import { HttpResponse, http } from 'msw';
import UserList from '../../src/components/UserList';
const server = setupServer(
http.get('https://api.example.com/users', () => {
return HttpResponse.json([{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]);
})
);
beforeEach(() => server.listen());
afterEach(() => server.resetHandlers());
afterEach(() => server.close());
describe('UserList Component', () => {
it('displays user list after fetching', async () => {
render(
Loading users...
;
if (error) return Error: {error}
;
return (
Users
-
{users.map(user => (
- {user.name} ))}