Belajar Jest - Snapshot Testing

#Pendahuluan

Kadang kalian tidak peduli nilai persis sebuah output — kalian hanya ingin tahu bahwa output itu tidak berubah secara tidak sengaja. Untuk kebutuhan itulah Jest menyediakan snapshot testing: merekam hasil serialized sebuah nilai, lalu membandingkannya pada setiap eksekusi berikutnya.

Episode 7 membahas konsep snapshot testing, penggunaan toMatchSnapshot(), cara memperbarui snapshot dengan aman lewat version control, serta penerapannya untuk React components dan output serialized. Snapshot adalah salah satu fitur khas Jest, tetapi juga yang paling sering disalahpahami — episode ini akan meluruskannya.

#Konsep Snapshot Testing

#Bagaimana Snapshot Bekerja

Saat pertama kali sebuah test memanggil toMatchSnapshot(), Jest menyimpan representasi teks dari nilai yang diterima ke dalam berkas snapshot. Pada eksekusi berikutnya, Jest membandingkan nilai baru dengan yang tersimpan. Jika berbeda, test gagal dan Jest menampilkan diff antara snapshot lama dan baru.

Snapshot bukan pengganti assertion biasa. Dia adalah jaring pengaman untuk perubahan yang tidak diinginkan: ideal untuk output UI, struktur konfigurasi, pesan error, dan representasi data yang serializable. Untuk logika bisnis, matcher eksplisit seperti toEqual tetap lebih tepat.

#Keuntungan dan Risiko

• Keuntungan: menangkap perubahan tak terduga pada output yang kompleks, menulisnya sekali dan dibandingkan otomatis.
• Risiko: snapshot bisa menjadi "kebiasaan menerima" tanpa meninjau isinya, menghasilkan test yang hanya merekam bug.

Kuncinya adalah meninjau setiap perubahan snapshot melalui code review. Snapshot yang disimpan di Git bisa di-diff seperti kode biasa — inilah yang membuat review menjadi mungkin.

#Menggunakan toMatchSnapshot

#Contoh Dasar

Snapshot nilai sederhana

test("konfigurasi aplikasi stabil", () => {
  const konfigurasi = {
    nama: "aplikasi",
    port: 8080,
    fitur: ["login", "analitik"],
  };
  expect(konfigurasi).toMatchSnapshot();
});

expect(konfigurasi).toMatchSnapshot() menyimpan representasi objek pada percobaan pertama. Jika ada developer yang menambah fitur baru ke array fitur, test ini akan gagal sampai snapshot diperbarui — persis perilaku yang kita inginkan.

#Lokasi Snapshot

Snapshot disimpan di direktori __snapshots__ yang berdampingan dengan file test, dengan ekstensi .snap. Direktori ini wajib di-commit ke Git agar seluruh tim membandingkan terhadap snapshot yang sama. Jangan tambahkan ke .gitignore.

src/
  konfigurasi.test.js
  __snapshots__/
    konfigurasi.test.js.snap

#Updating Snapshot dan Version Control

#Memperbarui Snapshot dengan Aman

Ketika sebuah perubahan memang disengaja, kalian memperbarui snapshot dengan --updateSnapshot:

npx jest --updateSnapshot

Perintah npx jest --updateSnapshot menimpa semua snapshot yang gagal dengan nilai baru. Variabel pintas -u melakukan hal yang sama. Aturan emas: jalankan perintah ini hanya setelah kalian memastikan perubahan itu benar, lalu periksa diff snapshot di Git sebelum commit.

#Tinjau Melalui Code Review

Jangan pernah menerima snapshot tanpa melihat isinya. Dalam pull request, selalu baca diff file .snap — apakah hanya menambahkan field yang diharapkan, atau ada regresi yang tersembunyi? Snapshot yang menampilkan objek raksasa sebaiknya dipecah menjadi snapshot yang lebih kecil dan fokus agar mudah ditinjau.

#Inline Snapshot

Selain berkas terpisah, Jest mendukung inline snapshot dengan toMatchInlineSnapshot(). Nilai snapshot ditulis langsung ke dalam file test. Cocok untuk snapshot kecil yang ingin dilihat di tempat, tetapi membuat diff lebih berisik.

#Snapshot Testing untuk React Components

#Menangkap Struktur Komponen

Snapshot paling populer digunakan untuk React components. Dengan bantuan serializer seperti @testing-library/jest-dom atau renderer yang sesuai, kalian bisa merekam struktur DOM yang dihasilkan komponen:

Snapshot komponen React

function Tombol({ label }) {
  return <button>{label}</button>;
}
 
test("Tombol merender label dengan benar", () => {
  expect(renderToSnapshot(<Tombol label="Simpan" />)).toMatchSnapshot();
});

Pada episode 8 kita akan memakai React Testing Library untuk render nyata. Untuk sekarang, pahami bahwa snapshot komponen menangkap struktur output — jika class atau struktur DOM berubah tak sengaja, test langsung berbunyi.

#Menguji Output Serialized Lainnya

Snapshot juga berguna untuk output serialized selain DOM: konfigurasi, JSON response, pesan error, atau representasi objek besar. Kuncinya, nilai harus bisa diserialisasi secara konsisten agar perbandingan stabil.

#Penutup

Episode 7 menjelaskan snapshot testing sebagai jaring pengaman perubahan: menyimpan output serialized, membandingkannya setiap kali test berjalan, dan memperbaruinya hanya setelah perubahan disengaja terverifikasi lewat code review.

Inti yang harus dibawa pulang:

• Snapshot menyimpan output serialized dan membandingkannya pada eksekusi berikutnya.
• toMatchSnapshot() membuat berkas .snap pada percobaan pertama.
• Direktori __snapshots__ wajib di-commit ke Git.
• Perbarui snapshot dengan npx jest --updateSnapshot, lalu tinjau diff-nya.
• Snapshot cocok untuk output kompleks; matcher eksplisit untuk logika bisnis.
• Inline snapshot menulis nilai langsung di file test untuk snapshot kecil.

Di episode 8 selanjutnya kita akan masuk ke testing React & UI components — integrasi dengan React Testing Library, merender komponen dan memeriksa DOM, menguji event, props, perubahan state, dan UI async, serta menggabungkan snapshot testing di React. Pastikan dasar React kalian sudah siap.