You’re browsing the documentation for Vue Test Utils for Vue v2.x and earlier.

To read docs for Vue Test Utils for Vue 3, click here.

Wrapper

Vue Test Utils — это API основанное на использовании обёрток (wrapper).

Wrapper — это объект, который содержит примонтированный компонент или VNode и методы для тестирования компонента или VNnode.

Свойства

`vm`

Component (только для чтения): Это экземпляр Vue. Вы можете получить доступ ко всем методам и свойствам экземпляра через wrapper.vm. Это существует только в обёртке компонента Vue или обёртке компонента Vue, связанной с HTMLElement.

`element`

HTMLElement (только для чтения): Корневой DOM-узел обёртки

`options`

`options.attachedToDocument`

Boolean (только для чтения): true, если компонент прикреплен к DOM при монтировании.

Методы

attributes()

Возвращает объект атрибутов DOM-узла Wrapper. Если аргумент key присутствует, метод вернёт значение атрибута, заданного через key.

Аргументы:
- {string} key опционально
Возвращает: {[attribute: string]: any}
Пример:

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

const wrapper = mount(Foo)
expect(wrapper.attributes().id).toBe('foo')
expect(wrapper.attributes('id')).toBe('foo')

classes()

Возвращает классы DOM-узла Wrapper.

Возвращает массив имён классов. Либо true/false если передано имя класса.

Аргументы:
- {string} className опционально
Возвращает: Array<{string}>
Пример:

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

const wrapper = mount(Foo)
expect(wrapper.classes()).toContain('bar')
expect(wrapper.classes('bar')).toBe(true)

contains(selector)

Проверка, что Wrapper содержит элемент или компонент, соответствующий селектору.

Принимает:
- {string|Component} selector
Возвращает: {boolean}
Пример:

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const wrapper = mount(Foo)
expect(wrapper.contains('p')).toBe(true)
expect(wrapper.contains(Bar)).toBe(true)

См. также: Селекторы

destroy()

Уничтожает экземпляр компонента Vue.

Пример:

import { mount } from '@vue/test-utils'
import sinon from 'sinon'

const spy = sinon.stub()
mount({
  render: null,
  destroyed() {
    spy()
  }
}).destroy()
expect(spy.calledOnce).toBe(true)

Если опция attachToDocument была true при монтировании, DOM элементы компонента будут также удалены из документа.

Для функциональных компонентов, destroy только удаляет отрисованные элементы DOM из документа.

emitted()

Возвращает объект, содержащий вызванные пользовательские события в Wrapper vm.

Возвращает: { [name: string]: Array<Array<any>> }
Пример:

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

const wrapper = mount(Component)

wrapper.vm.$emit('foo')
wrapper.vm.$emit('foo', 123)

/*
wrapper.emitted() возвращает следующий объект:
{
  foo: [[], [123]]
}
*/

// проверка, что событие было вызвано
expect(wrapper.emitted().foo).toBeTruthy()

// проверка, что событие вызывалось определённое число раз
expect(wrapper.emitted().foo.length).toBe(2)

// проверка, что с событием были переданы определённые данные
expect(wrapper.emitted().foo[1]).toEqual([123])

Вы также можете написать это так:

// проверка, что событие было вызвано
expect(wrapper.emitted('foo')).toBeTruthy()

// проверка, что событие вызывалось определённое число раз
expect(wrapper.emitted('foo').length).toBe(2)

// проверка, что с событием были переданы определённые данные
expect(wrapper.emitted('foo')[1]).toEqual([123])

Когда метод .emitted() вызывается, каждый раз возвращается тот же объект, а не новый, поэтому объект будет обновляться при генерации новых событий:

const emitted = wrapper.emitted()

expect(emitted.foo.length).toBe(1)

// делаем что-то, что заставляет `wrapper` сгенерировать событие "foo"

expect(emitted.foo.length).toBe(2)

emittedByOrder()

Возвращает массив, содержащий вызванные пользовательские события в Wrapper vm.

Возвращает: Array<{ name: string, args: Array<any> }>
Пример:

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

const wrapper = mount(Component)

wrapper.vm.$emit('foo')
wrapper.vm.$emit('bar', 123)

/*
wrapper.emittedByOrder() возвращает следующий массив:
[
  { name: 'foo', args: [] },
  { name: 'bar', args: [123] }
]
*/

// проверка, что события были вызваны в определённом порядке
expect(wrapper.emittedByOrder().map(e => e.name)).toEqual(['foo', 'bar'])

exists()

Проверка, что Wrapper или WrapperArray существует.

Возвращает false, если вызывается на пустом Wrapper или WrapperArray.

Возвращает: {boolean}
Пример:

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

const wrapper = mount(Foo)
expect(wrapper.exists()).toBe(true)
expect(wrapper.find('does-not-exist').exists()).toBe(false)
expect(wrapper.findAll('div').exists()).toBe(true)
expect(wrapper.findAll('does-not-exist').exists()).toBe(false)

