Пересмешивание / тестирование модулей магазина Vuex вызывает у меня проблемы с TypeError

Question

Я все еще учусь тестировать компоненты и код 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: Cannot read property 'workout/' of undefined, что странно для меня, потому что я объявляю структуру как в Магазин Vuex (я также пытался с \ createLocal Vue). Вот сценарий компонента:

<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>

Любая идея или совет здесь?

Answer 1

Ответ в том, что вы издеваетесь над свойством $store в своем компоненте, но вы не используете его в своем компоненте. Ваш компонент использует метод ...mapState(), который автоматически ожидает, что экземпляр Vuex.Store() был создан в локальной копии Vue. Взгляните на следующую ссылку, чтобы правильно смоделировать Магазин для локальных компонентов / интегральных тестов:

https://vue-test-utils.vuejs.org/guides/using-with-vuex.html

Быстрый крик на @ Анатолий, предоставивший ссылку.