What is snapshot testing of components?

Snapshot testing of components is a check in which a component is rendered once, and its final markup (DOM/JSX structure) is saved as a reference "snapshot," while on subsequent test runs the new result is compared with this reference. If the component starts rendering something different, the test reports the discrepancy.

---

#How this happens

1. The component is rendered in the test
2. Jest or another tool saves its HTML/JSX to a snapshot file
3. On subsequent tests, the result is rendered again
4. If the structure changed, the snapshot no longer matches ⇒ the test fails

---

#What it is used for

• to notice any unintended change in the UI
• to capture the current appearance of the component at the time the test is written
• to quickly check whether the component's output changed after refactoring

---

#When a snapshot helps

• the component has many states and a large markup
• it is important to capture the structure of the output
• the check is needed more "by eye" than at individual points

---

#The essence in one sentence

Snapshot testing of components captures their output and automatically reports if, after changes, they started rendering differently than before.