Vuexの名前空間を使ったactionsをJestでMockする

はじめに

公式に名前空間を使わないactionsをMockする方法は記載されていますが、名前空間を使ったactionsのMock方法が見当たらなかったので、試してみてできた方法をここに記載します。

やり方

対象のコンポーネント

こんなmethodsを持っているコンポーネントを想定します。

  methods: {
    ...mapActions('namespaceA', ['hoge']),
    ...mapActions('namespaceB', ['fuga']),
}

Mock

こんな感じでMockできます。

const localVue = createLocalVue()
localVue.use(Vuex)
const actions = {
  'namespaceA/hoge': jest.fn(),
  'namespaceB/fuga': jest.fn()
}

const wrapper = shallowMount(Component, {
    store: new Vuex.Store({
      actions,
      mutations: {},
      state: {},
    }),
    localVue
})

テスト

こんな感じでテストできます。

expect(actions['namespaceA/hoge']).toHaveBeenCalled()
expect(actions['namespaceB/fuga']).toHaveBeenCalled()

もしかしたら、もっとスマートな方法があるかもしれませんが、こういう方法もあるということで。。