«Не забудь зробити знімок компоненти!». Стисло про Snapshot-тестування на Jest

«І не забудьте зробити знімок (Snapshot) компоненти!»

Ви часто можете почути таку фразу від вашого тим-ліда.

Ні, це не фото на пам’ять з вашою компонентою. І точно не JPEG або PNG.

Snapshot у Jest — це механізм для тестування інтерфейсу користувача, який дозволяє зберегти «знімок» вигляду компоненти на певний момент часу. Цей знімок містить рендерену версію компонента. Під час наступних запусків тестів, Jest порівнює актуальний рендер зі збереженим знімком. Якщо є різниця, тест не пройде, що вказує на те, що вигляд або структура компоненти змінилися.

Основні моменти про snapshot-тестування:

• Створення: Коли ви запускаєте тест вперше, Jest створює snapshot і зберігає його у файлі.
• Порівняння: При наступних запусках тестів Jest порівнює поточний рендер зі збереженим snapshot.
• Оновлення: Якщо зміни у компоненті були очікуваними, ви можете оновити snapshot до нової версії.

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

Чи можу я побачити зміну шрифта за допомогою Snapshot?

Ні, snapshot-тестування в Jest не дозволяє побачити зміни шрифту, або інших стилів, які не відображаються у вихідному HTML-коді компоненти. Snapshots зберігають лише структуру JSX/HTML, яку рендерить компонента, і не включають інформацію про CSS-стилі, такі як колір, розмір шрифту, або інші візуальні властивості.

Сподіваюся, було цікаво. Дякую, що читаєте!

Цей текст з особистого блогу, опублікований з дозволу автора.