## Analogi Sederhana Bayangin kamu lagi ngecek kualitas produk di pabrik. **Jest** itu kayak inspektor yang teliti tapi lambat - dia ngecek satu-satu dengan detail, butuh waktu setup lama dan tiap inspection lumayan lama. **Vitest** kayak inspektor dengan scanner super cepat - dia langsung tau produk mana yang berubah, cuma ngecek yang perlu dicek, dan langsung kasih hasil. Plus, scanner-nya udah built-in sama production line kamu (Vite), jadi gak perlu setup tambahan. ## Kenapa Vitest Ada? Problem yang sering muncul di testing modern JavaScript: **Problem 1: Jest Lambat** ```bash # Jest di large project $ npm test Setting up test environment... (10s) Running tests... (45s) Total: 55 detik # Terlalu lambat buat development workflow! ``` **Problem 2: ESM Support Ribet** ```javascript // Jest butuh config yang complex buat ESM // jest.config.js module.exports = { transform: { '^.+\\.tsx?$': 'ts-jest' }, extensionsToTreatAsEsm: ['.ts', '.tsx'], // More config... } ``` **Problem 3: Vite Config Duplication** ```javascript // vite.config.ts - build config // jest.config.js - test config // Maintain 2 config sekaligus, susah sync! ``` **Solution: Vitest** ```bash # Vitest $ npm test Running tests... (2s) # Instant! # Zero config kalau kamu udah punya Vite # Pakai Vite config yang sama # Native ESM support # Smart test re-runs ``` ## Vitest vs Alternatives ### Vitest vs Jest | Aspek | Vitest | Jest | |-------|--------|------| | Speed | ⚡⚡⚡ Blazing | ⚡ Good | | Setup | Zero (with Vite) | Manual config | | ESM Support | Native | Experimental | | TypeScript | Built-in | Needs ts-jest | | Watch Mode | Smart & fast | Good | | Vite Integration | Perfect | | | Bundle Size | Small | Larger | ### Vitest vs Other Frameworks | Aspek | Vitest | Mocha | AVA | |-------|--------|-------|-----| | API | Jest-like | Different | Different | | Speed | Fastest | Good | Fast | | Setup | Easy | Manual | Manual | | Migration | Easy from Jest | Hard | Hard | | Ecosystem | Growing | Mature | Smaller | **Kapan Pakai Vitest?** - Lagi pakai Vite (perfect match!) - Butuh speed (development workflow) - Project TypeScript/ESM modern - Mau API yang Jest-compatible (migrasi gampang) - Suka fast feedback loops **Kapan TIDAK Pakai Vitest?** - Gak pakai Vite (overhead-nya kurang worth it) - Udah punya Jest setup besar (kalau berjalan lancar) - Butuh plugin/ecosystem Jest yang spesifik - Team belum familiar sama Vite ## Setup Guide (3 Menit) ### Step 1: Install ```bash npm install -D vitest ``` ### Step 2: Add Test Script ```json // package.json { "scripts": { "test": "vitest", "test:ui": "vitest --ui", "test:coverage": "vitest --coverage" } } ``` ### Step 3: Optional Config (kalau perlu) ```typescript // vitest.config.ts import { defineConfig } from 'vitest/config' export default defineConfig({ test: { globals: true, // Pakai global test/expect environment: 'jsdom', // Buat React/DOM testing setupFiles: './test/setup.ts', coverage: { provider: 'v8', reporter: ['text', 'html'] } } }) ``` Udah gitu aja! Kalau kamu punya `vite.config.ts`, Vitest otomatis pakai config itu. ## Real-World Example: Testing React Todo App Scenario: Test Todo app components dan business logic. ### 1. Utility Functions Test ```typescript // utils/todo.ts export function filterTodos( todos: Todo[], filter: 'all' | 'active' | 'completed' ) { if (filter === 'active') { return todos.filter(t => !t.completed) } if (filter === 'completed') { return todos.filter(t => t.completed) } return todos } export function getTodoStats(todos: Todo[]) { return { total: todos.length, active: todos.filter(t => !t.completed).length, completed: todos.filter(t => t.completed).length } } ``` ```typescript // utils/todo.test.ts import { describe, it, expect } from 'vitest' import { filterTodos, getTodoStats } from './todo' describe('filterTodos', () => { const todos = [ { id: '1', text: 'Task 1', completed: false }, { id: '2', text: 'Task 2', completed: true }, { id: '3', text: 'Task 3', completed: false } ] it('returns all todos when filter is "all"', () => { const result = filterTodos(todos, 'all') expect(result).toHaveLength(3) }) it('returns only active todos when filter is "active"', () => { const result = filterTodos(todos, 'active') expect(result).toHaveLength(2) expect(result.every(t => !t.completed)).toBe(true) }) it('returns only completed todos when filter is "completed"', () => { const result = filterTodos(todos, 'completed') expect(result).toHaveLength(1) expect(result.every(t => t.completed)).toBe(true) }) }) describe('getTodoStats', () => { it('calculates correct stats', () => { const todos = [ { id: '1', text: 'Task 1', completed: false }, { id: '2', text: 'Task 2', completed: true } ] const stats = getTodoStats(todos) expect(stats).toEqual({ total: 2, active: 1, completed: 1 }) }) it('handles empty array', () => { const stats = getTodoStats([]) expect(stats).toEqual({ total: 0, active: 0, completed: 0 }) }) }) ``` ### 2. API Functions Test (with Mocking) ```typescript // api/todos.ts export async function fetchTodos() { const response = await fetch('/api/todos') if (!response.ok) { throw new Error('Failed to fetch todos') } return response.json() } export async function createTodo(text: string) { const response = await fetch('/api/todos', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text }) }) return response.json() } ``` ```typescript // api/todos.test.ts import { describe, it, expect, vi, beforeEach } from 'vitest' import { fetchTodos, createTodo } from './todos' // Mock fetch globally global.fetch = vi.fn() describe('Todo API', () => { beforeEach(() => { vi.clearAllMocks() }) describe('fetchTodos', () => { it('fetches todos successfully', async () => { const mockTodos = [ { id: '1', text: 'Test', completed: false } ] global.fetch.mockResolvedValueOnce({ ok: true, json: async () => mockTodos }) const todos = await fetchTodos() expect(fetch).toHaveBeenCalledWith('/api/todos') expect(todos).toEqual(mockTodos) }) it('throws error on failed fetch', async () => { global.fetch.mockResolvedValueOnce({ ok: false }) await expect(fetchTodos()).rejects.toThrow('Failed to fetch todos') }) }) describe('createTodo', () => { it('creates todo successfully', async () => { const newTodo = { id: '1', text: 'New Task', completed: false } global.fetch.mockResolvedValueOnce({ ok: true, json: async () => newTodo }) const result = await createTodo('New Task') expect(fetch).toHaveBeenCalledWith( '/api/todos', expect.objectContaining({ method: 'POST', body: JSON.stringify({ text: 'New Task' }) }) ) expect(result).toEqual(newTodo) }) }) }) ``` ### 3. React Component Test ```typescript // components/TodoItem.tsx interface TodoItemProps { todo: Todo onToggle: (id: string) => void onDelete: (id: string) => void } export function TodoItem({ todo, onToggle, onDelete }: TodoItemProps) { return (

