Javascript Vue测试utils包装未通过

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

  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
}
},
方法：{
开始（）{
this.hidden=false
},
完成（）{
这是百分之一百
this.hidden=true
}
}
}

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

---

以下是处理此类修改所需的下一个勾号，您应该等待：

wait wrapper.vm.$nextTick（）

---

至少您应该等待下一个需要处理的修改：

await wrapper.vm.$nextTick（）

（您应该将测试转换为

async

请参阅下面的答案谢谢，它没有完全工作，但我通过将await添加到函数本身使其工作。例如

await wrapper.vm.start（）

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