Функции mount и shallowMount

В Vue Test Utils функции mount и shallowMount являются базовыми инструментами для изоляции и анализа компонентов. Обе функции создают обёртку (Wrapper) вокруг Vue-компонента, но принципиально различаются глубиной рендеринга и степенью вовлечённости дочерних компонентов. Понимание этой разницы определяет архитектуру тестов, их производительность и устойчивость к изменениям кода.

Функция mount: полный рендеринг компонента

mount создаёт полноценный экземпляр компонента вместе со всеми вложенными дочерними компонентами. Происходит реальный рендер шаблона, выполнение хуков жизненного цикла и инициализация реактивности.

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

const wrapper = mount(ParentComponent)

Особенности поведения

  • Рендерятся все дочерние компоненты, включая их шаблоны, методы и хуки.
  • Выполняются все побочные эффекты, связанные с жизненным циклом (mounted, watch, computed).
  • Доступна полная DOM-структура, соответствующая реальному поведению приложения.

Такой подход приближен к интеграционному тестированию на уровне компонентов и позволяет проверять взаимодействие между ними без дополнительной конфигурации.

Последствия использования

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

Функция shallowMount: поверхностный рендеринг

shallowMount создаёт компонент в изолированном виде, автоматически подменяя все дочерние компоненты заглушками (stubs).

import { shallowMount } from '@vue/test-utils'
import ParentComponent from '@/components/ParentComponent.vue'

const wrapper = shallowMount(ParentComponent)

Как работает подмена компонентов

Каждый вложенный компонент заменяется минимальной реализацией вида:

<child-component-stub></child-component-stub>

При этом:

  • Пропсы передаются.
  • События можно эмитить вручную.
  • Внутренний шаблон и логика дочернего компонента не выполняются.

Практические эффекты

  • Изоляция тестируемого компонента от внешних зависимостей.
  • Резкое снижение сложности DOM.
  • Повышение скорости выполнения тестов.

Сравнение mount и shallowMount

Характеристика mount shallowMount
Рендер дочерних компонентов Полный Заглушки
Скорость тестов Ниже Выше
Уровень изоляции Низкий Высокий
Подходит для Интеграционных проверок Модульных тестов
Устойчивость тестов Ниже при рефакторинге Выше

Влияние на стратегию тестирования

Использование mount формирует тесты, ориентированные на поведение связки компонентов. Проверяется не только логика самого компонента, но и корректность его окружения. Такой подход оправдан при тестировании:

  • компонентов-контейнеров;
  • сложных форм;
  • взаимодействия через события и слоты.

shallowMount ориентирован на проверку внутренней логики:

  • вычисляемых свойств;
  • условий рендеринга;
  • реакций на входные пропсы;
  • эмиссии событий.

Работа с stubs и mount

Обе функции поддерживают явную подмену дочерних компонентов через опцию global.stubs.

mount(Component, {
  global: {
    stubs: {
      ChildComponent: true
    }
  }
})

В случае shallowMount это позволяет:

  • отключать подмену для конкретных компонентов;
  • заменять заглушку кастомной реализацией.
shallowMount(Component, {
  global: {
    stubs: {
      ImportantChild: {
        template: '<div>stub</div>'
      }
    }
  }
})

Таким образом достигается гибкий баланс между изоляцией и необходимым уровнем детализации.

Доступ к DOM и API Wrapper

Независимо от выбранной функции, результатом является Wrapper, предоставляющий единый API:

  • find, findAll — поиск элементов;
  • text, html — извлечение контента;
  • props, emitted — анализ данных и событий;
  • setProps, setData — изменение состояния.

Разница заключается не в интерфейсе, а в том, какие элементы реально присутствуют в DOM.

Жизненный цикл и асинхронность

При использовании mount дочерние компоненты могут запускать асинхронные операции:

  • запросы данных;
  • таймеры;
  • подписки.

Это требует дополнительных механизмов синхронизации (nextTick, flushPromises). shallowMount минимизирует такие эффекты, так как логика дочерних компонентов не выполняется.

Ошибки проектирования тестов

Часто встречающиеся проблемы:

  • использование mount для тестирования простой логики;
  • проверка разметки дочерних компонентов в тестах родительского;
  • зависимость тестов от структуры DOM вложенных компонентов.

Все эти ошибки увеличивают стоимость поддержки тестов и усложняют рефакторинг.

Архитектурное значение выбора

Выбор между mount и shallowMount — не синтаксический, а архитектурный. Он отражает границы ответственности теста и определяет, считается ли дочерний компонент частью тестируемой системы или внешней зависимостью.

В корректно выстроенной системе тестирования:

  • shallowMount доминирует в модульных тестах;
  • mount используется точечно, там где важна связка компонентов;
  • оба инструмента дополняют друг друга, а не конкурируют.
Оглавление