使用 Jasmine 在 Vue.js 中测试观察者

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()
   })
})

我找到了以下示例，但似乎不适用于我的情况：

1. Asserting Asynchronous Updates
2. Forum

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()
   })
})