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?