Навигация по иерархии: parent, element, vm

Vue Test Utils предоставляет богатый набор инструментов для тестирования компонентов Vue, включая возможности навигации по иерархии компонентов. Понимание структуры и связей между компонентами является критически важным при написании комплексных тестов, особенно когда необходимо проверять взаимодействие между родителем и потомками или получать доступ к внутренним состояниям компонентов. Основные элементы навигации: parent, element и vm.

wrapper.vm — экземпляр компонента

Каждый компонент Vue в тестах оборачивается в wrapper, предоставляемый Vue Test Utils. Свойство vm позволяет получить доступ к экземпляру компонента, что открывает прямую работу с данными, методами и вычисляемыми свойствами:

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

const wrapper = mount(Counter)
wrapper.vm.count = 5
wrapper.vm.increment()
expect(wrapper.vm.count).toBe(6)

Ключевые моменты:

  • Доступ к данным: wrapper.vm.someData
  • Вызов методов: wrapper.vm.someMethod()
  • Доступ к вычисляемым свойствам: wrapper.vm.computedProperty

vm отражает реальный экземпляр Vue, включая реактивность. Изменения через vm автоматически отражаются в DOM, если вызвать wrapper.vm.$nextTick() или использовать асинхронные проверки.

wrapper.element — корневой DOM-элемент

Свойство element возвращает реальный HTML-элемент, соответствующий корню компонента:

const wrapper = mount(Counter)
expect(wrapper.element.tagName).toBe('DIV')
expect(wrapper.element.textContent).toContain('0')

Применение element:

  • Проверка структуры DOM, тегов и классов.
  • Чтение текста, атрибутов, содержимого элементов.
  • Интеграция с нативными DOM-API для нестандартных проверок.

Важно помнить, что element относится только к корню компонента. Для поиска вложенных элементов используется find или findAll.

wrapper.parent() — навигация к родительскому компоненту

Метод parent() позволяет подняться на уровень выше по иерархии компонентов:

import ParentComponent from '@/components/ParentComponent.vue'
import ChildComponent from '@/components/ChildComponent.vue'

const wrapper = mount(ParentComponent)
const childWrapper = wrapper.findComponent(ChildComponent)
const parentWrapper = childWrapper.parent()
expect(parentWrapper.vm).toBe(wrapper.vm)

Особенности parent():

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

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

find и findComponent — поиск потомков

Для работы с дочерними компонентами используются методы find и findComponent, которые возвращают wrapper элемента или компонента, позволяя затем работать с их vm и element:

const wrapper = mount(ParentComponent)
const childWrapper = wrapper.findComponent(ChildComponent)

childWrapper.vm.childMethod()
expect(childWrapper.element.textContent).toContain('Hello')
  • find('selector') ищет HTML-элементы по CSS-селектору.
  • findComponent(Component) ищет дочерние компоненты Vue по их конструктору.

Комбинируя эти методы с parent(), можно перемещаться по иерархии вверх и вниз, проверяя данные и DOM на каждом уровне.

Практическое использование в тестах

  1. Проверка передачи пропсов от родителя к потомку:
const wrapper = mount(ParentComponent)
const childWrapper = wrapper.findComponent(ChildComponent)
expect(childWrapper.props('title')).toBe('Заголовок')
  1. Обработка событий дочернего компонента и реакция родителя:
childWrapper.vm.$emit('update', 10)
expect(wrapper.vm.value).toBe(10)
  1. Навигация к родителю для проверки состояния после взаимодействия потомка:
const parentWrapper = childWrapper.parent()
expect(parentWrapper.vm.status).toBe('updated')
  1. Проверка DOM дочернего элемента через element:
expect(childWrapper.element.textContent).toContain('Привет')

Рекомендации по использованию parent, vm и element

  • vm — для доступа к внутреннему состоянию и методам компонента.
  • element — для проверки фактического HTML и структуры DOM.
  • parent() — для перемещения вверх по компонентной иерархии и тестирования взаимодействия с родителем.
  • Комбинирование этих свойств с find и findComponent позволяет создавать комплексные тесты для многослойных компонентов, обеспечивая полный контроль над состоянием и DOM.

Использование этих инструментов делает тесты более точными и позволяет отслеживать любые изменения как на уровне данных, так и на уровне визуального представления компонентов.

Оглавление