Обновление снимков

В тестировании компонентов Vue одним из ключевых инструментов является снимок (snapshot). Снимки позволяют фиксировать текущую структуру разметки компонента и автоматически проверять, что последующие изменения кода не нарушают ожидаемое поведение. Иногда возникает необходимость обновить снимок, чтобы он соответствовал новым требованиям или изменениям интерфейса.

Суть работы со снимками

Vue Test Utils в связке с Jest использует механизм сериализации компонента в строку HTML. При первом запуске теста создаётся файл снимка, например Component.spec.js.snap, который содержит сериализованное представление DOM компонента. Каждый последующий запуск сравнивает актуальный DOM с сохранённым снимком:

import { mount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';

test('рендерится корректно', () => {
  const wrapper = mount(MyComponent);
  expect(wrapper.html()).toMatchSnapshot();
});

Если компонент изменился, Jest отмечает тест как failed, указывая, что текущий DOM не совпадает со снимком. Это нормальный процесс — снимок фиксирует именно текущее состояние компонента.

Причины обновления снимков

Снимок нужно обновлять в случаях:

  • Добавлены новые элементы или атрибуты.
  • Изменена структура шаблона компонента.
  • Обновлены стили, влияющие на классы или текстовую разметку.
  • Миграция на новую версию Vue или сторонней библиотеки, влияющая на вывод HTML.

Обновление позволяет тесту корректно отражать намеренные изменения, сохраняя защиту от непреднамеренных регрессий.

Механизмы обновления

1. Ручное обновление через Jest CLI

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

jest -u

или с полным названием:

npm run test -- -u

Флаг -u (--updateSnapshot) сообщает Jest перезаписать все снимки, которые не совпадают с текущим выводом компонентов.

2. Обновление отдельного снимка

Можно использовать режим интерактивного запуска Jest с клавишей u. При запуске тестов Jest предложит:

Press `u` to update failing snapshots

Нажатие u обновляет только те снимки, которые были отмечены как несоответствующие.

3. Программное управление

Если требуется обновлять снимки программно, можно использовать API Jest:

expect(wrapper.html()).toMatchSnapshot({ updateSnapshot: true });

Однако чаще используют CLI-методы, так как они более прозрачны и позволяют контролировать процесс централизованно.

Лучшие практики при обновлении снимков

  • Минимизировать ненужные обновления. Частое обновление без проверки изменений снижает ценность теста. Сначала необходимо убедиться, что изменения в DOM целенаправленные.
  • Сравнивать изменения вручную. Перед обновлением важно проверить, какие именно строки были изменены.
  • Делать коммиты вместе с обновлёнными снимками. Снимки должны быть версионированы вместе с кодом компонента, чтобы история изменений была прозрачной.
  • Избегать динамичных данных. Снимки плохо подходят для содержимого, которое меняется при каждом рендере (например, даты или случайные числа). В таких случаях используют мок-данные или jest.mock.

Взаимодействие с Vue Test Utils

Vue Test Utils предоставляет дополнительные возможности для контроля над снимками:

  • Сериализация пропсов и слотов. С помощью методов wrapper.setProps и wrapper.setSlots можно проверить, как изменяется HTML при различных входных данных и обновлять снимки для каждого варианта.
  • Снимки состояния после событий. Можно симулировать события (trigger) и делать снимки после них:
wrapper.find('button').trigger('click');
expect(wrapper.html()).toMatchSnapshot();
  • Комбинация с find и findComponent. Можно делать снимки части компонента, а не всей структуры:
expect(wrapper.find('.header').html()).toMatchSnapshot();

Обновление в больших проектах

В проектах с сотнями компонентов часто используют стратегию:

  1. Локальное обновление снимков для конкретного компонента через интерактивный режим.
  2. Полный пересмотр и обновление всех снимков после релиза крупной версии или рефакторинга.
  3. Регулярная проверка CI/CD на несоответствие снимков, чтобы предотвратить незамеченные изменения в UI.

Эта стратегия помогает поддерживать снимки в актуальном состоянии и предотвращает ложные срабатывания тестов.

Итоговый подход

Обновление снимков — это процесс контроля за тем, что DOM компонента соответствует ожидаемому виду. Оно требует внимательности, проверки изменений и разумного использования инструментов Jest и Vue Test Utils. Снимки должны фиксировать значимые изменения интерфейса, но не становиться источником автоматических ошибок из-за динамичных данных или несущественных изменений.

Оглавление