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'

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).to.equal(false)
expect(wrapper.vm.t2).to.equal('')
wrapperArray.setChecked()
expect(wrapper.vm.t1).to.equal(true)
expect(wrapper.vm.t2).to.equal('foo')

setData

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

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

  • 参数：

    • {Object} data

  • 示例：

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

const wrapper = mount(Foo)
const barArray = wrapper.findAll(Bar)
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>`
})

const wrapperArray = wrapper.findAll('.foo')
expect(wrapper.vm.t1).to.equal('')
expect(wrapper.vm.t2).to.equal('')
wrapperArray.setValue('foo')
expect(wrapper.vm.t1).to.equal('foo')
expect(wrapper.vm.t2).to.equal('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'

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

const divArray = wrapper.findAll('div')
divArray.trigger('click')
expect(clickHandler.called).toBe(true)
在 GitHub 上编辑此页

← 挂载选项 →