如何测试从VueX监视计算属性的Vue观察器？

Question

假设我具有以下组件：

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

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

在测试时，我想确保使用externalDependency.doThing()调用bar（来自vuex状态），如下所示：

it('should call externalDependency.doThing with bar', () => {
  const wrapper = mount(Foo);
  const spy = jest.spyOn(externalDependency, 'doThing');

  wrapper.setComputed({bar: 'baz'});

  expect(spy).toHaveBeenCalledWith('baz');
});

Vue的test-utils有一个setComputed方法，该方法可以让我目前对其进行测试，但是我不断收到警告，称setComputed将很快被删除，而且我不知道该如何进行测试：

https://github.com/vuejs/vue-test-utils/issues/331

Answer 1

从你想要实现的目标来看

测试时，我想确保使用 bar （来自 vuex 状态）调用 externalDependency.doThing() ，如下所示：

（这确实是纯粹的单元测试方法），您可以强制更改此观察程序，这基本上是一个函数。如果计算值或数据值发生变化，则无需跟踪观察者是否发生变化 - 让 Vue 处理它。因此，要更改已安装的 Vue 实例中的观察者，只需调用它即可

wrapper.vm.$options.watch.bar.call(wrapper.vm)

bar你的观察者的名字在哪里。这样您将能够测试您想要测试的确切功能。

想法取自此评论https://github.com/vuejs/vue-test-utils/issues/331#issuecomment-382037200，关于您在问题中提到的 vue-test-utils 问题。

Answer 2

您将需要在 VueX 实例上进行某种类型的修改，是的，这确实会引入另一个与测试无关的单元，但就您个人而言，包括 Vuex 的使用，这个概念已经被打破了。

以意想不到的方式修改状态更容易导致与实际使用情况不同的行为。