Pengujian Aplikasi React: Panduan Vitest dan React Testing Library

Mengapa Memilih Vitest Dibandingkan Jest?

Vitest adalah test runner generasi baru berbasis Vite yang menawarkan eksekusi pengujian secara instan (super fast), dukungan native TypeScript & ESM, serta kompatibilitas penuh dengan API Jest.

---

1. Menulis Unit Test Fungsi Logika

import { describe, it, expect } from 'vitest';
import { calculateReadingTime } from '@/lib/readingTime';

describe('calculateReadingTime', () => {
  it('menghitung waktu baca dengan tepat berdasarkan jumlah kata', () => {
    const sampleContent = new Array(400).fill('kata').join(' ');
    expect(calculateReadingTime(sampleContent, 'id')).toBe('2 mnt baca');
  });
});

---

2. Integration Testing Komponen React

Gunakan @testing-library/react untuk menguji bagaimana pengguna berinteraksi dengan antarmuka Anda:

import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Counter } from './Counter';

describe('Counter Component', () => {
  it('meningkatkan nilai hitungan saat tombol diklik', () => {
    render(<Counter />);
    const button = screen.getByRole('button', { name: /tambah/i });
    fireEvent.click(button);
    expect(screen.getByText('Count: 1')).toBeInTheDocument();
  });
});

---

Kesimpulan

Memiliki cakupan pengujian yang kuat (test coverage) memberikan kepercayaan diri tinggi saat melakukan refactoring kode dan menjamin aplikasi bebas bug sebelum dirilis ke produksi.