find(selector)

Возвращает Wrapper первого DOM-узла или компонента Vue, соответствующего селектору.

Используйте любой корректный селектор.

Принимает:
- {string|Component} selector
Возвращает: {Wrapper}
Пример:

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const wrapper = mount(Foo)

const div = wrapper.find('div')
expect(div.is('div')).toBe(true)

const bar = wrapper.find(Bar)
expect(bar.is(Bar)).toBe(true)

const barByName = wrapper.find({ name: 'bar' })
expect(barByName.is(Bar)).toBe(true)

const fooRef = wrapper.find({ ref: 'foo' })
expect(fooRef.is(Foo)).toBe(true)

findAll(selector)

Возвращает WrapperArray.

Используйте любой корректный селектор.

Принимает:
- {string|Component} selector
Возвращает: {WrapperArray}
Пример:

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const wrapper = mount(Foo)
const div = wrapper.findAll('div').at(0)
expect(div.is('div')).toBe(true)
const bar = wrapper.findAll(Bar).at(0)
expect(bar.is(Bar)).toBe(true)

html()

Возвращает HTML-код DOM-узла Wrapperа в виде строки.

Возвращает: {string}
Пример:

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

const wrapper = mount(Foo)
expect(wrapper.html()).toBe('<div><p>Foo</p></div>')

is(selector)

Проверяет, что DOM-элемент Wrapper или vm соответствуют селектору.

Принимает:
- {string|Component} selector
Возвращает: {boolean}
Пример:

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

const wrapper = mount(Foo)
expect(wrapper.is('div')).toBe(true)

isEmpty()

Проверяет, что Wrapper не содержит дочерних узлов.

Возвращает: {boolean}
Пример:

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

const wrapper = mount(Foo)
expect(wrapper.isEmpty()).toBe(true)

isVisible()

Проверяет, что Wrapper виден.

Возвращает false, если какой-либо предок имеет стили display: none, visibility: hidden, opacity: 0, аттрибут hidden или находится в свёрнутом элементе <details>.

Это можно использовать для проверки, что компонент скрыт с помощью v-show.

Возвращает: {boolean}
Пример:

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

const wrapper = mount(Foo)
expect(wrapper.isVisible()).toBe(true)
expect(wrapper.find('.is-not-visible').isVisible()).toBe(false)

isVueInstance()

Проверка, что Wrapper является экземпляром Vue.

Возвращает: {boolean}
Пример:

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

const wrapper = mount(Foo)
expect(wrapper.isVueInstance()).toBe(true)

name()

Возвращает имя компонента, если Wrapper содержит экземпляр Vue, или имя тега DOM-узла Wrapper, если Wrapper не содержит экземпляр Vue.

Возвращает: {string}
Пример:

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

const wrapper = mount(Foo)
expect(wrapper.name()).toBe('Foo')
const p = wrapper.find('p')
expect(p.name()).toBe('p')

props()

Возвращает объект с входными параметрами vm для Wrapper. Если key передан, метод вернёт значения свойства с именем key.

Обратите внимание что Wrapper должен содержать экземпляр Vue.

Принимает:
- {string} key опционально
Возвращает: {[prop: string]: any}
Пример:

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

const wrapper = mount(Foo, {
  propsData: {
    bar: 'baz'
  }
})
expect(wrapper.props().bar).toBe('baz')
expect(wrapper.props('bar')).toBe('baz')

setChecked(checked)

Устанавливает значение отмеченным элемент ввода типа чекбокса или радиокнопки и обновляет связанные данные с v-model.

Аргументы:
- {Boolean} checked (по умолчанию: true)
Примеры:

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

test('setChecked demo', async () => {
  const wrapper = mount(Foo)
  const radioInput = wrapper.find('input[type="radio"]')

  await radioInput.setChecked()

  expect(radioInput.element.checked).toBeTruthy()
})

Примечание:

Когда вы пытаетесь установить значение в состояние через v-model с помощью radioInput.element.checked = true; radioInput.trigger('input'), v-model не вызывается. v-model генерируется событием change.

checkboxInput.setChecked(checked) — псевдоним для следующего кода.

checkboxInput.element.checked = checked
checkboxInput.trigger('click')
checkboxInput.trigger('change')

setData(data)

Устанавливает данные Wrapper vm.

setData работает путём рекурсивного вызова Vue.set.

Обратите внимание, что Wrapper должен содержать экземпляр Vue.

setData работает путём слияния существующих свойств, за исключением массивов, которые перезаписываются.

Принимает:
- {Object} data
Пример:

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

test('setData demo', async () => {
  const wrapper = mount(Foo)

  await wrapper.setData({ foo: 'bar' })

  expect(wrapper.vm.foo).toBe('bar')
})

setMethods(methods)

Устанавливает методы Wrapper vm и выполняет принудительное обновление.

