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.

WrapperArray

一个 WrapperArray 是一个包含 Wrapper 数组以及 Wrapper 的测试方法等对象。

属性

wrappers

array: 包含在 WrapperArray 内的 Wrappers

length

number (只读):该 WrapperArray 中包含的 Wrapper 的数量。

方法

at

返回第 index 个传入的 Wrapper 。数字从 0 开始计数 (比如第一个项目的索引值是 0)。如果 index 是负数,则从最后一个元素往回计数 (比如最后一个项目的索引值是 -1)。

  • 参数:

    • {number} index
  • 返回值:{Wrapper}

  • 示例:

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

断言 WrapperArray 的每个包裹器都包含选择器。

可使用任何有效的选择器

  • 参数:

    • {string|Component} selector
  • 返回值:{boolean}

  • 示例:

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

销毁 WrapperArray 中的每个 Vue Wrapper

  • 示例:
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)

filter

用一个针对 Wrapper 的断言函数过滤 WrapperArray

该方法的行为和 Array.prototype.filter 相同。

  • 参数:

    • {function} predicate
  • 返回值: {WrapperArray}

一个新的 WrapperArray 实例,该实例包含了经过断言函数处理后返回真值的 Wrapper 实例。

  • 示例:
import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'

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

is

断言 WrapperArray 的每个 Wrapper 的 DOM 节点或 vm 匹配选择器

  • 参数:

    • {string|Component} selector
  • 返回值:{boolean}

  • 示例:

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

废弃警告

isEmpty 已经被废弃并会在未来的发布中被移除。

可以考虑一个诸如 jest-dom 中提供的自定义匹配。

当使用 findComponent 时,可以通过 findComponent(Comp).element 访问其 DOM 元素。

断言 WrapperArray 的每个 Wrapper 都不包含子节点。

  • 返回值:{boolean}

  • 示例:

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

废弃警告

isVueInstance 已经被废弃并会在未来的发布中被移除。

依赖 isVueInstance 断言的测试并没有特别大的意义,我们建议将与之相关的断言替换为更有目的性的断言。

为了保留这些测试,一个替换 isVueInstance() 的可行方式是对 wrapper.find(...).vm 的 truthy 断言。

断言 WrapperArray 的每个 Wrapper 都是 Vue 实例。

  • 返回值:{boolean}

  • 示例:

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

该方法是接下来这段代码的别名:

wrapperArray.wrappers.forEach(wrapper => wrapper.setChecked(checked))
  • 参数:

    • {Boolean} checked (default: true)
  • 示例:

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

WrapperArray 的每个 Wrapper vm 都设置数据。

注意:该包裹器必须包含一个 Vue 实例。

  • 参数:

    • {Object} data
  • 示例:

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

废弃警告

setMethods 已经被废弃并会在未来的发布中被移除。

这里没有明确的路径替换 setMethods,因为这取决于你之前的用法。这很容易导致依赖实现细节的琐碎的测试,而这是不推荐的

我们建议重新考虑那些测试。

如果是为了存根一个复杂方法,可将其从组件中提取出来并单独测试。如果是为了断言一个方法被调用,可使用你的测试运行器窥探它。

WrapperArray 的每个 Wrapper vm 都设置方法并强行更新。

注意:该包裹器必须包含一个 Vue 实例。

  • 参数:

    • {Object} methods
  • 示例:

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

WrapperArray 的每个 Wrapper vm 都设置 prop 并强行更新。

注意:该包裹器必须包含一个 Vue 实例。

  • 参数:

    • {Object} props
  • 示例:

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

该方法是接下来这段代码的别名:

wrapperArray.wrappers.forEach(wrapper => wrapper.setValue(value))
  • 参数:

    • {any} value
  • 示例:

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

WrapperArray 的每个 Wrapper DOM 节点都触发一个事件

注意:该包裹器必须包含一个 Vue 实例。

  • 参数:

    • {string} eventType 必填
    • {Object} options 可选
  • 示例:

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