search

igeligel / vue-jest-example

:collision: A Vue.js project showcasing the capabilities of Jest testing.
https://medium.com/@kevinigeligel/unit-testing-vue-js-components-with-jest-86e14ef499da
MIT License
8 stars 3 forks source link

how to test the watch with jest and vue-test-utils? #1

Open blackcloud2333 opened 5 years ago

blackcloud2333 commented 5 years ago

what i want to know is that how can i test the watch with vue-test-utils and jest. i had tried to do like this. the code above is to featch data from the server,it will return a object of promise this.$api.querySexListByGoodsCode(data) appointment.js

watch: { addGoodsCodeList () { const data = { goodsCode: this.orderInfo.goodsCode, addGoodsCodes: this.addGoodsCodeListStr } console.log('========') console.log(this.$api.querySexListByGoodsCode) console.log('========') this.$api.querySexListByGoodsCode(data).then(res => { if (res.data.SZ_HEAD.RESP_CODE === 'S0000') { this.sexs = res.data.SZ_BODY.sexList } else if (['B0201', 'B0205', 'SE3006', 'SE1004'].includes(res.data.SZ_HEAD.RESP_CODE)) { this.$router.push({ name: 'login' }) } else { this.$dialog.toast(res.data.SZ_HEAD.RESP_MSG) } }) },

appointment.spec.js

it('this is what i did ', () => { let addGoodsCodeList wrapper.setData({ orderInfo: { goodsCode: 'gds1213223' }, addGoodsCodeListStr: 'gds1312331231' }) addGoodsCodeList = jest.spyOn(api, 'querySexListByGoodsCode') wrapper.vm.$nextTick(() => { expect(addGoodsCodeList).toBeCalled() next() }) addGoodsCodeList.mockClear() }) but ,i got the wrong message in my terminal this is the wrong message : [Vue warn]: Computed property "addGoodsCodeListStr" was assigned to but it has no setter.

found in

--->

console.error node_modules/vue/dist/vue.runtime.common.dev.js:621 [Vue warn]: Error in nextTick: "Error: expect(jest.fn()).toBeCalled() Expected mock function to have been called, but it was not called. i hope to get the help to solve to this problem
clamarque commented 5 years ago

+1

igeligel commented 5 years ago

I think this is not supposed to be working with this combination of plugins. During the time i created this example vue-test-utils was still private or in a really initial state. That is why I "abused" the internal vue functionalities to test components.

Regarding the watch test I would recommend looking through this blog article: https://alexjover.com/blog/test-computed-properties-and-watchers-in-vue-js-components-with-jest/

Hatzen commented 4 years ago

It looks like there is a very dirty work around but not a real solution at the moment: https://stackoverflow.com/questions/60712610/vue-jest-spyon-not-working-when-calculating-watcher-method-calls