Apa itu Snapshot Testing?

Snapshot testing adalah teknik di mana output dari kode (misalnya HTML yang dirender) disimpan sebagai "foto" dan dibandingkan dengan hasil berikutnya. Jika ada perubahan, test gagal — lalu kita memutuskan apakah perubahan itu disengaja atau bug.

Kapan Menggunakan Snapshot?

• Cocok: mendeteksi perubahan tak disengaja pada output komponen, serialized data, konfigurasi
• Tidak cocok: menguji logika bisnis, behavior interaktif, atau data yang sering berubah

toMatchSnapshot()

Pertama kali dijalankan, Vitest menyimpan snapshot ke file .snap. Selanjutnya, output dibandingkan dengan file tersebut:

import { render } from "@testing-library/react";
import Button from "./Button";

it("merender button dengan benar", () => {
  const { container } = render(<Button variant="primary">Kirim</Button>);
  expect(container.firstChild).toMatchSnapshot();
});

File snapshot disimpan di folder __snapshots__/ di sebelah file test. Contoh isinya:

// Button.test.tsx.snap
exports[`merender button dengan benar 1`] = `
<button
  class="btn btn-primary"
>
  Kirim
</button>
`;

toMatchInlineSnapshot()

Alih-alih file terpisah, snapshot disimpan langsung di dalam file test — lebih mudah di-review di pull request:

it("memformat tanggal", () => {
  expect(formatDate(new Date("2024-01-15"))).toMatchInlineSnapshot(
    '"15 Januari 2024"'
  );
});

Mengupdate Snapshot

Saat perubahan memang disengaja, update snapshot dengan flag --update atau -u:

# Update semua snapshot yang outdated
npx vitest --update

# Atau dalam mode watch, tekan "u" untuk update

Bahaya Over-Reliance pada Snapshot

• Snapshot terlalu besar — developer cenderung meng-update tanpa benar-benar membaca perubahannya
• False sense of security — snapshot hanya mendeteksi perubahan, bukan membuktikan kebenaran
• Noisy diffs — perubahan kecil (class name, whitespace) memicu kegagalan yang mengganggu

Best Practices Snapshot

• Gunakan untuk output yang stabil — bukan data dinamis (tanggal, random ID)
• Snapshot kecil dan fokus — snapshot satu elemen, bukan seluruh page
• Review snapshot diff di setiap pull request — jangan auto-update tanpa baca
• Kombinasikan dengan assertion eksplisit — snapshot sebagai pelengkap, bukan pengganti
• Gunakan inline snapshot untuk output pendek agar lebih mudah di-review

Snapshot untuk Data Non-UI

Snapshot juga berguna untuk mengecek output fungsi, konfigurasi, atau API response:

it("menghasilkan config yang benar", () => {
  const config = generateConfig({ env: "production" });
  expect(config).toMatchSnapshot();
});

it("mengembalikan error message yang konsisten", () => {
  const errors = validate({ email: "" });
  expect(errors).toMatchInlineSnapshot(`
    {
      "email": "Email wajib diisi"
    }
  `);
});