質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

1466閲覧

Javascriptのjestでテストは通るが、"will be removed in the next major version"警告が出ているので対策したいです。

tenlife

総合スコア70

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/12/06 01:37

編集2020/12/07 05:01

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問