Jest单元测试克隆Vuex store时遇TypeError：无法将Symbol转为字符串

问题根源 #

你的项目直接导出了Vuex的Store实例，而非创建Store所需的纯配置对象。当测试代码试图把这个实例当作配置传入new Vuex.Store()时，会触发实例内部Symbol私有属性的转换错误；同时因为实例不是合法配置，新Store的state无法正常初始化，进而出现state为undefined的问题。

解决方案 #

1. 拆分Store配置与实例化

修改你的Store文件，把配置对象单独抽离，同时保留原实例导出（供业务代码正常使用）：

// store/index.js
import Vuex from 'vuex'

// 抽离可复用的纯配置对象
export const storeConfig = {
  state: {
    iIndexSlice: 0,
    // ...你的其他state字段
  },
  getters: {
    currentView(state) {
      // 原getter逻辑代码
    }
  },
  mutations: {
    SET_CURRENT_VTK_INDEX_SLICES(state, payload) {
      // 原mutation处理逻辑
      if (payload.indexAxis === 'i') {
        state.iIndexSlice = payload.value
      }
      // ...其他逻辑
    },
    // ...你的其他mutations
  },
  actions: {
    // ...你的其他actions
  }
}

// 业务代码继续使用这个Store实例
const store = new Vuex.Store(storeConfig)
export default store

2. 更新测试代码，使用配置对象创建独立测试Store

修改测试文件，导入抽离的storeConfig，用它创建干净的测试专用Store：

import { createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex' // 注意这里之前写错了，应导入vuex而非vue
import { storeConfig } from '@/store' // 路径根据项目结构调整
import { cloneDeep } from 'lodash'

test("SET_CURRENT_VTK_INDEX_SLICES should update the VTK index slices", () => {
  const localVue = createLocalVue()
  localVue.use(Vuex)
  
  // 深拷贝配置，避免不同测试间的状态污染
  const testStore = new Vuex.Store(cloneDeep(storeConfig))
  
  // 初始状态断言
  expect(testStore.state.iIndexSlice).toBe(0)
  
  // 触发mutation
  testStore.commit('SET_CURRENT_VTK_INDEX_SLICES', { indexAxis: 'i', value: 1 })
  
  // 验证状态更新结果
  expect(testStore.state.iIndexSlice).toBe(1)
})

为什么这样能解决问题 #

• Vuex的Store实例内部包含Symbol类型的私有标识属性，直接克隆或把实例当作配置传入新Store时，会触发Symbol转字符串的错误。
• 抽离的storeConfig是纯JavaScript对象，没有内部私有属性，能安全地被克隆和用于创建新Store，确保每个测试都拥有独立的初始状态。

内容的提问来源于stack exchange，提问作者Dave Mackey