如何测试监听VueX计算属性的Vue监听器？

我来帮你把这个Vue组件的测试代码补全并整理好，确保能验证externalDependency.doThing()确实接收到了Vuex状态里的bar参数～

我有一个依赖Vuex状态和外部工具库的Vue组件，想要编写测试确保当Vuex中的bar状态变化时，外部依赖的doThing方法能接收到正确的bar参数。

import { mapState } from 'vuex';
import externalDependency from '...';

export default {
  name: 'Foo',
  computed: {
    ...mapState(['bar'])
  },
  watch: {
    bar () {
      externalDependency.doThing(this.bar);
    }
  }
}

import { mount } from '@vue/test-utils';
import Foo from './Foo.vue';
import { createStore } from 'vuex';
import externalDependency from '...';

it('should call externalDependency.doThing with bar from Vuex state', () => {
  // 1. 创建包含bar状态的Vuex store，模拟组件的状态环境
  const store = createStore({
    state: {
      bar: 'initial-value'
    }
  });

  // 2. 给externalDependency.doThing创建间谍函数，追踪它的调用情况
  const doThingSpy = jest.spyOn(externalDependency, 'doThing');
  // 测试后恢复原方法，避免影响其他测试用例
  afterAll(() => doThingSpy.mockRestore());

  // 3. 挂载组件并注入store，让组件能正常获取Vuex状态
  const wrapper = mount(Foo, {
    global: {
      plugins: [store]
    }
  });

  // 4. 修改Vuex中的bar值，触发组件的watch回调
  const testBarValue = 'test-bar-value';
  store.state.bar = testBarValue;

  // 5. 断言间谍函数被正确调用，参数就是更新后的bar值
  expect(doThingSpy).toHaveBeenCalledWith(testBarValue);
});

• 先搭建简易的Vuex store，模拟组件依赖的状态环境，避免依赖真实的全局store
• 用jest.spyOn监听外部方法的调用，这样就能精准追踪它的调用次数和传入参数
• 挂载组件时把store注入全局，保证组件的mapState能正常工作
• 修改store状态触发watch回调，验证业务逻辑的触发时机
• 最后通过断言确认外部方法确实接收到了来自Vuex的正确参数

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