WrapperArray

A WrapperArray is an object that contains an array of Wrappers, and methods to test the Wrappers.

Properties

wrappers

array (read-only): the Wrappers contained in the WrapperArray

length

number (read-only): the number of Wrappers contained in the WrapperArray

Methods

at

Returns Wrapper at index passed. Uses zero based numbering (i.e. first item is at index 0). If index is negative, indexing starts from the last element (i.e. last item is at index -1).

• Arguments:

  • {number} index

• Returns: {Wrapper}

• Example:

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

const wrapper = shallowMount(Foo)
const divArray = wrapper.findAll('div')

const secondDiv = divArray.at(1)
expect(secondDiv.is('div')).toBe(true)

const lastDiv = divArray.at(-1)
expect(lastDiv.is('div')).toBe(true)

contains

Assert every wrapper in WrapperArray contains selector.

Use any valid selector.

• Arguments:

  • {string|Component} selector

• Returns: {boolean}

• Example:

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

const wrapper = shallowMount(Foo)
const divArray = wrapper.findAll('div')
expect(divArray.contains('p')).toBe(true)
expect(divArray.contains(Bar)).toBe(true)

destroy

Destroys each Vue Wrapper in WrapperArray.

• Example:

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

const wrapper = mount(Foo)
const divArray = wrapper.findAll('div')
expect(divArray.contains('p')).toBe(true)
divArray.destroy()
expect(divArray.contains('p')).toBe(false)

exists

Assert WrapperArray exists.

Returns false if called on a WrapperArray with no Wrapper objects, or if any of them do not exist.

• Returns: {boolean}

• Example:

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

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

filter

Filter WrapperArray with a predicate function on Wrapper objects.

Behavior of this method is similar to Array.prototype.filter.

• Arguments:

  • {function} predicate

• Returns: {WrapperArray}

A new WrapperArray instance containing Wrapper instances that returns true for the predicate function.

• Example:

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

const wrapper = shallowMount(Foo)
const filteredDivArray = wrapper
  .findAll('div')
  .filter(w => !w.classes('filtered'))

is

Assert every Wrapper in WrapperArray 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)
const divArray = wrapper.findAll('div')
expect(divArray.is('div')).toBe(true)

isEmpty

Deprecation warning

isEmpty is deprecated and will be removed in future releases.

Consider a custom matcher such as those provided in jest-dom.

When using with findComponent, access the DOM element with findComponent(Comp).element

Assert every Wrapper in WrapperArray does not contain child node.

• Returns: {boolean}

• Example:

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

const wrapper = mount(Foo)
const divArray = wrapper.findAll('div')
expect(divArray.isEmpty()).toBe(true)

isVueInstance

Deprecation warning

isVueInstance is deprecated and will be removed in future releases.

Tests relying on the isVueInstance assertion provide little to no value. We suggest replacing them with purposeful assertions.

To keep these tests, a valid replacement for isVueInstance() is a truthy assertion of wrapper.find(...).vm.

Assert every Wrapper in WrapperArray is Vue instance.

• Returns: {boolean}

• Example:

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

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

setChecked

This method is an alias of the following code.

wrapperArray.wrappers.forEach(wrapper => wrapper.setChecked(checked))

• Arguments:

  • {Boolean} checked (default: true)

• Example:

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

test('setChecked demo', async () => {
  const wrapper = mount({
    data() {
      return {
        t1: false,
        t2: ''
      }
    },
    template: `
      <div>
        <input type="checkbox" name="t1" class="foo" v-model="t1" />
        <input type="radio" name="t2" class="foo" value="foo" v-model="t2"/>
        <input type="radio" name="t2" class="bar" value="bar" v-model="t2"/>
      </div>`
  })

  const wrapperArray = wrapper.findAll('.foo')
  expect(wrapper.vm.t1).toEqual(false)
  expect(wrapper.vm.t2).toEqual('')
  await wrapperArray.setChecked()
  expect(wrapper.vm.t1).toEqual(true)
  expect(wrapper.vm.t2).toEqual('foo')
})

setData

Sets Wrapper vm data on each Wrapper in WrapperArray.

Note every Wrapper must contain a Vue instance.

• Arguments:

  • {Object} data

• Example:

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

test('setData demo', async () => {
  const wrapper = mount(Foo)
  const barArray = wrapper.findAll(Bar)
  await barArray.setData({ foo: 'bar' })
  expect(barArray.at(0).vm.foo).toBe('bar')
})

setMethods

Deprecation warning

setMethods is deprecated and will be removed in future releases.

There's no clear path to replace setMethods, because it really depends on your previous usage. It easily leads to flaky tests that rely on implementation details, which is discouraged.

We suggest rethinking those tests.

To stub a complex method extract it from the component and test it in isolation. To assert that a method is called, use your test runner to spy on it.

Sets Wrapper vm methods and forces update on each Wrapper in WrapperArray.

Note every 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'
import Bar from './Bar.vue'

const wrapper = mount(Foo)
const barArray = wrapper.findAll(Bar)
const clickMethodStub = sinon.stub()

barArray.setMethods({ clickMethod: clickMethodStub })
barArray.at(0).trigger('click')
expect(clickMethodStub.called).toBe(true)

setProps

Sets Wrapper vm props and forces update on each Wrapper in WrapperArray.

Note every Wrapper must contain a Vue instance.

• Arguments:

  • {Object} props

• Example:

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

test('setProps demo', async () => {
  const wrapper = mount(Foo)
  const barArray = wrapper.findAll(Bar)
  await barArray.setProps({ foo: 'bar' })
  expect(barArray.at(0).vm.foo).toBe('bar')
})

setValue

This method is an alias of the following code.

wrapperArray.wrappers.forEach(wrapper => wrapper.setValue(value))

• Arguments:

  • {any} value

• Example:

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

const wrapper = mount({
  data() {
    return {
      t1: '',
      t2: ''
    }
  },
  template: `
    <div>
      <input type="text" name="t1" class="foo" v-model="t1" />
      <input type="text" name="t2" class="foo" v-model="t2"/>
    </div>`
})

test('setValue demo', async () => {
  const wrapperArray = wrapper.findAll('.foo')
  expect(wrapper.vm.t1).toEqual('')
  expect(wrapper.vm.t2).toEqual('')
  await wrapperArray.setValue('foo')
  expect(wrapper.vm.t1).toEqual('foo')
  expect(wrapper.vm.t2).toEqual('foo')
})

trigger

Triggers an event on every Wrapper in the WrapperArray DOM node.

Note every Wrapper must contain a Vue instance.

• Arguments:

  • {string} eventType required
  • {Object} options optional

• Example:

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

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

  const divArray = wrapper.findAll('div')
  await divArray.trigger('click')
  expect(clickHandler.called).toBe(true)
})