关于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进行测试

0
2
Dell
回复
慕粉6137024
稍等,我看下,不要用shallowMount,用Mount试试
2021-04-17
共2条回复

前端要学的测试课 从Jest入门到 TDD/BDD双实战

自动化测试实战 Vue / React 项目,让技术水平和架构思维双提升

1433 学习 · 350 问题

查看课程