Menguji Aplikasi Next.js dengan Vitest dan Jest: Perbandingan Praktis

Vitest 3-8x lebih cepat dari Jest pada proyek berbasis Vite, dan benchmark watch mode menunjukkan perubahan satu file memicu re-run dalam 380ms dengan Vitest versus 3,4 detik dengan Jest. Bagi developer yang menjalankan tes secara terus-menerus selama pengembangan, itu adalah perbedaan antara loop umpan balik yang ketat dan penantian yang membuat frustrasi. Tetapi Next.js menggunakan webpack dan kompilernya sendiri — bukan Vite. Jadi pertanyaannya bukan hanya tentang kecepatan; ini tentang alat mana yang paling sesuai dengan pengaturan proyek Anda.

Vitest: Penantang Modern

Vitest dibuat oleh tim Vite sebagai test runner asli Vite. Ia menggunakan kembali pipeline transformasi dan resolusi modul Vite — itulah mengapa sangat cepat pada proyek Vite. Vitest menggunakan file konfigurasi yang sama dengan aplikasi Vite Anda (vite.config.ts), memiliki API yang kompatibel dengan Jest (vi.mock, vi.fn, vi.spyOn), mendukung ESM asli, dan menyertakan UI dashboard bawaan.

Vitest dengan Next.js

Next.js tidak menggunakan Vite secara default — ia menggunakan kompiler berbasis SWC sendiri. Vitest masih dapat digunakan dengan Next.js, tetapi Anda perlu mengonfigurasinya untuk menggunakan resolusi modul yang benar dan menangani fitur khusus Next.js seperti Server Components. Anda perlu mengonfigurasi alias untuk jalur modul Next.js dan mock modul khusus Next.js (next/navigation, next/image) di file setup tes Anda.

Vitest vs Jest Performance Comparison (2025 Benchmarks)

  Metric                  Vitest          Jest (SWC)
  ─────────────────────── ─────────────── ───────────────
  Cold start              ~300ms          ~600-800ms
  Watch mode re-run       380ms           3.4 seconds
  Full suite (500 tests)  ~8s             ~18s
  Config file             vite.config.ts  jest.config.ts
  Native ESM              ✓               Partial
  TypeScript              Zero-config     Needs @types/jest

  Next.js Compatibility:
  ─────────────────────────────────────────────────────
  Vitest:   Works, needs custom config for App Router
  Jest+SWC: Official support via next/jest.js helper

  # Vitest setup for Next.js
  npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react

  # Jest setup for Next.js (recommended for existing projects)
  npm install -D jest jest-environment-jsdom @testing-library/react
  npm install -D @testing-library/jest-dom @swc/jest

Jest: Standar yang Sudah Mapan

Jest telah menjadi framework pengujian JavaScript yang dominan selama lebih dari satu dekade. Ia memiliki ekosistem plugin, solusi komunitas, dan dokumentasi terluas. Jest adalah framework pengujian default untuk Create React App, React Native, dan secara historis untuk Next.js. Dokumentasi resmi Next.js tentang pengujian mencakup pengaturan Jest dengan SWC — transformasi SWC menggantikan Babel, memotong waktu startup tes 40-50%.

// jest.config.ts — Next.js + SWC (official approach)
import type { Config } from 'jest';
import nextJest from 'next/jest.js';

const createJestConfig = nextJest({ dir: './' });
const config: Config = {
  coverageProvider: 'v8',
  testEnvironment: 'jsdom',
  setupFilesAfterFramework: ['<rootDir>/jest.setup.ts'],
};
export default createJestConfig(config);

// jest.setup.ts
import '@testing-library/jest-dom';

// Example component test (works with both Jest and Vitest)
import { render, screen, fireEvent } from '@testing-library/react';
import { InvoiceCard } from '@/components/InvoiceCard';

describe('InvoiceCard', () => {
  const mockInvoice = { id: '1', amount: 5000000, status: 'pending', currency: 'IDR' };

  it('renders invoice amount formatted correctly', () => {
    render(<InvoiceCard invoice={mockInvoice} />);
    expect(screen.getByText(/Rp 5.000.000/)).toBeInTheDocument();
  });

  it('shows approve button only for pending invoices', () => {
    render(<InvoiceCard invoice={mockInvoice} userRole="manager" />);
    expect(screen.getByRole('button', { name: /approve/i })).toBeInTheDocument();
  });

  it('calls onApprove when approve button is clicked', () => {
    const onApprove = jest.fn(); // or vi.fn() for Vitest
    render(<InvoiceCard invoice={mockInvoice} onApprove={onApprove} userRole="manager" />);
    fireEvent.click(screen.getByRole('button', { name: /approve/i }));
    expect(onApprove).toHaveBeenCalledWith('1');
  });
});

Menyiapkan Jest di Next.js dengan SWC

Next.js 12+ menyertakan dukungan SWC bawaan untuk Jest melalui pembantu konfigurasi next/jest.js. Pengaturannya: instal jest, jest-environment-jsdom, @testing-library/react, dan @testing-library/jest-dom. Buat jest.config.ts yang menggunakan transformer next/jest.js — ini mengonfigurasi pemetaan nama modul, transformasi, dan setupFiles secara otomatis untuk konvensi Next.js.

Menguji Next.js Server Components

React Server Components (RSC) adalah tantangan pengujian baru. Pustaka pengujian React tradisional merender komponen di jsdom — tetapi Server Components tidak dapat berjalan di lingkungan browser. Untuk pengujian Server Component, gunakan pengujian komponen Playwright atau dukungan RSC @testing-library/react yang eksperimental. Untuk sebagian besar aplikasi, uji Server Components melalui tes integrasi.

Apa yang Harus Diuji dalam Aplikasi Next.js

Tidak semua perlu diuji — tetapi beberapa hal harus diuji. Prioritas 1: fungsi utilitas dan logika bisnis (fungsi murni sepele untuk diuji dan memberikan ROI tertinggi). Prioritas 2: komponen React kompleks dengan rendering kondisional dan interaksi pengguna. Prioritas 3: handler rute API. Prioritas 4: alur pengguna kritis end-to-end dengan Playwright.

Rekomendasi Saya

Proyek Next.js baru dengan toolchain yang berdekatan dengan Vite (atau menggunakan Turbopack): gunakan Vitest. Proyek Next.js yang ada di Jest: tingkatkan ke @swc/jest dan gunakan konfigurasi next/jest.js sebelum mempertimbangkan migrasi. Proyek React Native: Jest adalah satu-satunya pilihan praktis. Tim baru dalam pengujian: mulai dengan Jest karena dokumentasi, jawaban Stack Overflow, dan ekosistem tutorial lebih dalam.

Sumber & Bacaan Lebih Lanjut

• Vitest Docs — Getting Started — https://vitest.dev/guide/
• Next.js Docs — Testing with Jest — https://nextjs.org/docs/app/building-your-application/testing/jest
• Medium — Vitest vs Jest Benchmarks on a Real-World SPA — https://dev.to/thejaredwilcurt/vitest-vs-jest-benchmarks-on-a-5-year-old-real-work-spa-4mf1