Vue-test-utils 包装器未通过

Question

我正在为我的组件编写这个测试：

  test('display the bar when start is called', () => {
    const wrapper = shallowMount(ProgressBar)
    expect(wrapper.classes()).toContain('hidden')
    wrapper.vm.start()
    console.log(wrapper.vm.hidden) // false
    console.log(wrapper.vm.start()) // undefined
    expect(wrapper.classes()).not.toContain('hidden')
  })

  test('sets the bar to 100% width when the finish is called', () => {
    const wrapper = shallowMount(ProgressBar)
    expect(wrapper.element.style.width).toBe('0%')
    wrapper.vm.start()
    wrapper.vm.finish()
    expect(wrapper.element.style.width).toBe('100%')
  })

在我的 ProgressBar 组件中，我有：

<template>
  <div :class="{ hidden: hidden }" :style="{ width: `${percent}%` }"
></div>
</template>

<script>
export default {
  data () {
    return {
      hidden: true,
      percent: 0
    }
  },
  methods: {
    start () {
      this.hidden = false
    },
    finish () {
      this.percent = 100
      this.hidden = true
    }
  }
}
</script>

但是测试失败了，因为它仍然显示隐藏为真，百分比为 0，是我做错了什么吗？

这里是repo

Answer 1

您应该等待处理修改所需的下一个滴答声，如下所示： await wrapper.vm.$nextTick()

test('display the bar when start is called', async () => {
    const wrapper = shallowMount(ProgressBar)
    expect(wrapper.classes()).toContain('hidden')
    wrapper.vm.start()

    await wrapper.vm.$nextTick()

    console.log(wrapper.vm.hidden) // false
    console.log(wrapper.vm.start()) // undefined
    expect(wrapper.classes()).not.toContain('hidden')
  })