Vue.jsでjestを使ってテストをしています。知識とても浅いです。
現状: テストは通りますが、『将来的に使えなくなるよ』っていう警告が表示されています。
解決したい事:
1、 setMethods()を使用せずにメソッドが実行されることを確認したいです。
2、 警告が出ない記述で、ライフサイクルメソッドのcreated()でメソッドが実行されることを確認したいです。
現状: axios自体が未完了状態で実行されないです。
warning
1[vue-test-utils]: setMethods is deprecated and will be removed in the next major version. There is no clear migration path for setMethods - Vue does not support arbitrarily replacement of methods, nor should VTU. To stub a complex method extract it from the component and test it in isolation. Otherwise, the suggestion is to rethink those tests. 2 3[vue-test-utils]: overwriting methods via the `methods` property is deprecated and will be removed in the next major version. There is no clear migration path for the `methods` property - Vue does not support arbitrarily replacement of methods, nor should VTU. To stub a complex method extract it from the component and test it in isolation. Otherwise, the suggestion is to rethink those tests. 4
test
1import LikeTest from "../../resources/js/components/like.vue"; 2import { mount } from '@vue/test-utils'; 3const axios = require('axios'); 4 5describe('LikeTest', () => { 6 const wrapper = mount(LikeTest, {propsData: {item_id: 1},}); 7 8 it('ボタンをクリックでlike()が動く事', () => { 9 const stub = jest.fn(); 10 wrapper.setMethods({ 11 like: stub, 12 }); 13 wrapper.find('button').trigger('click'); 14 expect(stub).toHaveBeenCalled(); 15 }) 16 17 it('like_check()がが動く事', () => { 18 const like_check = jest.fn(); 19 const test = mount(LikeTest, { methods: { like_check } }); 20 expect(like_check).toHaveBeenCalled(); 21 }) 22});
component
1export default { 2 props: ['item_id'], 3 data() { 4 return { 5 status: false, 6 } 7 }, 8 created() { 9 this.like_check() 10 }, 11 methods: { 12 like_check() { 13 const id = this.item_id 14 const array = ["/items/",id,"/check"]; 15 const path = array.join('') 16 axios.get(path).then(res => { 17 if(res.data == 1) { 18 this.status = true 19 } else { 20 this.status = false 21 } 22 }).catch(function(err) { 23 console.log(err) 24 }) 25 }, 26 like() { 27 const id = this.item_id 28 const array = ["/items/",id,"/likes"]; 29 const path = array.join('') 30 axios.post(path).then(res => { 31 this.like_check() 32 }).catch(function(err) { 33 console.log(err) 34 }) 35 } 36 } 37}
調べたこと
警告表示をなくす。
メンバーの方?がcreated()についてこんな感じで言っているので、今はこの書き方で良さそう?(出来るまで待つスタイル?)
wrapper.setMethodsの代わりになるものは見つけられず。
それぞれ代わりとなる記載は無いのでしょうか?
どなたかお分かりになる方いましたら、教えていただきたいです。
よろしくお願いいたします。
jest 26.6.3
vue 2.5.17
あなたの回答
tips
プレビュー