Vue-test-utils wrapper not passing

Question

I'm writing this test for my component:

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

In my ProgressBar component, I have:

<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>

But the test fails cause it stills shows hidden as true and percent as 0, is there something I'm doing wrong?

Here is the repo

Answer 1

you should wait next tick that is needed to process modifications like this: 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')
  })