Javascript 模拟/测试Vuex存储模块给我带来了类型错误问题

我仍在学习如何测试组件和js代码，但现在我被Vuex模块困住了。。。以下是测试代码：

import { shallowMount } from '@vue/test-utils'
import WorkoutsHistory from '../../src/components/WorkoutsHistory.vue'
import workout from '../../src/store/modules/workout'

const mocks = {
  $store: {
    modules: {
      workout
    }
  }
}
const propsData = {
  show: false
}

let wrapper

describe('WorkoutsHistory.vue', () => {

  beforeEach(() => {
    wrapper = shallowMount(WorkoutsHistory, { mocks, propsData })
  })

  it('should match snapshots', () => {
    expect(wrapper).toMatchSnapshot()
  })

  it('should render the workout-list', () => {
    expect(wrapper.find('.workout-list')).toBeTruthy()
  })

})

导入的模块为：

import mutations from './mutations'

const state = {
  exercises: {},
  workouts: {}
}

export default {
  namespaced: true,
  state,
  mutations
}

我这里的问题很简单，当我运行测试时，它会返回一个错误：

TypeError:无法读取未定义的

的属性'workout/'，这对我来说很奇怪，因为我在Vuex存储中声明了结构（我也尝试了\createLocalVue）。以下是组件脚本：

<script>
import { mapState } from 'vuex'
import NewExercise from './NewExercise'

export default {
  name: 'WorkoutsHistory',
  components: { NewExercise },
  data() {
    return { show: false }
  },
  computed: {
    ...mapState('workout', ['workouts'])
  },
  methods: {
    showForm() { this.show = !this.show }
  }
}
</script>

从“vuex”导入{mapState}
从“./NewExercise”导入新练习
导出默认值{
名称：'WorkoutsHistory'，
组件：{NewExercise}，
数据（）{
返回{show:false}
},
计算：{
…映射状态（'训练'，['训练]）
},
方法：{
showForm（）{this.show=！this.show}
}
}

---

这里有什么想法或建议吗？

答案是因为您正在模拟组件上的

$store

属性，但您没有在组件中使用这种方式。组件正在使用

…mapState（）

方法，该方法将自动在Vue的本地副本上实例化

Vuex.Store（）

。查看以下链接，为本地组件的单元/集成测试正确模拟存储：

---

快速向提供链接的@Anatoly呼喊。

您至少应该使用createLocalVue。请看一下这一页