从Vue watcher调用函数的Jest测试

// MyComponent.vue
<template>
  <div>
    <button @click="updateData">Update Data</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: 'initial data'
    };
  },
  methods: {
    updateData() {
      this.data = 'updated data';
    }
  },
  watch: {
    data() {
      this.handleDataChange();
    }
  },
  created() {
    this.handleDataChange();
  },
  methods: {
    handleDataChange() {
      // 被Watcher调用的函数
      console.log('Data changed');
    }
  }
};
</script>

// MyComponent.spec.js
import { mount } from '@vue/test-utils';
import MyComponent from './MyComponent.vue';

describe('MyComponent', () => {
  it('should call handleDataChange when data changes', () => {
    const wrapper = mount(MyComponent);
    const handleDataChangeSpy = jest.spyOn(wrapper.vm, 'handleDataChange');

    // 模拟点击按钮，修改数据
    wrapper.find('button').trigger('click');

    // 断言handleDataChange函数被调用
    expect(handleDataChangeSpy).toHaveBeenCalled();
  });
});