Vue组件测试中Prop的Watcher未触发问题排查

你在使用Vitest测试Vue组件时，发现监听props的Watcher未触发，导致someData没有更新，测试失败。下面是具体的错误点和修复方案：

错误点梳理 #

• data选项错误使用ref：选项式API的data中不需要用ref包裹变量，data返回的是普通响应式对象，ref仅用于Composition API的setup中。你用someData: ref([])会导致someData变成Ref对象，后续的push操作无法正确生效。
• Watcher handler未用this访问实例属性：选项式API里，handler函数的this指向组件实例，直接写someData.push(...)会找不到变量，必须用this.someData。
• Watcher配置语法错误：watch配置对象中deep: true后面缺少逗号，导致语法错误，整个Watcher配置无法被正确解析。
• 测试代码拼写错误：测试函数的async拼写成asnyc；初始化props时把变量名obj写成了object。
• setup中的无用拼写错误：setup里的props.someProb是拼写错误（应为props.someProp），且这段代码没有实际作用，可直接移除。

修正后的代码 #

Component.vue #

<template></template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  data() {
    return {
      // 移除ref，直接返回普通数组
      someData: []
    };
  },
  props: {
    someProp: {
      type: Object,
      default: null,
    }
  },
  watch: {
    someProp: {
      handler(new_obj) {
        // 用this访问组件实例的someData
        this.someData.push({foo: 'bar'});
      },
      // 补上缺失的逗号
      deep: true,
      immediate: true,
    },
  },
});
</script>

Component.spec.ts #

it("should change array", async () => { // 修正async拼写
  const obj = {}
  const wrapper = mount(component, {
    props: {
      someProp: obj // 修正变量名错误
    },
  });
  
  const new_object = {
    someData: 1234
  };
  await wrapper.setProps({
   someProp: new_object,
  });

  await wrapper.vm.$nextTick();

  expect(wrapper.vm.someData).toEqual([
    { foo: 'bar' }
  ]);
});

修复效果 #

修正上述问题后，Watcher会在组件初始化（因immediate: true）和props更新时正常触发，someData会被正确添加数据，测试即可通过。

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