Jest测试vuex-oidc组件时mapActions调用报错$store未定义如何解决？

报错根因 #

mapActions返回的方法默认依赖执行上下文this上挂载的$store属性，你在测试场景下直接解构调用该方法时，执行上下文为空，没有绑定对应的mock store，就会触发该报错，这是Vuex单元测试的常见踩坑点。

解决方案 #

方案1：挂载组件时传入mock store（组件测试场景）

使用Vue Test Utils挂载测试组件时，将你构造的mock store实例作为全局插件传入，组件内部调用mapActions生成的方法时会自动绑定该mock store：

import { mount } from '@vue/test-utils'
import { createStore } from 'vuex'
import OidcCallback from '@/views/OidcCallback.vue'

// 构造mock的oidcStore模块
const mockOidcStore = {
  namespaced: true,
  actions: {
    oidcSignInCallback: jest.fn().mockResolvedValue({})
  }
}
// 生成mock store实例
const mockStore = createStore({
  modules: {
    oidcStore: mockOidcStore
  }
})

test('oidc回调逻辑测试', () => {
  const wrapper = mount(OidcCallback, {
    // Vue Test Utils 2.x 写法，1.x 直接写plugins: [mockStore]即可
    global: {
      plugins: [mockStore]
    }
  })
  // 后续触发组件逻辑不会再报$store相关错误
})

方案2：手动绑定执行上下文（单独调用action场景）

如果不需要挂载组件，只想单独调用mapActions生成的方法，可以手动给方法绑定携带mock store的上下文：

const { oidcSignInCallback } = mapActions("oidcStore", ["oidcSignInCallback"])
// 手动绑定包含mock store的上下文
const boundSignInCallback = oidcSignInCallback.bind({ $store: mockStore })
// 调用绑定后的方法即可触发mock store内的对应action
await boundSignInCallback(/* 传递你需要的入参 */)

优化建议 #

如果你的组件使用<script setup>语法编写，更推荐直接通过useStore获取store实例调用dispatch，测试时只需要mockuseStore的返回值即可，不需要处理mapActions的上下文绑定问题，写法参考：

// 组件内代码
import { useStore } from 'vuex'
const store = useStore()
// 调用action
await store.dispatch('oidcStore/oidcSignInCallback', 参数)

内容的提问来源于stack exchange，提问作者Inbar Azulay