Vue3 Composition API单元测试modelValue更新失败问题排查

你的搜索组件是Vue标准受控组件：自身不维护modelValue的本地状态，所有值变更仅通过update:modelValue事件向外通知，实际渲染完全依赖父组件传入的modelValue prop。
测试失败的核心原因是你没有模拟父组件的v-model行为：测试代码触发组件事件后，没有将更新后的值回传给组件的prop，导致组件内部modelValue始终停留在初始值，所有依赖该值的逻辑（清除按钮的v-if条件渲染、watch监听触发search事件、输入框value绑定）都不会按预期执行。

1. 改造组件挂载工厂函数，模拟父组件v-model双向绑定 #

测试环境不存在真实父组件接收事件更新prop，需要在挂载时手动实现v-model逻辑：接收到update:modelValue事件时，同步更新组件接收的prop值。
修复后的工厂函数参考：

import { ref, nextTick } from 'vue'
import { shallowMount, VueWrapper } from '@vue/test-utils'
import SOComponent from '../StackOverflowComponent.vue'

describe('SOComponent Component Tests', () => {
  let wrapper: VueWrapper<InstanceType<typeof SOComponent>>

  function createComponent(initialValue: string | number = '') {
    const modelValue = ref(initialValue)
    wrapper = shallowMount(SOComponent, {
      props: {
        modelValue: modelValue.value,
        'onUpdate:modelValue': (val: string | number) => {
          modelValue.value = val
          wrapper.setProps({ modelValue: val })
        }
      }
    })
    return { modelValue }
  }

  afterEach(() => {
    wrapper.unmount()
  })

  // 辅助查找函数保持原有逻辑即可
  const searchInput = () => wrapper.find('[data-test="searchInput"]')
  const clearIcon = () => wrapper.find('[data-test="clearIcon"]')

注：如果不需要测试焦点、滚动等依赖DOM挂载到页面的逻辑，可以去掉attachTo: document.body配置，减少不必要的DOM清理操作。

2. 补充DOM更新等待逻辑 #

所有触发事件、修改prop的操作后，需要等待Vue响应式更新完成再做断言，避免拿到更新前的DOM状态。比如清除按钮显示的测试用例调整为：

it('clear icon is displayed when input field has value', async () => {
  createComponent()
  await searchInput().setValue('render X')
  // 等待DOM重渲染完成
  await nextTick()
  expect(clearIcon().exists()).toBe(true)
})

3. 修正spy的注册时机 #

测试clear方法调用的用例，需要在触发点击操作前注册spy，避免spy挂载时方法已经被调用导致统计失效：

it('clear icon click calls clear method', async () => {
  createComponent()
  // 组件挂载后立刻注册spy
  const clearSpy = vi.spyOn(wrapper.vm, 'clear')
  await searchInput().setValue('call it')
  await nextTick()
  await clearIcon().trigger('click')
  expect(clearSpy).toHaveBeenCalled()
})

• 组件模板里的按钮属性存在书写错误，无障碍属性应为aria-label="Clear Search"，而非驼峰写法ariaLabel。
• 组件内watch默认仅在值变化时触发，首次挂载不会执行，如果需要初始值也触发search事件，可以给watch加immediate: true配置，根据业务需求选择即可。
• 避免给wrapper标注any类型，使用VueWrapper<InstanceType<typeof 组件>>可以拿到完整的类型推导，减少测试代码的类型错误。

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