如何單元測試的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() 
    }) 
})