Question

当您有一个基于模型显示的按钮时，如下所示：

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

你会如何测试？我无法理解我的生活。

我尝试了以下（使用Jest，但跑步者/框架无关紧要）：

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-model更新数据，因为它不会触发v模型侦听的输入事件。

因此，没有数据发生变化，因此，v-show仍为true。

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

vm.title = 'fd'

并像在最后一行中那样使用$ nextTick，因为只有这样才能将更新放在DOM中

Answer 2

我偶然发现了。原来测试需要一个完成的参数。

这不起作用（注意完成的参数和回调）

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()
    })
})

如何对Vue组件的'v-show'属性进行单元测试

2 个答案: