Belajar Jest - Instalasi & Konfigurasi Dasar

#Pendahuluan

Di episode 0 kalian sudah menginstall Jest, dan di episode 2 kalian memahami arsitekturnya. Episode 3 sekarang mengikat keduanya menjadi workflow nyata: menambahkan Jest ke project secara rapi, menulis script test, menata struktur folder dan penamaan file, serta membaca output CLI dengan benar.

Episode ini adalah jembatan dari teori ke praktik. Setelah ini, kalian bisa menjalankan suite nyata, memahami laporan hasil, dan men-debug saat ada test yang gagal — keterampilan yang akan dipakai di semua episode berikutnya.

#Menambahkan Jest ke Project

#Project JavaScript Polos

Mulai dari project yang sudah ada atau baru saja dibuat:

npm init -y
npm install --save-dev jest

Untuk project yang memakai module ESM ("type": "module" di package.json), Jest versi terbaru mendukungnya secara langsung. Jika memakai CommonJS, tidak ada yang perlu diubah. Cara tercepat memverifikasi semuanya terhubung:

npx jest --version

#Project TypeScript

Untuk TypeScript, tambahkan ts-jest atau gunakan Babel — detail lengkapnya ada di episode 9. Untuk sekarang, cukup install paketnya dan buat konfigurasi:

npm install --save-dev jest ts-jest typescript @types/jest

Perintah npm install --save-dev jest ts-jest typescript @types/jest menginstall Jest plus dukungan TypeScript. Paket @types/jest memberikan type definition untuk describe, test, dan expect di editor.

#Menulis Script test di package.json

#Memetakan Perintah Test

Tambahkan script test agar npm test menjalankan Jest:

{
  "name": "belajar-jest",
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage"
  }
}

Script test:watch menjalankan mode watch interaktif, sedangkan test:coverage menjalankan suite sekaligus menghasilkan laporan coverage. Memetakan perintah ini ke npm membuat semua orang di tim memakai jalur yang sama, alih-alih menghafal flag.

npm test

#Struktur Folder dan Penamaan File Test

#Pola yang Konsisten

Ada dua pola yang umum dipakai, dan keduanya didukung Jest secara default:

src/
  math.js
  math.test.js
tests/
  integration/
    api.test.js

Pola pertama menempatkan file test bersebelahan dengan sumbernya (math.test.js di sebelah math.js) — memudahkan navigasi. Pola kedua memusatkan test di direktori tests/ — cocok untuk suite yang besar. Yang terpenting: pilih satu pola dan konsisten di seluruh codebase, karena konsistensi membuat aturan penemuan file bisa ditebak.

Penamaan file test yang benar

math.test.js
math.spec.js
__tests__/math.js

#Menjalankan Jest di CLI dan Memahami Output

#Membaca Ringkasan Hasil

Jalankan suite dan perhatikan outputnya:

npx jest

Output default menampilkan progress per file, lalu ringkasan: jumlah test yang lolos, gagal, dan di-skip, ditambah waktu eksekusi. Jika ada yang gagal, Jest menampilkan diff antara nilai aktual dan yang diharapkan serta lokasi baris yang bermasalah.

Contoh suite untuk memahami output

function tambah(a, b) {
  return a + b;
}
 
test("tambah angka positif", () => {
  expect(tambah(2, 3)).toBe(5);
});
 
test("tambah angka negatif", () => {
  expect(tambah(-1, -1)).toBe(-2);
});

#Flag CLI yang Sering Dipakai

Beberapa flag penting yang akan sering kalian gunakan:

• --watch: mode interaktif, menjalankan ulang test yang terdampak.
• --verbose: menampilkan nama tiap test secara lengkap.
• --runInBand: menjalankan test serial dalam satu proses, berguna di CI atau mesin lemah.
• --testNamePattern: menjalankan hanya test yang namanya cocok dengan pola.

npx jest -t "negatif"

Flag npx jest -t "negatif" menjalankan hanya test yang mengandung kata "negatif" pada namanya — sangat berguna saat men-debug satu test di suite besar.

#Penutup

Episode 3 menyatukan instalasi, script, struktur, dan CLI menjadi workflow nyata. Kalian sekarang bisa menambahkan Jest ke project JavaScript maupun TypeScript, memetakan perintah test ke npm, menata struktur folder yang konsisten, dan membaca output CLI untuk mengetahui apa yang lolos, gagal, atau di-skip.

Inti yang harus dibawa pulang:

• Install Jest sebagai devDependency, plus ts-jest untuk project TypeScript.
• Peta script test, test:watch, dan test:coverage ke perintah Jest.
• Pilih pola penempatan file test dan konsisten di seluruh codebase.
• Output Jest menampilkan progress, ringkasan, dan diff error yang mudah dibaca.
• Flag -t menjalankan test berdasarkan nama, --runInBand untuk eksekusi serial.
• Struktur folder yang rapi membuat aturan penemuan file bisa ditebak.

Di episode 4 selanjutnya kita akan menulis test unit yang benar — deklarasi dengan test dan describe, matchers dasar seperti toBe, toEqual, toContain, dan toBeTruthy, setup teardown dengan beforeEach dan kawan-kawan, hingga pengujian pure functions dan edge cases. Inilah episode inti yang akan membentuk kebiasaan menulis test kalian.