如何用Vitest和Vue Test Utils测试Vue中的Watcher？

我正在编写单元测试覆盖Vue组件的代码片段：

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

length值通过select组件修改：

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

我写的测试代码如下：

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

测试已通过，但覆盖率报告显示Watcher本身未被覆盖。我使用Vitest、Vue Test Utils，且启用了TypeScript的ESLint类型检查，请问如何让Watcher也被标记为已测试？

你的测试未触发Watcher的核心原因是：直接赋值wrapper.vm.length未正确触发响应式更新，且现有测试逻辑完全没有覆盖length变化的场景。要覆盖Watcher，需要针对性触发length的响应式变更，并验证Watcher内的执行逻辑，具体方法如下：

1. 模拟用户操作（推荐，贴近真实场景） #

通过操作select DOM元素模拟用户选择行为，自然触发length的响应式变化，进而触发Watcher：

it('should trigger watcher when length changes via select', async () => {
  // 找到select元素并设置新值（需确保sizes中存在value为20的选项）
  const select = wrapper.find('select[name="length"]')
  await select.setValue(20)

  // 验证Watcher的两个核心逻辑
  expect(wrapper.vm.current).toBe(1)
  expect(wrapper.emitted('update:length')).toBeTruthy()
  expect(wrapper.emitted('update:length')[0]).toEqual([20])
})

2. 直接修改ref值（适合快速测试） #

若不想操作DOM，需直接修改ref的value属性，并等待Vue更新循环完成以确保Watcher执行：

import { nextTick } from 'vue'

it('should trigger watcher when length ref is modified', async () => {
  // 修改length的响应式值
  wrapper.vm.length.value = 20
  await nextTick() // 等待Watcher执行完成

  // 验证逻辑
  expect(wrapper.vm.current).toBe(1)
  expect(wrapper.emitted('update:length')).toEqual([[20]])
})

3. 整合到现有测试用例 #

可以将Watcher测试逻辑合并到原有测试中，确保完整覆盖：

it('should handle pagination and length change events', async () => {
  // 原有分页逻辑测试
  await wrapper.vm.setCurrent(5)
  expect(wrapper.vm.currentBlock).toBe(4)

  // 添加length变化的Watcher测试
  await wrapper.find('select[name="length"]').setValue(20)
  expect(wrapper.vm.current).toBe(1)
  expect(wrapper.emitted('update:length')).toHaveLength(1)
  expect(wrapper.emitted('update:length')[0]).toEqual([20])
})

关键注意点 #

• 必须触发length.value的响应式更新，直接赋值wrapper.vm.length无法触发Watcher
• 修改ref后需用await nextTick()等待Vue的更新循环完成，确保Watcher执行
• 必须验证Watcher内的所有逻辑（current.value = 1 和 emits('update:length')），覆盖率工具才会标记Watcher为已覆盖

内容的提问来源于stack exchange，提问作者Xeyos