Що таке snapshot-тестування компонентів?

Snapshot-тестування компонентів - це перевірка, за якої компонент один раз рендериться, його підсумкова розмітка (DOM/JSX-структура) зберігається як еталонний «снапшот», а при наступних запусках тестів новий результат порівнюється з цим еталоном. Якщо компонент почав рендерити щось інше, тест повідомляє про розбіжність.

---

#Як це відбувається

1. Компонент рендериться в тесті
2. Jest або інший інструмент зберігає його HTML/JSX у файл-снапшот
3. Під час наступних тестів результат знову рендериться
4. Якщо структура змінилася, снапшот більше не збігається ⇒ тест падає

---

#Для чого це використовують

• щоб помітити будь-яку ненавмисну зміну UI
• щоб зафіксувати поточний вигляд компонента на момент написання тесту
• щоб швидко перевіряти, чи не змінився вивід компонента після рефакторингу

---

#Коли снапшот допомагає

• у компонента багато станів і велика розмітка
• важливо зафіксувати структуру виводу
• перевірка потрібна більше «на око», ніж за окремими точками

---

#Суть в одному реченні

Snapshot-тестування компонентів фіксує їхній вивід і автоматично повідомляє, якщо після змін вони почали рендеритися інакше, ніж раніше.