Что такое snapshot

Question

Что такое snapshot

Тип вопроса: Тестирование Вероятность: 10% Категория: Frontend Разработчик

Ответ

Snapshot (снимок) — это сохранённое состояние данных или UI на определённый момент времени. В контексте фронтенда часто используется для:

Тестирования (Jest, Storybook) — сравнения текущего рендера компонента с эталонным снимком.
Состояния приложения (Redux, Zustand) — сохранения состояния для отката или дебага.

Пример snapshot-теста в Jest:

test('Button renders correctly', () => {
  const button = render(<Button>Click</Button>);
  expect(button).toMatchSnapshot();
});

Особенности:

Хранятся как текстовые файлы (обычно в __snapshots__)
Требуют обновления при изменении компонента (jest -u)
Не заменяют unit-тесты, а дополняют их

Ответ 18+ 🔞

А, снимки, блядь! Ну это ж классика, ёпта! Представь себе, ты как будто фотку на телефон делаешь, но не свою рожу, а какого-нибудь компонента или всего состояния приложения. Заморозил момент — и всё, пиздец, у тебя есть эталон, с которым потом можно сравнивать.

Вот смотри, где эта хуйня применяется:

Для тестов, блядь. Ты написал кнопку, она рендерится. Ты её сфоткал через Jest или Storybook — и всё, снимок в кармане. Потом, если какой-нибудь коллега-распиздяй нечаянно цвет бордера поменяет, тест сломается и заорёт: «Чувак, бля, тут пиксель съехал, ты чё творишь?!» Удивление пиздец, но полезно.
Для состояния приложения. Это когда у тебя в Redux или Zustand такой пиздец творится, что уже не понять, в какой момент всё пошло по пизде. А ты — хвать! — делаешь снепшот состояния. Теперь можно как в машине времени туда-сюда прыгать и искать, где же, сука, баг зародился. Волнение ебать, но помогает.

Вот, смотри, как это в коде выглядит, простейший пример:

test('Кнопка рендерится правильно', () => {
  const button = render(<Button>Жми сюда</Button>);
  expect(button).toMatchSnapshot(); // Щёлк! И фотка готова.
});

А теперь, внимание, особенности, без которых нихуя не понять:

Хранятся эти «фотки» как текстовые файлы, обычно в папочке __snapshots__. Откроешь — а там разметка твоего компонента лежит. Не картинка, а именно код.
Требуют обновления, ёпта! Это главная засада. Изменил ты кнопку — дизайнер сказал, что тень нужна. Так тебе теперь надо все снепшоты переснять, командой jest -u. А иначе тесты будут орать, что эталон не совпадает с новой красивой кнопкой. Подозрение ебать чувствую, что многие про это забывают.
Это не панацея, блядь! Это тупое сравнение «было — стало». Оно не проверит, что кнопка по клику вызывает нужную функцию. Так что это дополнение к нормальным unit-тестам, а не замена им. Чисто чтобы случайно хуйню не завезти в вёрстку.

Короче, инструмент как молоток: в нужных руках — полезная хуйня, а если по лбу себе им стукнуть — будет больно и бестолково.