Функция mount(): полное монтирование

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

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

Для начала необходимо импортировать функцию:

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

Базовый синтаксис монтирования:

const wrapper = mount(MyComponent)

Здесь wrapper — объект обёртки, предоставляющий полный API для взаимодействия с компонентом: доступ к данным, методам, событиям и DOM-узлам.

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

mount() позволяет передавать начальные пропсы и данные через объект настроек:

const wrapper = mount(MyComponent, {
  props: {
    title: 'Тестовый заголовок'
  },
  data() {
    return {
      counter: 10
    }
  }
})
  • props — передача значений свойств, ожидаемых компонентом.
  • data — позволяет задать начальное состояние реактивных данных.

Можно обращаться к данным через wrapper.vm:

expect(wrapper.vm.counter).toBe(10)

wrapper.vm возвращает экземпляр Vue компонента, что даёт доступ к методам, вычисляемым свойствам и реактивным переменным.

Тестирование DOM

Полное монтирование даёт возможность проверять фактический DOM, а не его имитацию:

expect(wrapper.text()).toContain('Тестовый заголовок')
expect(wrapper.find('button').exists()).toBe(true)
  • wrapper.text() — возвращает текстовое содержимое компонента.
  • wrapper.find(selector) — ищет первый элемент по CSS-селектору.
  • wrapper.findAll(selector) — возвращает коллекцию найденных элементов.

mount() гарантирует, что дочерние компоненты тоже будут отрисованы и доступны для поиска.

Взаимодействие с событиями

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

const button = wrapper.find('button')
button.trigger('click')

expect(wrapper.vm.counter).toBe(11)

Метод trigger() поддерживает любые DOM-события (click, input, submit и т.д.). Это особенно важно для тестирования интерактивных компонентов с реактивным поведением.

Монтирование с плагинами и глобальными настройками

Vue Test Utils позволяет подключать глобальные плагины, компоненты и миксины прямо при монтировании:

const wrapper = mount(MyComponent, {
  global: {
    plugins: [MyPlugin],
    components: {
      'ChildComponent': ChildComponent
    },
    mocks: {
      $t: (msg) => msg
    }
  }
})
  • plugins — подключение сторонних Vue-плагинов.
  • components — регистрация глобальных дочерних компонентов.
  • mocks — имитация глобальных свойств, таких как $router или $store.

Такое монтирование позволяет тестировать компонент в окружении, максимально близком к реальному приложению.

Асимметричное поведение и слоты

mount() полностью поддерживает слоты и scoped slots:

const wrapper = mount(MyComponent, {
  slots: {
    default: '<span>Слот по умолчанию</span>',
    header: '<h1>Заголовок</h1>'
  }
})

expect(wrapper.find('span').text()).toBe('Слот по умолчанию')
expect(wrapper.find('h1').text()).toBe('Заголовок')

Также можно использовать функции для динамических слотов:

const wrapper = mount(MyComponent, {
  slots: {
    default: (props) => `<div>${props.text}</div>`
  }
})

Это позволяет тестировать слоты с вычисляемым содержимым, что невозможно при частичном монтировании.

Асинхронные действия и обновления DOM

Полное монтирование учитывает асинхронные обновления реактивных данных. Для корректной проверки изменений после мутаций используется nextTick():

await wrapper.setData({ counter: 20 })
await wrapper.vm.$nextTick()

expect(wrapper.text()).toContain('20')
  • setData() — изменяет реактивное состояние компонента.
  • $nextTick() — ожидает завершения обновления DOM.

Аналогично можно работать с асинхронными методами:

await wrapper.vm.loadData()
await wrapper.vm.$nextTick()

expect(wrapper.find('.item').exists()).toBe(true)

Отличия mount() от shallowMount()

Особенность mount() shallowMount()
Дочерние компоненты Полностью монтируются Подменяются заглушками
DOM Реальный Частичный
Тестирование слотов Полная поддержка Полная поддержка
Глобальные плагины и mocks Используются Используются
Идеален для Интеграционных тестов Юнит-тестов компонента

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

Заключение по использованию

Функция mount() обеспечивает глубокое и реалистичное тестирование компонентов Vue, позволяя проверять реактивные данные, события, DOM, слоты и интеграцию с плагинами. Использование этой функции целесообразно при необходимости имитации реального окружения, полного рендеринга компонента и проверки его функциональности на всех уровнях.

Оглавление