使用element-ui和vue-test-utils模拟选择 [英] Simulate select with element-ui and vue-test-utils
问题描述
我正在对Vue中的Jest和Element-ui进行单元测试,该组件包含一个带有2个选项的select.我从下拉菜单中选择一个选项,然后检查是否已调用操作.
I'm doing unit tests with Jest and Element-ui in Vue on a component which contains a select with 2 options. I am selecting an option from a dropdown and then checking that an action has been called.
1),使用普通的 select
和 option
HTML标记,效果很好.
1) With normal select
and option
HTML tags this works perfectly.
//Fruit.vue
<template lang="pug">
select(
v-model="fruit"
)
option(
v-for="item in fruits"
:label="item.label"
:value="item.value"
)
</template>
<script>
export default {
data () {
return {
fruits: [
{
label: 'Banana',
value: false
},
{
label: 'Apple',
value: false
}
]
}
},
computed: {
fruit: {
get () {
return this.$store.state.fruit
},
set (fruit) {
this.$store.dispatch('setSelectedFruit', { fruit })
}
}
}
</script>
//DOM
<select>
<option label="Banana" value="false"></option>
<option label="Apple" value="false"></option>
</select>
//Fruit.spec.js
it('calls the "setSelectedFruit" action when a value is selected', () => {
const wrapper = mount(Fruit, { store, localVue })
const options = wrapper.find('select').findAll('option')
options.at(1).setSelected()
expect(actions.setSelectedFruit).toHaveBeenCalled()
})
但是我使用element-ui的 el-select
和 el-option
,它们与DOM有自己的交互作用.
However I use element-ui's el-select
and el-option
, which have their own interaction with the DOM.
2)使用 el-select
和 el-option
//Fruit.vue
保持不变,除了 select
被 el-select
和 option
替换为 el-option
Stays the same, except that select
is replaced by el-select
and option
by el-option
.
//DOM
<div class="el-select-dropdown">
<div class="el-select-dropdown__wrap">
<ul class="el-select-dropdown__list">
<li class="el-select-dropdown__item">
<span>Banana</span>
</li>
<li class="el-select-dropdown__item">
<span>Apple</span>
</li>
</ul>
</div>
</div>
//Fruit.spec.js
a)
it('calls the "setSelectedFruit" action', () => {
const wrapper = mount(Fruit, { store, localVue })
const options = wrapper.find('.el-select-dropdown__list').findAll('el-select-dropdown__items')
options.at(1).setSelected()
expect(actions.setSelectedFruit).toHaveBeenCalled()
})
b) Given that setSelected
is actually an alias according to the vue-test-utils documentation, I tried it this way:
it('calls the "setSelectedFruit" action', () => {
const wrapper = mount(Fruit, { store, localVue })
const options = wrapper.findAll('.el-select-dropdown__item')
const select = wrapper.find('.el-select-dropdown__list')
options.at(1).element.selected = false
select.trigger('change')
expect(actions.setSelectedFruit).toHaveBeenCalled()
})
使用第二种方法,将选定的 option
设置为 selected
,但是 select
上的触发器不起作用,因此 v-model
未更新.
With the second method, the chosen option
is set as selected
, but the trigger on the select
doesn't work and so the v-model
isn't updated.
因此,我想知道是否有人对此有解决方案,或者是否还有另一个库(vue-test-utils除外),其中哪个是element-ui的 el-select
可以模拟.
So I'd like to know if someone has a solution for this, or if there is another library (other than vue-test-utils) with which element-ui's el-select
can be simulated.
推荐答案
我能够通过触发您要模拟的下拉项的单击来使此工作正常进行:
I was able to get this working by triggering a click on the drop down item that you would like to simulate:
wrapper.findAll('.el-select-dropdown__item').at(1).trigger('click');
await Vue.nextTick();
expect(YourExpectStatement);
我需要Vue.nextTick(),因为它允许DOM更新其周期,更多
The Vue.nextTick() was needed for me, as it allows the DOM to update it's cycle, more info here. Also note you'll need to make your test function async, like:
it('Async test name', async () => {
这篇关于使用element-ui和vue-test-utils模拟选择的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!