Блог

Я пишу этот тест для своего компонента:

   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>
  

Но тест завершается неудачно, потому что он по-прежнему показывает hidden как true, а процент равен 0, я что-то делаю не так?

Вот репозиторий

вы должны дождаться следующего тика, который необходим для обработки подобных изменений: 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')
  })