我正在 Vue 中使用 Jest 和 Element-ui 在一个包含带有 2 个选项的选择的组件上进行单元测试。我从下拉列表中选择一个选项,然后检查是否已调用某个操作。
1)与正常select
and option
HTML 标签效果很好。
// 水果.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-uiel-select
and el-option
,它们与 DOM 有自己的交互。
2) With el-select
and el-option
// 水果.vue
保持不变,除了select
被替换为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)鉴于setSelected
实际上是一个别名vue-test-utils 文档 https://vue-test-utils.vuejs.org/api/wrapper/#setselected,我尝试了这样的方法:
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
没有更新。
所以我想知道是否有人有解决方案,或者是否有另一个库(vue-test-utils 除外)与哪个 element-ui 的el-select
可以模拟.