Wrapper

Vue Test Utils is a wrapper based API.

A Wrapper is an object that contains a mounted component or vnode and methods to test the component or vnode.

Properties

vm

Component: This is the Vue instance. You can access all the instance methods and properties of a vm with wrapper.vm. This only exists on Vue component wrappers

element

HTMLElement: the root DOM node of the wrapper

options

options.attachedToDocument

Boolean: True if attachedToDocument in mounting options was true

options.sync

Boolean: True if sync in mounting options was not false

Methods

attributes()

Returns Wrapper DOM node attribute object.

  • Returns:{[attribute: string]: any}

  • Example:

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

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

classes()

Return Wrapper DOM node classes.

Returns Array of class names.

  • Returns:Array<{string}>

  • Example:

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

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

contains(selector)

Assert Wrapper contains an element or component matching selector.

  • Arguments:

    • {string|Component} selector
  • Returns:{boolean}

  • Example:

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

Destroys a Vue component instance.

  • Example:
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()

Return an object containing custom events emitted by the Wrappervm.

  • Returns:{ [name: string]: Array<Array<any>> }

  • Example:

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

const wrapper = mount(Component)

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

/*
wrapper.emitted() returns the following object:
{
  foo: [[], [123]]
}
*/

// assert event has been emitted
expect(wrapper.emitted().foo).toBeTruthy()

// assert event count
expect(wrapper.emitted().foo.length).toBe(2)

// assert event payload
expect(wrapper.emitted().foo[1]).toEqual([123])

You can also write the above as follows:

// assert event has been emitted
expect(wrapper.emitted('foo')).toBeTruthy()

// assert event count
expect(wrapper.emitted('foo').length).toBe(2)

// assert event payload
expect(wrapper.emitted('foo')[1]).toEqual([123])

The .emitted() method returns the same object every time it is called, not a new one, and so the object will update when new events are fired:

const emitted = wrapper.emitted()

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

// do something to make `wrapper` emit the "foo" event

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

emittedByOrder()

Return an Array containing custom events emitted by the Wrappervm.

  • Returns:Array<{ name: string, args: Array<any> }>

  • Example:

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

const wrapper = mount(Component)

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

/*
wrapper.emittedByOrder() returns the following Array:
[
  { name: 'foo', args: [] },
  { name: 'bar', args: [123] }
]
*/

// assert event emit order
expect(wrapper.emittedByOrder().map(e => e.name)).toEqual(['foo', 'bar'])

exists()

Assert Wrapper or WrapperArray exists.

Returns false if called on an empty Wrapper or WrapperArray.

  • Returns:{boolean}

  • Example:

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)

Returns Wrapper of first DOM node or Vue component matching selector.

Use any valid selector.

  • Arguments:

    • {string|Component} selector
  • Returns:{Wrapper}

  • Example:

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)

Returns a WrapperArray.

Use any valid selector.

  • Arguments:

    • {string|Component} selector
  • Returns:{WrapperArray}

  • Example:

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

Returns HTML of Wrapper DOM node as a string.

  • Returns:{string}

  • Example:

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)

Assert Wrapper DOM node or vm matches selector.

  • Arguments:

    • {string|Component} selector
  • Returns:{boolean}

  • Example:

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

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

isEmpty()

Assert Wrapper does not contain child node.

  • Returns:{boolean}

  • Example:

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

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

isVisible()

Assert Wrapper is visible.

Returns false if an ancestor element has display: none or visibility: hidden style.

This can be used to assert that a component is hidden by v-show.

  • Returns:{boolean}

  • Example:

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

Assert Wrapper is Vue instance.

  • Returns:{boolean}

  • Example:

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

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

name()

Returns component name if Wrapper contains a Vue instance, or the tag name of Wrapper DOM node if Wrapper does not contain a Vue instance.

  • Returns:{string}

  • Example:

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

Return Wrappervm props object.

Note the Wrapper must contain a Vue instance.

  • Returns:{[prop: string]: any}

  • Example:

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)

Sets checked value for input element of type checkbox or radio and updates v-model bound data.

  • Arguments:

    • {Boolean} checked (default: true)
  • Example:

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

const wrapper = mount(Foo)
const option = wrapper.find('input[type="radio"]')
option.setChecked()
  • Note:

When you try to set the value to state via v-model by radioInput.element.checked = true; radioInput.trigger('input'), v-model is not triggered. v-model is triggered by change event.

checkboxInput.setChecked(checked) is an alias of the following code.

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

setData(data)

Sets Wrappervm data.

setData works by merging existing properties, except for arrays which are overwritten.

Note the Wrapper must contain a Vue instance.

  • Arguments:

    • {Object} data
  • Example:

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)

Sets Wrappervm methods and forces update.

Note the Wrapper must contain a Vue instance.

  • Arguments:

    • {Object} methods
  • Example:

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)

  • Arguments:

    • {Object} props
  • Usage:

Sets Wrappervm props and forces update.

Note the Wrapper must contain a Vue instance.

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

You can also pass a propsData object, which will initialize the Vue instance with passed values.

// 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()

Selects an option element and updates v-model bound data.

  • Example:
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()
  • Note:

When you try to set the value to state via v-model by option.element.selected = true; parentSelect.trigger('input'), v-model is not triggered. v-model is triggered by change event.

option.setSelected() is an alias of the following code.

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

setValue(value)

Sets value of a text-control input element and updates v-model bound data.

  • Arguments:

    • {String} value
  • Example:

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')
  • Note:

textInput.setValue(value) is an alias of the following code.

textInput.element.value = value
textInput.trigger('input')

text()

Returns text content of Wrapper.

  • Returns:{string}

  • Example:

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

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

trigger(eventType [, options ])

Triggers an event on the Wrapper DOM node.

trigger takes an optional options object. The properties in the options object are added to the Event.

  • Arguments:

    • {string} eventTyperequired
    • {Object} optionsoptional
  • Example:

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)
  • Setting the event target:

Under the hood, trigger creates an Event object and dispatches the event on the Wrapper element.

It's not possible to edit the target value of an Event object, so you can't set target in the options object.

To add an attribute to the target, you need to set the value of the Wrapper element before calling trigger. You can do this with the element property.

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