Обратите внимание, что Wrapper должен содержать экземпляр Vue.

Принимает:
- {Object} methods
Пример:

import { mount } from '@vue/test-utils'
import sinon from 'sinon'
import Foo from './Foo.vue'

const wrapper = mount(Foo)
const clickMethodStub = sinon.stub()

wrapper.setMethods({ clickMethod: clickMethodStub })
wrapper.find('button').trigger('click')
expect(clickMethodStub.called).toBe(true)

setProps(props)

Принимает:
- {Object} props
Использование:

Устанавливает входные параметры Wrapper vm и выполняет принудительное обновление.

Обратите внимание!

setProps может быть вызван только на wrapper верхнего уровня, который был создан с помощью mount или shallowMount

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

test('setProps demo', async () => {
  const wrapper = mount(Foo)

  await wrapper.setProps({ foo: 'bar' })

  expect(wrapper.vm.foo).toBe('bar')
})

Вы также можете передать объект propsData, который инициализирует экземпляр Vue с переданными значениями.

// Foo.vue
export default {
  props: {
    foo: {
      type: String,
      required: true
    }
  }
}

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

const wrapper = mount(Foo, {
  propsData: {
    foo: 'bar'
  }
})

expect(wrapper.vm.foo).toBe('bar')

setSelected()

Выбирает элемент пункта списка и обновляет связанные данные v-model.

Пример:

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

test('setSelected demo', async () => {
  const wrapper = mount(Foo)
  const options = wrapper.find('select').findAll('option')

  await options.at(1).setSelected()

  expect(wrapper.find('option:checked').element.value).toBe('bar')
})

Примечание:

Когда вы пытаетесь установить значение в состояние через v-model с помощью option.element.selected = true; parentSelect.trigger('input'), v-model не вызывается. v-model генерируется событием change.

option.setSelected() — псевдоним для следующего кода.

option.element.selected = true
parentSelect.trigger('change')

setValue(value)

Устанавливает значение элемента поле ввода текста или выпадающего списка и обновляет связанные данные v-model.

Аргументы:
- {any} value
Пример:

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

test('setValue demo', async () => {
  const wrapper = mount(Foo)

  const textInput = wrapper.find('input[type="text"]')
  await textInput.setValue('some value')

  expect(wrapper.find('input[type="text"]').element.value).toBe('some value')

  const select = wrapper.find('select')
  await select.setValue('option value')

  expect(wrapper.find('select').element.value).toBe('option value')

  // requires <select multiple>
  const multiselect = wrapper.find('select')
  await multiselect.setValue(['value1', 'value3'])

  const selectedOptions = Array.from(multiselect.element.selectedOptions).map(
    o => o.value
  )
  expect(selectedOptions).toEqual(['value1', 'value3'])
})

Примечание:
- textInput.setValue(value) — псевдоним следующего кода.
```
textInput.element.value = value
textInput.trigger('input')
```
- select.setValue(value) — псевдоним следующего кода.
```
select.element.value = value
select.trigger('change')
```

text()

Возвращает текстовое содержимое Wrapper.

Возвращает: {string}
Пример:

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

const wrapper = mount(Foo)
expect(wrapper.text()).toBe('bar')

trigger(eventType [, options ])

Вызывает событие на Wrapper DOM-узле.

В trigger также можно передать опциональный объект options. Свойства объекта options будут добавлены к Event.

Принимает:
- {string} eventName обязательный
- {Object} options опциональный
Пример:

import { mount } from '@vue/test-utils'
import sinon from 'sinon'
import Foo from './Foo'

test('trigger demo', async () => {
  const clickHandler = sinon.stub()
  const wrapper = mount(Foo, {
    propsData: { clickHandler }
  })

  await wrapper.trigger('click')

  await wrapper.trigger('click', {
    button: 0
  })

  await wrapper.trigger('click', {
    ctrlKey: true
  })

  expect(clickHandler.called).toBe(true)
})

Установка target для event:

Под капотом trigger создаёт объект Event и вызывает событие на элементе Wrapper.

Невозможно изменить значение target объекта Event, поэтому вы не можете установить target в объекте опций.

Чтобы добавить атрибут к target, вам нужно установить значение элемента Wrapper перед вызовом trigger. Вы можете сделать это с помощью свойства element.

const input = wrapper.find('input')
input.element.value = 100
input.trigger('click')

← API WrapperArray →

# Wrapper

# Свойства

# vm

# element

# options

# options.attachedToDocument

# Методы

# attributes()

# classes()

# contains(selector)

# destroy()

# emitted()

# emittedByOrder()

# exists()

# find(selector)

# findAll(selector)

# html()

# is(selector)

# isEmpty()

# isVisible()

# isVueInstance()

# name()

# props()

# setChecked(checked)

# setData(data)

# setMethods(methods)

# setProps(props)

# setSelected()

# setValue(value)

# text()

# trigger(eventType [, options ])