Hari Pertama Pasang Vitest, Langsung Ketahuan Dua Bug

Repo frontend Next.js buat sebuah project company profile udah berminggu-minggu jalan tanpa satu pun unit test. Build jalan, halaman keluar, ya saya anggap sehat. Malam itu saya pasang harness test buat pertama kali: pin vitest 4.1.11, nulis dua belas test pertama, jalankan npm run test. Hasilnya hijau dua belas dari dua belas. Eh, tapi pas proses nulisnya, dua bug ketahuan.

Saya kira awalnya hasilnya bakal datar. Bukti formal buat hal yang udah jalan, gitu. Test bentukan sendiri, pasti ijo semua, nggak akan nemu apa-apa. Ternyata proses nulis test-nya yang jadi alat pemeriksa.

Assertion Jumlah yang Memaksa Bandingkan

Test pertama soal data nama klien: sebuah daftar panjang yang dikelompokkan per industri. Saya nulis invariant sederhana, jumlah nama per grup harus persis sama dengan daftar mentahnya, dan tiap grup nggak boleh ada nama dobel. Begitu assertion itu jalan, saya terpaksa scroll data dari atas ke bawah, bandingin satu per satu sama daftar mentahnya. Logikanya gampang: nama yang udah nongol di satu grup nggak boleh muncul lagi di grup lain. Ketahuan: satu nama klien muncul di dua grup industri berbeda. Kemungkinan besar memang disengaja, perusahaan itu tercatat publik dan punya divisi di dua sektor. Tapi selama ini nggak ada yang sadari, dan keputusan soal boleh tidaknya dobel lintas grup harusnya keputusan pemilik konten, bukan yang kebetulan ngetik data.

Yang kedua lebih teknis. Ada script gate bernama validate-tokens.cjs yang tugasnya nge-blok warna hex yang nongol di luar token sheet. Buat ngetes script ini, test-nya bikin repo git tempaan: mkdtemp buat folder sementara, copy scriptnya, git init, git add, lalu cek exit code. Enam belas baris proses bikin skenario itu yang bikin saya mikir: kalau ada komponen yang filenya langsung nangkring di src/, bukan di subfolder, kena telusur nggak ya sama gate ini?

Ternyata nggak kena. Pathspec src/**/*.tsx itu lolosin file yang langsung di bawah src/. Mekanisme globnya menarik dan sedikit ngeyel sama intuisi, saya bahas tuntas di artikel terpisah.

Setup Minimal yang Saya Pakai

Pemasangannya standar: npm install -D vitest lalu pin versinya, saat tulisan ini 4.1.11 [1]. Syaratnya Vite minimal v6.4.0 dan Node minimal v22.12.0 [1].

Nama file test harus mengandung .test. atau .spec. biar kebaca otomatis [1]. Jadi saya colocate aja, file test nempel di samping file yang dites. Gampang dilacak, gampang dihapus bareng.

Satu hal yang saya beda dari contoh dokumentasi: script test-nya saya set satu kali jalan lalu berhenti, bukan mode watch default [1]. Perintah vitest run itu memang begitu perilakunya: eksekusi sekali, selesai, keluar [2]. Buat gate CI, jauh enak dipakai daripada proses yang nungguin perubahan file selamanya.

Mock next/server Tanpa Drama

Test ketiga yang saya suka: redirect locale di proxy. Logikanya murni tipe data dan keputusan URL, jadi tinggal mock next/server pakai vi.mock [4]. Satu jebakan yang sering kejadian: pemanggilan vi.mock itu di-hoist ke paling atas file sama Vitest, jadi posisi nulisnya nggak ngaruh [4]. Tapi dia cuma bekerja buat modul yang di-import, bukan yang di-require [4]. Kalau mock-mu kayaknya nggak jalan, cek dulu dua hal itu sebelum ubah-ngubah logika test.

Harness yang Nggak Nemu Apa-apa Berarti Dipasang Telat

Dari dua belas test pertama, nol yang gagal, tapi dua bug ketahuan. Bagian saya paling suka dari cerita ini bukan temuan dua bug-nya, tapi waktunya: sebelum sempat jadi keluhan. Duplikat nama tadi kalau nggak sekarang, nemunya pas ada yang curiga data tampil aneh. Blind spot gate tadi kalau nggak sekarang, nemunya pas ada yang sengaja naruh file di src/ buat ngebolatin review.

Jadi pendapat saya tegas soal ini: harness test itu alat pencari bug, bukan upacara buat genapin coverage. Pasang dia pas kode masih sempit sempitnya, karena hari pertama adalah momen paling produktif buat nemuin sesuatu. Kalau setup test pertamamu nggak nemu apa-apa sama sekali, saya curiga bukan kodemu yang bagus. Saya curiga kamu telat pasang.

## Sources

[1] https://vitest.dev/guide — Getting Started | Vitest (install, npm install -D vitest, vitest run) [2] https://vitest.dev/guide/cli — Command Line Interface | Vitest (vitest run = single run without watch) [4] https://vitest.dev/api/vi.html — Vi | Vitest (vi.mock hoisting, next/server mock)

Sources

1. panduan resmi vitest
2. dokumen CLI vitest
4. dokumentasi API vi.mock