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

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

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

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

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    }

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

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

行動規範の内容に同意します

回答1件

自己解決

自己解決しました

結論：　.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