关于v-if的测试
来源:4-12 UndoList 编辑功能实现 (2)

慕粉6137024
2021-04-16
想模拟trigger触发click后判断input是否显示出来,运行效果完全没问题,但测试一直不通过
是因为虚拟dom更新是异步的吗?我怎么获得更新后的状态来通过测试?
<!--UndoList.vue-->
<ul class="body">
<li v-for="(item,index) in list" :key="index" @click.stop="toggleEdit(index)">
<input v-if="item.edit" type="text" v-model="item.value" >
<p v-else>{{item.value}}</p>
<b @click="deleteItem(index)">删除</b>
</li>
</ul>
<script>
...
toggleEdit(index){
this.$emit('returnSwitch',index)
}
</script>
//UndoList.test.js
test('UndoList列表项点击时,应该显示input框',async ()=>{
const wrapper = shallowMount(UndoList,{
propsData:{
list:[{edit:false,value:1}]
}
})
const first_item = wrapper.findAll('li').at(0)
await first_item.trigger('click')
const input_element = wrapper.find('input')
expect(input_element.exists()).toBeTruthy() //false
})
<!--TodoList.vue-->
...
<UndoList :list="undoList" @returnSwitch="toggleEdit" @returnDelete="deleteItem"></UndoList>
...
toggleEdit(index){
this.$set(this.undoList[index],'edit',true)
}
写回答
1回答
-
Dell
2021-04-17
Vue 我建议你有vue-test-util进行测试
022021-04-17
相似问题