Apakah snapshot testing?

Question

Accepted Answer

**Snapshot testing** menangkap "snapshot" sesuatu output (lazimnya output yang dirender oleh komponen UI atau struktur data) dan membandingkan larian masa depan terhadapnya — menandakan apabila output berubah. Ia berguna untuk mengesan perubahan yang tidak disengajakan, tetapi mempunyai had yang perlu difahami.

## Bagaimana snapshot testing berfungsi

```text
1. First run → the test RECORDS the output (e.g. a rendered component) as a SNAPSHOT file
2. Later runs → COMPARE the current output to the saved snapshot:
   → MATCHES → pass; DIFFERS → fail (the output changed)
3. If the change is INTENTIONAL → UPDATE the snapshot (review the diff, then accept)
```

```js
// Jest snapshot test (e.g. a React component)
test('renders correctly', () => {
  const tree = render(<Button label="Click" />).toJSON();
  expect(tree).toMatchSnapshot();    // compares to the stored snapshot
});
```

## Kegunaan dan faedah

```text
✓ Detect UNINTENDED CHANGES — flags when output changes unexpectedly (UI, serialized data)
✓ FAST to write — no manual assertions for complex output; auto-captures the expected result
✓ Good for UI components (catch unexpected rendering changes), config, large data structures
```

## Had (guna dengan berhati-hati)

```text
⚠️ Snapshots don't verify CORRECTNESS — they capture whatever output exists (even if WRONG);
   they only detect CHANGE, not that the output is RIGHT
⚠️ BLINDLY UPDATING snapshots (jest -u without reviewing) → defeats the purpose (accepting
   broken output) — a common bad habit
⚠️ Large/brittle snapshots → change often, get rubber-stamped, low value
→ Use for change detection; keep snapshots small/focused; REVIEW snapshot diffs;
  don't rely on them alone (combine with real assertions for behavior).
```

## Mengapa ia penting

Memahami snapshot testing adalah berharga kerana ia merupakan **teknik yang lazim digunakan** (terutamanya untuk UI) yang berguna apabila digunakan dengan baik tetapi bermasalah apabila disalahgunakan, jadi memahami nilai dan hadnya adalah pengetahuan praktikal yang penting.

Snapshot testing — menangkap output (lazimnya komponen UI yang dirender atau struktur data) dan membandingkan larian masa depan terhadap snapshot yang disimpan — **berguna untuk mengesan perubahan yang tidak disengajakan**: ia menandakan apabila output berubah secara tidak dijangka (menangkap perubahan rendering UI atau perubahan struktur data yang tidak sengaja), **pantas untuk ditulis** (menangkap output yang dijangka secara automatik tanpa mengesahkan setiap butiran output kompleks secara manual), dan sesuai untuk komponen UI, konfigurasi, dan struktur data yang besar.

Memahami faedah ini menjelaskan populariti, terutamanya dalam pengujian UI.

Walau bagaimanapun, memahami **had adalah amat penting** untuk menggunakannya dengan baik: snapshot **tidak mengesahkan ketepatan** — ia menangkap apa sahaja output yang wujud (walaupun ia salah), hanya mengesan *perubahan* bukan *ketepatan* — jadi snapshot boleh mengunci output yang buggy.

**Perangkap terbesar ialah mengemas kini snapshot secara membabi buta** (menjalankan arahan kemas kini tanpa menyemak diff), yang mengalahkan tujuannya dengan menerima output yang berpotensi rosak — satu tabiat buruk yang lazim.

Snapshot yang besar dan rapuh yang kerap berubah akan dirubber-stamp dan memberikan nilai yang sedikit.

Memahami penggunaan yang betul — untuk pengesanan perubahan, mengekalkan snapshot kecil dan fokus, **menyemak diff snapshot** dengan teliti, dan tidak bergantung padanya semata-mata (menggabungkan dengan assertion tingkah laku sebenar) — mencerminkan pertimbangan matang yang mengelakkan salah guna lazim.

Memandangkan snapshot testing digunakan secara meluas (terutamanya untuk UI) dan berguna untuk pengesanan perubahan tetapi mudah disalahgunakan (mengunci output yang salah, mengemas kini secara membabi buta), dan memandangkan memahami nilai serta had pentingnya membolehkan menggunakannya dengan baik, memahami snapshot testing adalah pengetahuan yang berharga dan relevan secara praktikal — satu teknik lazim untuk difahami dengan betul, di mana menghargai hadnya (pengesanan perubahan, bukan ketepatan) dan penggunaan yang betul (menyemak diff, bukan mengemas kini secara membabi buta) adalah sama penting dengan teknik itu sendiri, mencerminkan pertimbangan pengujian yang baik.