onToggle(todo.id)} aria-label={`Toggle ${todo.text}`} /> {todo.text}

) } ``` ```typescript // components/TodoItem.test.tsx import { describe, it, expect, vi } from 'vitest' import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { TodoItem } from './TodoItem' describe('TodoItem', () => { const mockTodo = { id: '1', text: 'Test Todo', completed: false } it('renders todo text', () => { render( ) expect(screen.getByText('Test Todo')).toBeInTheDocument() }) it('calls onToggle when checkbox clicked', async () => { const handleToggle = vi.fn() const user = userEvent.setup() render( ) const checkbox = screen.getByRole('checkbox') await user.click(checkbox) expect(handleToggle).toHaveBeenCalledWith('1') }) it('calls onDelete when delete button clicked', async () => { const handleDelete = vi.fn() const user = userEvent.setup() render( ) const deleteButton = screen.getByText('Delete') await user.click(deleteButton) expect(handleDelete).toHaveBeenCalledWith('1') }) it('applies completed class when todo is completed', () => { const completedTodo = { ...mockTodo, completed: true } render( ) const text = screen.getByText('Test Todo') expect(text).toHaveClass('completed') }) }) ``` ### 4. Custom Hook Test ```typescript // hooks/useTodos.ts import { useState } from 'react' export function useTodos() { const [todos, setTodos] = useState([]) function addTodo(text: string) { const newTodo = { id: Date.now().toString(), text, completed: false } setTodos(prev => [...prev, newTodo]) } function toggleTodo(id: string) { setTodos(prev => prev.map(todo => todo.id === id ? { ...todo, completed: !todo.completed } : todo ) ) } function deleteTodo(id: string) { setTodos(prev => prev.filter(todo => todo.id !== id)) } return { todos, addTodo, toggleTodo, deleteTodo } } ``` ```typescript // hooks/useTodos.test.ts import { describe, it, expect } from 'vitest' import { renderHook, act } from '@testing-library/react' import { useTodos } from './useTodos' describe('useTodos', () => { it('starts with empty todos', () => { const { result } = renderHook(() => useTodos()) expect(result.current.todos).toEqual([]) }) it('adds todo', () => { const { result } = renderHook(() => useTodos()) act(() => { result.current.addTodo('New Task') }) expect(result.current.todos).toHaveLength(1) expect(result.current.todos[0].text).toBe('New Task') expect(result.current.todos[0].completed).toBe(false) }) it('toggles todo completion', () => { const { result } = renderHook(() => useTodos()) act(() => { result.current.addTodo('Task') }) const todoId = result.current.todos[0].id act(() => { result.current.toggleTodo(todoId) }) expect(result.current.todos[0].completed).toBe(true) act(() => { result.current.toggleTodo(todoId) }) expect(result.current.todos[0].completed).toBe(false) }) it('deletes todo', () => { const { result } = renderHook(() => useTodos()) act(() => { result.current.addTodo('Task 1') result.current.addTodo('Task 2') }) expect(result.current.todos).toHaveLength(2) const todoId = result.current.todos[0].id act(() => { result.current.deleteTodo(todoId) }) expect(result.current.todos).toHaveLength(1) expect(result.current.todos[0].text).toBe('Task 2') }) }) ``` **Apa yang Kamu Dapat:** - Test execution yang cepat (hitungan detik, bukan menit) - API yang Jest-compatible (gampang dipahami) - Error messages yang jelas - Watch mode dengan smart re-runs - Coverage reports - TypeScript support out of the box ## Key Features ### Watch Mode (Super Smart) ```bash # Run di watch mode $ npm test # Vitest cuma re-run affected tests # Tekan 'a' buat run semua # Tekan 'f' buat run yang failed aja # Tekan 'u' buat update snapshots ``` ### UI Mode (Visual Testing) ```bash $ npm test:ui # Buka browser dengan visual test interface # Lihat test results, coverage, logs # Re-run individual tests # Filter dan search tests ``` ### Coverage ```bash $ npm test:coverage # Generate coverage report # Nunjukin lines/branches mana yang belum ke-cover ``` ```typescript // vitest.config.ts export default defineConfig({ test: { coverage: { provider: 'v8', reporter: ['text', 'html', 'lcov'], exclude: [ 'node_modules/', 'test/', '**/*.test.ts' ], thresholds: { lines: 80, functions: 80, branches: 80, statements: 80 } } } }) ``` ### Snapshot Testing ```typescript it('renders correctly', () => { const { container } = render() expect(container).toMatchSnapshot() }) // First run: bikin snapshot // Next runs: bandingkan sama snapshot // Berubah? Update dengan tekan 'u' di watch mode ``` ## Kesimpulan Vitest bawa modern, fast, dan enjoyable testing experience ke JavaScript ecosystem. Benefits: 1. **Blazing Fast** → Vite-powered, instant feedback 2. **Zero Config** → Langsung jalan dengan Vite config yang udah ada 3. **Jest Compatible** → Migrasi gampang, API familiar 4. **Native ESM** → Gak perlu transform 5. **Great DX** → Smart watch mode, UI mode, error messages yang jelas ### Checklist: Mulai Pakai Vitest **Setup:** - [ ] Install Vitest (`npm install -D vitest`) - [ ] Add test scripts ke package.json - [ ] Optional: Create vitest.config.ts - [ ] Install testing libraries (@testing-library/react, etc) - [ ] Setup globals if needed **Write Tests:** - [ ] Mulai dari utility function tests - [ ] Test business logic (pure functions) - [ ] Test API/async functions pakai mocks - [ ] Test React components pakai Testing Library - [ ] Test custom hooks **Best Practices:** - [ ] Pakai descriptive test names - [ ] Satu assertion concept per test - [ ] Mock external dependencies - [ ] Pakai beforeEach buat setup - [ ] Test behavior, bukan implementation **Development:** - [ ] Run tests di watch mode - [ ] Fix failing tests langsung - [ ] Nulis tests SEBELUM atau BARENG dengan code - [ ] Pakai test:ui buat debugging - [ ] Cek coverage secara berkala **CI/CD:** - [ ] Run tests di CI pipeline - [ ] Generate coverage reports - [ ] Set coverage thresholds - [ ] Upload coverage ke codecov/coveralls - [ ] Fail build kalau ada test yang gagal **Kapan Vitest Perfect:** - Lagi pakai Vite - Butuh fast feedback loops - Project TypeScript/ESM modern - Migrasi dari Jest (gampang!) - Suka developer experience yang bagus **Pertimbangkan Alternatif Kalau:** - Gak pakai Vite - Udah happy sama Jest setup yang ada - Butuh tools ecosystem Jest yang spesifik - Codebase besar dengan investasi Jest yang gede Langkah Selanjutnya: 1. Explore [Vitest docs](https://vitest.dev) buat advanced features 2. Coba Vitest UI mode 3. Setup coverage di CI/CD 4. Join Vitest Discord community **Key Insight:** Killer feature Vitest adalah speed tanpa ngorbanin compatibility. Kamu dapet instant test feedback (boost productivity development) dengan Jest-compatible API (adopsi gampang). Perfect buat modern Vite-based projects. Sekali kamu ngerasain instant test reruns sama smart watch mode, susah balik ke slow test runners!