Функция shallowMount(): поверхностное монтирование

shallowMount() — ключевой инструмент библиотеки Vue Test Utils, предназначенный для поверхностного монтирования компонентов Vue. В отличие от mount(), который полностью рендерит компонент вместе с его дочерними компонентами, shallowMount() заменяет все дочерние компоненты заглушками (stubs). Это позволяет изолировать тестируемый компонент, упрощая тестирование его логики и поведения без влияния вложенных компонентов.

Основные возможности shallowMount()

  • Изоляция компонентов Все дочерние компоненты автоматически заменяются на заглушки, что позволяет сосредоточиться только на поведении текущего компонента.

  • Контроль props и слотов shallowMount() позволяет передавать props и слоты точно так же, как при обычном монтировании, обеспечивая полное управление входными данными компонента.

  • Тестирование методов и реактивности Методы компонента, вычисляемые свойства (computed) и наблюдатели (watchers) остаются полностью функциональными. Любые изменения реактивных данных можно отслеживать и проверять.

Синтаксис и базовое использование

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

const wrapper = shallowMount(MyComponent, {
  props: { title: 'Тестовый заголовок' },
  slots: { default: '<p>Содержимое слота</p>' }
})
  • props — объект с пропсами, передаваемыми компоненту.
  • slots — объект со слотами, где ключи соответствуют именам слотов, а значения — HTML-содержимое или компоненты.

Преимущества поверхностного монтирования

  1. Ускорение тестов Поскольку дочерние компоненты не рендерятся полностью, тесты выполняются быстрее, особенно в крупных приложениях с множеством вложенных компонентов.

  2. Упрощение тестовой среды Нет необходимости настраивать дочерние компоненты, что уменьшает количество внешних зависимостей и делает тесты более предсказуемыми.

  3. Изоляция логики компонента Фокус на внутренней логике компонента, проверка методов, реактивных свойств и событий без влияния внешних компонентов.

Работа с заглушками (stubs)

По умолчанию shallowMount() создает автоматические заглушки для всех дочерних компонентов. Возможна их явная настройка:

const wrapper = shallowMount(MyComponent, {
  global: {
    stubs: {
      ChildComponent: true, // простая заглушка
      AnotherComponent: { template: '<div>Заглушка</div>' } // кастомная заглушка
    }
  }
})
  • true — автоматическая заглушка с пустым шаблоном.
  • Объект с template — позволяет задать кастомный HTML для заглушки.
  • Заглушки могут использоваться для имитации событий дочерних компонентов через $emit.

Проверка взаимодействия с дочерними компонентами

Даже при использовании shallowMount() можно проверять, что дочерний компонент был вызван с нужными props:

const wrapper = shallowMount(MyComponent)

expect(wrapper.findComponent({ name: 'ChildComponent' }).exists()).toBe(true)
expect(wrapper.findComponent({ name: 'ChildComponent' }).props('value')).toBe('тест')

Здесь findComponent позволяет находить замещенные компоненты по имени или конструктору и проверять переданные им данные.

Работа с событиями и методами компонента

Методы компонента остаются полностью доступными:

wrapper.vm.myMethod()
expect(wrapper.vm.someData).toBe('обновлено')

События также можно тестировать:

wrapper.find('button').trigger('click')
expect(wrapper.emitted('custom-event')).toBeTruthy()

shallowMount() не мешает работе событий, что позволяет проверять корректность их генерации внутри тестируемого компонента.

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

Изменения в data и computed свойствах компонента корректно отслеживаются:

wrapper.vm.counter++
await wrapper.vm.$nextTick()
expect(wrapper.find('span').text()).toBe('1')

Даже с поверхностным монтированием Vue обеспечивает реактивное обновление DOM для текущего компонента, что делает shallowMount() удобным для проверки динамического поведения.

Использование вместе с глобальными плагинами

Если компонент использует Vuex, Vue Router или другие плагины, их можно подключать через опцию global:

import { createStore } from 'vuex'

const store = createStore({ state: { count: 0 } })

const wrapper = shallowMount(MyComponent, {
  global: { plugins: [store] }
})

shallowMount() корректно работает с такими плагинами, не рендеря полностью дочерние компоненты.

Ограничения shallowMount()

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

shallowMount() обеспечивает мощный инструмент для модульного тестирования компонентов Vue, позволяя изолировать логику, ускорять тесты и сосредотачиваться на поведении конкретного компонента без лишнего шума от дочерних компонентов.

Оглавление