4

I am trying to create a unit test that covers this portion of my Vue component code.

const length = ref(sizes.value[0] ? sizes.value[0].value : 0)
watch(
  () => length.value,
  (newLength: number) => {
    current.value = 1
    emits('update:length', newLength)
  }
)

The length is modified by a simple select

<select name="length" v-model="length">
  <option v-for="opt in sizes" :key="opt.value" :value="opt.value">
    {{ opt.label }}
  </option>
</select>

The test I wrote is this

it('should pagination emits events', async () => {
  await wrapper.vm.setCurrent(5)
  wrapper.vm.$emit('update:current', 5)
  expect(wrapper.vm.currentBlock).toBe(4)
  wrapper.vm.length = 20
  wrapper.vm.$emit('update:current', 20)
})

The test is successful and the hatching report tells me that all the watch contents are covered except the watch row itself.

I use vitest, vue/test-utils and all typesafe(eslint for typescript enabled) How can I get the watch to show as tested as well?

Xeyos
  • 61
  • 3

0 Answers0