I'm currently in the process of learning how to effectively test components and JavaScript code, but I have hit a roadblock with Vuex modules. Below is the code snippet for the test:
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()
})
})
The imported module looks like this:
import mutations from './mutations'
const state = {
exercises: {},
workouts: {}
}
export default {
namespaced: true,
state,
mutations
}
The issue I am facing is quite straightforward - when I run the test, it returns an error:
TypeError: Cannot read property 'workout/' of undefined<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>
Do you have any suggestions or insights on how to troubleshoot this issue?