🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Vue.js

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

JavaScript

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

Q&A

解決済

1回答

1491閲覧

Vue.jsのjestを使ったaxios通信のテストでvuex内のアクションが呼び出されていることを確認できません

tenlife

総合スコア70

Vue.js

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

JavaScript

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

0グッド

0クリップ

投稿2020/12/26 00:00

Vue.jsのaxiosのテストをjestを使用して実装しています。

解決したい事: axiosを実行した際のexpectedを2つ実行したいです

現状: テストでは1つ目は呼び出せるのですが、2つ目が呼び出せません。サーバー上では正しく動きます。

error

1 Expected number of calls: >= 1 2 Received number of calls: 0 3 4 87 | return wrapper.vm.send().then(data => 5 88 | expect(comment.actions.get_comments).toHaveBeenCalled(), 6 > 89 | expect(comment.actions.get_select_user).toHaveBeenCalled() 7

test

1import { shallowMount, createLocalVue} from '@vue/test-utils'; 2import Comment from "../../resources/js/components/Comment.vue"; 3import { config } from '@vue/test-utils' 4config.showDeprecationWarnings = false 5const axios = require('axios'); 6jest.mock('axios') 7 8・・・・省略 9 10 let store 11 let comment 12 13 const localVue = createLocalVue() 14 15 localVue.use(Vuex) 16 17 beforeEach(() => { 18 comment = { 19 namespaced: true, 20 state: { 21 select_users: jest.fn(), 22 }, 23 actions: { 24 get_comments: jest.fn(), 25 get_select_user: jest.fn() 26 } 27 } 28 store = new Vuex.Store({ 29 modules: { 30 comment: comment 31 } 32 }) 33 }) 34 35it('sendメソッドが実行されてaxiosが動くことを確認', () => { 36 const wrapper = shallowMount(Comment); 37 wrapper.setData({ text: 'おはよう' }) 38 expect(wrapper.vm.text).toBe('おはよう') 39 const users = [ 40 ...中略 41 ] 42   const response = { 43 data: 1 44 } 45 axios.post.mockResolvedValue(response); 46 return wrapper.vm.send().then(data => 47 expect(comment.actions.get_comments).toHaveBeenCalled(), 48 expect(comment.actions.get_select_user).toHaveBeenCalled() 49 ); 50}

component

1<script> 2const axios = require('axios'); 3 4..省略 5 6   return axios.post(path, text).then(res => { 7 this.$store.dispatch('comment/get_comments', id) 8 select_users = 'done' 9 this.$store.dispatch('comment/get_select_user', select_users) 10 }).catch(function(err) { 11 console.log(err) 12 })

vuex

1const Comment = { 2 namespaced: true, 3 actions: { 4 get_comments({commit}, id) { 5 commit('comments', id) 6 }, 7 get_select_user({commit}, user) { 8 commit('select', user) 9 } 10 } 11} 12 13export default new Vuex.Store({ 14 modules: { 15 comment: Comment, 16 } 17})

確認した事
1, console.log(wrapper.vm.send()) の実行 -> ありそう

2, console.log(comment.actions.get_select_user)の実行。下記結果 -> ありそう

terminal

1console.log 2 { 3 get_comments: [Function: mockConstructor] { 4 _isMockFunction: true, 5 getMockImplementation: [Function], 6 mock: [Getter/Setter], 7 mockClear: [Function], 8 mockReset: [Function], 9 mockRestore: [Function], 10 mockReturnValueOnce: [Function], 11 mockResolvedValueOnce: [Function], 12 mockRejectedValueOnce: [Function], 13 mockReturnValue: [Function], 14 mockResolvedValue: [Function], 15 mockRejectedValue: [Function], 16 mockImplementationOnce: [Function], 17 mockImplementation: [Function], 18 mockReturnThis: [Function], 19 mockName: [Function], 20 getMockName: [Function] 21 }, 22 get_select_user: [Function: mockConstructor] { 23 _isMockFunction: true, 24 getMockImplementation: [Function], 25 mock: [Getter/Setter], 26 mockClear: [Function], 27 mockReset: [Function], 28 mockRestore: [Function], 29 mockReturnValueOnce: [Function], 30 mockResolvedValueOnce: [Function], 31 mockRejectedValueOnce: [Function], 32 mockReturnValue: [Function], 33 mockResolvedValue: [Function], 34 mockRejectedValue: [Function], 35 mockImplementationOnce: [Function], 36 mockImplementation: [Function], 37 mockReturnThis: [Function], 38 mockName: [Function], 39 getMockName: [Function] 40 } 41 }

上記を調べてみましたが、解決に至らずでした。

何かお分かりになる方、参考になる資料など知っている方いましたら、ご教授いただきたいです。
よろしくお願いします。

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

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

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

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

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

guest

回答1

0

自己解決

自己解決しました

結論: .thenを2回分けて書くということでした。
下記のコードで処理が通りました。

   return wrapper.vm.send().then(data => expect(comment.actions.get_comments).toHaveBeenCalled(), ).then(data => { expect(comment.actions.get_select_user).toHaveBeenCalled() });

投稿2020/12/27 21:58

tenlife

総合スコア70

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問