Vue-test-utils+Jest下通过v-model定位输入框并模拟修改的最佳实践

我完全懂你的困扰——依赖类选择器写测试太脆弱了，DOM结构一改测试就挂，而且不想为了测试去修改组件本身的实现。刚好，我们可以通过Vue组件的内部特性来精准定位绑定了特定v-model的输入组件，不用碰DOM选择器。

核心思路：利用Vue Test Utils的组件查找能力 #

Jest + Vue Test Utils本身没有直接的find({vModel: 'myModel'})API，但我们可以通过组件的props绑定或者指令信息来定位目标组件，因为v-model本质上是:value（Vue2）/:modelValue（Vue3） + @input（Vue2）/@update:modelValue（Vue3）的语法糖。

方案1：针对自定义组件的直接查找（推荐） #

假设你的自定义InputField组件遵循Vue的v-model规范（Vue2接收value prop，触发input事件；Vue3接收modelValue prop，触发update:modelValue事件），可以直接用findComponent结合props筛选：

Vue2 示例： #

// 查找绑定了myModel作为v-model的InputField组件
const inputComponent = wrapper.findComponent({
  props: {
    value: wrapper.vm.myModel
  }
});

// 模拟用户输入，自动触发input事件
inputComponent.setValue('new value');

Vue3 示例： #

// Vue3中v-model默认绑定modelValue prop
const inputComponent = wrapper.findComponent({
  props: {
    modelValue: wrapper.vm.myModel
  }
});

// 同样用setValue触发更新
inputComponent.setValue('new value');

这个方法完全不依赖DOM结构，只关心组件的v-model绑定逻辑，就算你以后改了InputField的内部DOM结构，测试也不会受影响。

方案2：自定义工具函数（通用场景） #

如果需要频繁按v-model查找组件，可以写一个复用的工具函数，直接通过v-model的指令信息定位：

function findByVModel(wrapper, modelName) {
  return wrapper.findComponent((component) => {
    // 检查组件是否有v-model指令指向目标属性
    const directives = component.vnode?.data?.directives;
    if (directives) {
      return directives.some(dir => {
        return dir.name === 'model' && dir.expression === modelName;
      });
    }

    // fallback：通过props匹配（兼容自定义组件）
    const modelProp = wrapper.vm.$options?.model?.prop || (wrapper.vm.$isVue3 ? 'modelValue' : 'value');
    return component.props(modelProp) === wrapper.vm[modelName];
  });
}

// 使用方式
const input = findByVModel(wrapper, 'myModel');
input.setValue('new value');

这个函数会先检查组件的v-model指令信息，找不到的话再通过props匹配，兼容性更强，同时兼容Vue2和Vue3。

为什么wrapper.setData不行？ #

setData只是直接修改了组件的data属性，但不会触发任何DOM事件或组件的@input回调——因为v-model的双向绑定是事件驱动的，只有当输入事件触发时，才会同步更新data并执行你绑定的@input逻辑。所以必须通过模拟用户输入（或触发组件事件）的方式来完成测试。

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