如何单元测试的Vue组件

Question

的“V型秀”属性时，你有显示了基于模型的按钮，像这样：

<button v-show="title != ''">Add it</button>

你会如何测试这个？我无法想象出我的生活。

我尝试了以下（使用玩笑，但亚军/框架不应该的问题）：

describe('btn test',() => { 
    it('should hide the add button initially',() => { 

     // vm is set up here to be the vue component 

     expect(vm.$el.querySelector('button').style.display).toBe('none') // works 

     // Update the input field (which has v-model="title") 
     vm.$el.querySelectorAll('input').value = 'fd' 

     expect(vm.$el.querySelector('button').style.display).toBe('block') // is still 'none' 

     // Update directly through vm prop 
     vm.title = 'sheep' 

     Vue.nextTick(() => { 
      expect(vm.$el.querySelector('button').style.display).toBe('block') // is still 'none' 
     }) 

    }) 
}) 

Answer 1

通过DOM API将不更新通过V型模型的数据，因为改变输入的值它不会触发v模型侦听的输入事件。

所以没有数据变化，因此，v-show仍然是true。

解决方案，更改虚拟机上的数据。

vm.title = 'fd' 

，并使用$ nextTick如您在最后一行所做的，因为只有这样，更新是在DOM

Answer 2

我想通了意外。原来测试需要一个完成的参数。

这不工作（注意做PARAM和回调）

it('should hide aap',() => { 
    expect(vm.$el.querySelector('.aap').style.display).toBe('none') 
    vm.showAap = true 
    Vue.nextTick(() => { 
     // vm.showAap = false again 
     expect(vm.$el.querySelector('.aap').style.display).toBe('') 
    }) 
}) 

，这是否工作：

it('should hide aap', (done) => { 
    expect(vm.$el.querySelector('.aap').style.display).toBe('none') 
    vm.showAap = true 
    Vue.nextTick(() => { 
     expect(vm.$el.querySelector('.aap').style.display).toBe('') 
     done() 
    }) 
})