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, если attachedToDocument в опциях монтирования было true

options.sync

Boolean: True, если sync в опциях монтирования не было false

Методы

attributes()

Возвращает объект атрибута DOM-узла Wrapper.

  • Возвращает: {[attribute: string]: any}

  • Пример:

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

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

classes()

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

Возвращает массив имён классов.

  • Возвращает: Array<{string}>

  • Пример:

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

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

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)

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 Wrapper DOM-узла в виде строки.

  • Возвращает: {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.

Это можно использовать для утверждения, что компонент скрыт с помощью 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.

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

  • Возвращает: {[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')

setChecked(checked)

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

  • Аргументы:

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

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

const wrapper = mount(Foo)
const option = wrapper.find('input[type="radio"]')
option.setChecked()
  • Примечание:

Когда вы пытаетесь установить значение в состояние через 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'

const wrapper = mount(Foo)
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 и выполняет принудительное обновление.

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

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

const wrapper = mount(Foo)
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'

const wrapper = shallowMount(Foo)
const options = wrapper.find('select').findAll('option')

options.at(1).setSelected()
  • Примечание:

Когда вы пытаетесь установить значение в состояние через 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'

const wrapper = mount(Foo)

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

const select = wrapper.find('select')
select.setValue('option value')
  • Примечание:

    • 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'

const clickHandler = sinon.stub()
const wrapper = mount(Foo, {
  propsData: { clickHandler }
})

wrapper.trigger('click')

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

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')