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

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

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

这不起作用(注意 done 参数和回调)

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