使用 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. 斷言異步更新
2. 論壇

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