Suggest an editImprove this articleRefine the answer for “What is snapshot testing of components?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)Snapshot testing of components is a check where a component's output is saved as a reference "snapshot," and later runs compare the new result against it. **Key point:** if the component starts rendering something different, the snapshot no longer matches and the test fails, automatically signaling an unintended UI change.Shown above the full answer for quick recall.Answer (EN)ImageSnapshot 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.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.