Question

我想测试一个VueJS观察者方法，检查它是否被调用。我的方法看起来像：

watch: {
   value: (newValue, oldValue) {
     if (newValue.Status === 'Completed') {
        ...do somethind
     }
  }
}

当方法被触发时，该方法正在工作，但是没有触发测试。

我的测试看起来像：

var propsData = {
   "value" : {
      "Status" : "Something"
    }
}
it('should call method', done => {
   const Constructor = Vue.extend(App);
   const spy = sinon.spy(App, 'value');
   const vm = new Constructor({ propsData: propsData }).$mount();
   vm.value.Status = 'Completed';
   Vue.nextTick(() => {
      expect(spy.called).to.be.true;
      done()
   })
})

我找到了以下示例，但似乎无法解决我的问题：

Answer 1

您正在更改value.Status，而不是实际value引用。要在值更改时启用监视触发器，您可以使用deep: true

watch: {
   value: {
     handler: (newValue, oldValue) {
       this.checkValue() 
     },
     deep: true
   }
},
methods: {
  checkValue() {
  }
}

然后

it('should call method', done => {
   const Constructor = Vue.extend(App);
   const vm = new Constructor({ propsData: propsData }).$mount();
   const spy = sinon.spy(vm, 'checkValue');
   vm.value.Status = 'New value';
   vm.$nextTick(() => {
      expect(spy.called).to.be.true;
      done()
   })
})

用Jasmine测试Vue.js中的Watchers

1 个答案: