Vue组件V-model单元测试无法正常运行，请求排查问题

问题根源分析 #

测试失败核心有两个原因：

1. Vue单向数据流限制导致props未更新 #

Vue props是单向绑定，子组件只能通过emit('update:modelValue')通知父组件更新props，但不会自动修改自身的props值。你的测试仅初始化了modelValue变量，却未监听子组件的emit事件来更新变量和组件props，因此modelValue和组件$props.modelValue始终停留在初始值12。

2. 组件computed setter误用async #

computed的setter设计为同步操作，添加async会导致$emit被包裹进Promise微任务，打乱事件触发的同步逻辑，可能让测试中的nextTick无法正确捕获状态变化。

修复步骤 #

第一步：修正组件代码 #

移除computed setter的async修饰符，同时修正类型定义：

<template>
  <p>Hello counter!! {{ modelValue }}</p>
  <button type="button" @click="buttonClicked">Click me</button>
</template>

<script lang="ts">
export default {
  props: {
    modelValue: {
      type: Number,
      default: 0,
    },
  },
  emits: ["update:modelValue"],
  methods: {
    buttonClicked() {
      console.log("button clicked!!!");
      this.value = this.value + 1;
    },
  },
  computed: {
    value: {
      get() {
        return this.modelValue;
      },
      set(value: number) { // 移除async，修正类型为number
        console.log("Passing!!!");
        this.$emit("update:modelValue", value);
      },
    },
  },
};
</script>

第二步：修正测试代码 #

监听子组件的update:modelValue事件，手动更新变量和组件props，同时使用Vue Test Utils的trigger方法触发点击事件（更符合Vue测试逻辑）：

import { nextTick } from "vue";
import { describe, it, expect } from "vitest";
import { shallowMount } from "@vue/test-utils";
import CounterView from "../CounterView.vue";

describe("CounterView", () => {
  it("should update v-model properly", async () => {
    let modelValue = 12;
    const wrapper = shallowMount(CounterView, {
      props: {
        modelValue,
      },
    });

    // 监听emit事件，同步更新父变量与组件props
    wrapper.vm.$on("update:modelValue", (newValue) => {
      modelValue = newValue;
      wrapper.setProps({ modelValue: newValue });
    });

    const button = wrapper.find<HTMLElement>("button");
    await button.trigger("click");

    await nextTick();

    expect(modelValue).toBe(13);
    expect(wrapper.vm.$props.modelValue).toBe(13);
  });
});

可选：更简洁的测试方式（聚焦组件行为） #

单元测试更推荐直接断言组件的emit行为，而非模拟完整双向绑定流程：

it("should emit update:modelValue with incremented value on button click", async () => {
  const wrapper = shallowMount(CounterView, {
    props: {
      modelValue: 12,
    },
  });

  await wrapper.find("button").trigger("click");

  // 验证emit事件触发及参数正确性
  expect(wrapper.emitted("update:modelValue")).toBeTruthy();
  expect(wrapper.emitted("update:modelValue")![0]).toEqual([13]);
});

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