Vue Test Utils 3 setValue()在Vuetify 3的v-select/v-autocomplete中失效

Vuetify 3的v-select和v-autocomplete组件因内部封装了复杂的下拉菜单交互逻辑，Vue Test Utils的setValue()方法无法直接触发其v-model更新（而v-combobox支持手动输入，因此能正常响应setValue()）。以下是几种有效解决方案：

方案1：直接修改组件状态（单元测试首选） #

单元测试核心是验证组件逻辑而非DOM交互，直接修改绑定的v-model变量是最简洁的方式：

test("v-select 正确设置context值", async () => {
  // 直接修改组件实例的context变量
  state.context = "A";
  await wrapper.vm.$nextTick(); // 等待DOM更新完成

  expect(state.context).toBe("A");
  // 可选：验证组件显示的文本是否匹配
  expect(wrapper.findComponent(".bar").text()).toContain("a");
});

方案2：模拟完整用户交互（集成测试适用） #

模拟用户点击组件打开菜单、选择选项的完整流程：

test("通过用户交互设置v-select值", async () => {
  const select = wrapper.findComponent(".bar");
  
  // 点击组件触发下拉菜单打开
  await select.trigger("click");
  await wrapper.vm.$nextTick();

  // 查找目标选项（Vuetify默认给选项添加data-value属性）
  const targetOption = wrapper.find('[data-value="A"]');
  await targetOption.trigger("click");
  await wrapper.vm.$nextTick();

  expect(state.context).toBe("A");
});

如果选项没有data-value属性，也可以通过文本筛选：

const options = wrapper.findAll(".v-list-item");
const targetOption = options.find(item => item.text() === "a")!;
await targetOption.trigger("click");

方案3：调用组件内部方法 #

Vuetify的v-select组件内部暴露了selectItem方法，可直接传入选项对象完成值设置：

test("调用组件内部方法设置v-select值", async () => {
  const selectVm = wrapper.findComponent(".bar").vm as any;
  // 传入对应item对象
  await selectVm.selectItem({ title: "a", value: "A" });
  await wrapper.vm.$nextTick();

  expect(state.context).toBe("A");
});

补充说明 #

• setValue()无效的原因：v-select的输入框是只读状态，其值更新逻辑依赖下拉菜单的选择事件，而非直接修改输入框value。
• 优先选择方案1：单元测试无需模拟完整DOM交互，速度更快且逻辑清晰；方案2适合需要验证用户交互流程的集成测试。

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