vue-test-utils测试命名空间Vuex模块时报Cannot read 'getters' of undefined如何解决

该错误由测试环境下的Vuex模块化配置和组件内mapGetters/mapActions的命名空间绑定规则不匹配导致，开启namespaced: true的模块没有按照规则在测试store中完成注册，导致绑定方法读取对应模块属性时抛出空值报错。

1. 按规则注册命名空间模块 #

测试用store必须严格按照项目实际的模块结构注册，保留namespaced: true配置，禁止将模块内的getter、action直接写在根store层级。

// 错误写法示例
const store = new Vuex.Store({
  getters: {
    getMemoList: () => [] // 属于fraudTransactionState模块的getter直接写在根层级，路径不匹配
  }
})

// 正确写法示例
// 先定义独立的模块配置，和项目实际模块参数保持一致
const mockFraudTransactionState = {
  namespaced: true, // 必须保留命名空间开启配置
  state: () => ({}),
  getters: {
    getMemoList: () => []
  },
  actions: {
    fetchMemoList: jest.fn() // 模拟action可用jest.fn()方便后续调用断言
  }
}

// 根store中注册模块，模块key必须和组件内绑定的命名空间前缀完全一致
const store = new Vuex.Store({
  modules: {
    fraudTransactionState: mockFraudTransactionState
  }
})

2. 校验组件内绑定写法 #

确认组件内的mapGetters/mapActions写法符合命名空间规则，命名空间前缀和测试store注册的模块key拼写、大小写完全一致：

// 组件内正确绑定示例
computed: {
  // 第一个参数为命名空间前缀，第二个参数为模块内getter名列表
  ...mapGetters('fraudTransactionState', ['getMemoList', 'getCurrentTransId'])
},
methods: {
  ...mapActions('fraudTransactionState', ['fetchMemoList'])
}

3. 确认组件挂载参数正确 #

挂载组件时必须传入已实例化的store对象，同时绑定注册了Vuex的localVue实例：

import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import MemoTimelineSection from '@/components/MemoTimelineSection.vue'

const localVue = createLocalVue()
localVue.use(Vuex)

// 上述模块、store实例化逻辑写在这里

describe('MemoTimelineSection', () => {
  it('基础渲染正常', () => {
    const wrapper = shallowMount(MemoTimelineSection, {
      localVue,
      store // 必须传入实例化后的store，禁止传入原始配置对象
    })
    // 测试断言逻辑
  })
})

4. 兼容性&污染排查 #

如果上述配置确认无误仍报错，做以下排查：

• 确认版本匹配：Vue2项目对应vue-test-utils@1.x + Vuex@3.x，Vue3项目对应vue-test-utils@2.x + Vuex@4.x，版本不兼容会引发底层属性读取错误
• 每个测试用例创建独立的store实例，避免多测试用例之间的store实例污染
• 存在嵌套子模块的场景下，逐层保留namespaced配置和层级注册结构，不能省略嵌套层级

内容的提问来源于stack exchange，提问作者HK S0