Создание снимков

Создание снимков (или snapshots) — это одна из самых мощных возможностей Jest, которая позволяет автоматически проверять корректность UI и вывод данных, делая снимок состояния компонентов или значений в момент выполнения теста. Снимки сохраняются в виде файлов и служат эталоном для дальнейшего сравнения с результатами последующих тестов. Это помогает быстро обнаружить изменения в UI или структуре данных, которые могут возникнуть после внесения изменений в код.

Как работает создание снимков

Jest сохраняет снимки в папке __snapshots__, которая находится рядом с тестируемыми файлами. Каждый снимок представляет собой сериализованное представление объекта, строки или компонента, зафиксированное в момент выполнения теста. Когда тест повторно выполняется, Jest сравнивает текущий снимок с сохранённым и предупреждает о различиях, если они есть.

Создание снимков — это процесс, который включает несколько важных этапов:

  1. Генерация снимка: Когда тест выполняется, Jest создает снимок данных или компонента, который передается в функцию проверки.
  2. Сохранение снимка: Этот снимок сохраняется в директории __snapshots__.
  3. Сравнение снимков: При следующем запуске теста Jest сравнивает текущий снимок с сохранённым и сообщает о различиях.

Основные команды для работы с снимками

  • toMatchSnapshot(): Это основной метод для создания снимков. Он проверяет, что текущий результат соответствует сохранённому снимку.
  • toThrowErrorMatchingSnapshot(): Используется для проверки, что ошибка, выбрасываемая в коде, соответствует ожидаемому снимку.
  • jest --updateSnapshot: Команда для обновления снимков, если изменения в коде привели к изменению вывода, и нужно обновить эталонные снимки.

Пример создания снимка

Для начала, рассмотрим простой пример создания снимка для функции, которая генерирует строку:

// Функция, которую будем тестировать
function greet(name) {
  return `Hello, ${name}!`;
}

// Тестирование с использованием снимков
test('greets user with a message', () => {
  const message = greet('John');
  expect(message).toMatchSnapshot();
});

При первом запуске Jest создаст файл снимка в директории __snapshots__, содержащий сериализованную версию строки Hello, John!. Если код функции изменится и строка приветствия изменится, Jest сообщит об этом и предложит обновить снимок.

Особенности работы с компонентами React

В случае с React-компонентами Jest позволяет создавать снимки для JSX-выводов, что особенно полезно при тестировании UI. Вместо того чтобы проверять каждое изменение вручную, можно просто сделать снимок разметки компонента.

Пример для компонента React:

import React from 'react';
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders correctly', () => {
  const { asFragment } = render(<MyComponent />);
  expect(asFragment()).toMatchSnapshot();
});

В этом примере используется метод asFragment() из библиотеки @testing-library/react, который генерирует снимок DOM-дерева, соответствующего компоненту. Снимок будет сохранён и при последующих тестах Jest проверит, не изменился ли DOM-вывод компонента.

Обновление и управление снимками

Когда код изменяется, могут появляться новые или изменённые снимки. Jest предлагает несколько вариантов работы с этим:

  • Автоматическое обновление снимков: Если в коде произошли значительные изменения, можно использовать флаг --updateSnapshot, чтобы Jest автоматически обновил старые снимки и продолжил тестирование с актуальными версиями.
jest --updateSnapshot

  • Проверка изменений без обновления: В случае если необходимо только проверить, изменился ли снимок, но не обновлять его, можно запустить тесты с флагом --no-updateSnapshot.

  • Удаление устаревших снимков: Иногда бывает необходимо удалить снимки, которые больше не используются в тестах. Jest поддерживает очистку старых снимков через команду --clearCache.

Тестирование ошибок с использованием снимков

Jest поддерживает создание снимков для ошибок, что полезно для проверки выбрасываемых исключений. Это можно сделать с помощью метода toThrowErrorMatchingSnapshot(), который проверяет, что ошибка, выбрасываемая функцией, соответствует сохранённому снимку.

Пример:

function throwError() {
  throw new Error('Something went wrong');
}

test('throws an error', () => {
  expect(() => throwError()).toThrowErrorMatchingSnapshot();
});

Если ошибка в будущем изменится (например, текст ошибки или структура), Jest сообщит об этом и предложит обновить снимок.

Оптимизация и производительность снимков

Хотя снимки удобны, важно помнить о нескольких моментах, чтобы тесты не стали слишком медленными:

  • Частота изменений: Снимки хороши для стабильных и часто используемых компонентов. Для компонентов или данных, которые часто меняются, их использование может привести к частым обновлениям снимков.
  • Чистота снимков: Стоит избегать захвата лишней информации, такой как временные метки или уникальные идентификаторы, которые могут изменяться при каждом запуске тестов. Это помогает избежать лишних изменений в снимках и повышает стабильность тестов.

Преимущества и недостатки использования снимков

Преимущества:

  • Быстрое обнаружение изменений в UI или логике.
  • Простота использования с компонентами и данными.
  • Легкость в поддержке больших проектов благодаря автоматическому обновлению снимков.

Недостатки:

  • Высокая чувствительность к незначительным изменениям.
  • Не подходит для проверки динамических данных или состояния, которые могут изменяться в разных окружениях (например, даты или случайные значения).
  • Потенциальная избыточность тестов, если снимки часто обновляются, даже если изменения не критичны.

Создание снимков в Jest — это мощный инструмент для автоматизированного тестирования, позволяющий легко и быстро проверять выводы компонентов и функций. Правильное использование снимков помогает поддерживать код в стабильном состоянии, минимизируя ошибки, вызванные непредсказуемыми изменениями в UI и логике приложения.

Оглавление