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

JavaScript Vue.js

阳光小卤蛋

2020-03-19

假设我具有以下组件:

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

第2331篇《如何测试从VueX监视计算属性的Vue观察器?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
乐ItachiJinJin 2020.03.19

您将在VueX实例上需要某种变体,是的,这确实将另一个无关的单元引入到测试中,但是就您个人而言,包括使用Vuex在内,您的测试已经打破了这个概念。

以意外的方式修改状态更容易导致行为与实际用法不同。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android