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