Vue Test Utils

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

← 挂载选项 →