Vue.jsでdispatchのアクションがcallされる事をテストしたいのですが、Received 0と表示されてしまいます

Question

Vue.jsでテストをしています。(jest)

やりたい事：　dispatchでvuexのアクションが呼ばれるか、をテストしたいです。

現状： コンポーネント内のメソッドが呼ばれるのは確認できますが、その中でdispatchしているvuex側の呼び出しが確認出来ません。

● ButtonListTest › dispatchでvuexのアクションが動く事

    expect(jest.fn()).toHaveBeenCalled()

    Expected number of calls: >= 1
    Received number of calls:    0

import ButtonListTest from "../../resources/js/components/ButtonList";
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex'
import { config } from '@vue/test-utils'
config.showDeprecationWarnings = false

const localVue = createLocalVue()

localVue.use(Vuex)

describe('ButtonListTest', () => {

  let store
  let user_actions

  beforeEach(() => {
    user_actions = {
      show_item_list: jest.fn()
    }
    store = new Vuex.Store({
      modules: {
        user: {
          state: {
            show_items: false,
          },
          actions: user_actions
        }
      }
    })
  })

  const wrapper = shallowMount(ButtonListTest, { store, localVue });

  it('dispatchでvuexのアクションが動く事', () => {
    const stub = jest.fn();
    wrapper.setMethods({
      show_items: stub,
    });
    wrapper.find('[data-testid="show_items"]').trigger('click');
    expect(stub).toHaveBeenCalled();

    expect(user_actions.show_item_list).toHaveBeenCalled()　　　　　引っ掛かる部分です
  })
});

import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);

const User = {
  namespaced: true,
  state: {
    show_items: false,
  },
  mutations: {
    show(state) {
      if(state.show_items == true) {
        state.show_items = false
      } else {
        state.show_follows = false
        state.like_items = false
        state.show_items = true
      }
    }
  },
  actions: {
    show_item_list({commit}) {
      commit('show')
    }
  }
}

export default new Vuex.Store({
  modules: {
    user: User,
  }
})

<a href="#" @click.prevent="show_items" class="ml-2" data-testid="show_items" style="font-size: 1rem;">Items </a>
<script>
export default {
  methods: {
    show_items() {
       this.$store.dispatch('user/show_item_list')
    },
  }
}
</script>

試した事
user_actionsをactionsに書き換える。

自分の理解だと呼べるはずなのですが、errorになってしまいます。
errorの内容としては0と表示されているので、呼び出せていない事が原因と見ていますが、解決出来ずにいます。

参考にしているサイト

どなたか知識のある方居ましたら、ご教授頂きたいです。
よろしくお願い致します。

jest 26.6.3
vue 2.5.17

Answer 1

自己解決しました

結論 beforeEach内のモックの作り方に問題がありました。
new Vuex.Storeでモックで作成しtsuserをモジュール化すれば良かったのですが、actionsやstateを書いてしまっていました。
それらの記載を変更し、テストの中身もシンプルにした結果処理が通るようになりました。

beforeEach(() => {
  user = {
    namespaced: true,
    actions: {
      show_item_list: jest.fn(),
    }
  }
  store = new Vuex.Store({
    modules: {
      user: user
    }
  })
})

it('dispatchでvuexのアクションが動く事', () => {
  const wrapper = shallowMount(ButtonListTest, { store, localVue });
  wrapper.find('[data-testid="show_items"]').trigger('click');
  expect(user.actions.show_item_list).toHaveBeenCalled()
})

今の理解だとモックで作成したものをnew Vuex.Storeでモジュール化していくイメージです。
確かに言われてみればvuexの記載に非常に似ています。ほぼそのままのイメージです。