5

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?

1

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.