I've been utilizing @vue-test-utils for unit testing in VueJS.
This is what my store setup looks like:
export default {
root: true,
state: {
batches: []
},
getters: {
getBatches: state => {
return state.batches
}
}
}
The component has the following structure:
<template>
<div>
<p>Batches Work!</p>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
computed: {
...mapGetters({
getBatches: "getBatches"
})
}
};
</script>
The test file is structured as follows:
import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import Vuetify from 'vuetify'
import Vue from 'vue'
import Batches from '../../../src/pages/Batches'
const $route = {
path: '/batches'
}
const localVue = createLocalVue()
localVue.use(Vuex)
Vue.use(Vuetify)
describe('Batches', () => {
let getters, store
beforeEach(() => {
getters = {
getBatches: () => jest.fn()
},
store = new Vuex.Store({
getters
})
})
const wrapper = shallowMount(Batches, {
localVue,
mocks: {
$route
},
store
})
it('Batches is a vue component', () => {
expect(wrapper.isVueInstance()).toBeTruthy()
})
})
Upon running the test, I encounter the following error message:
FAIL test/unit/pages/batches-test.spec.js
Batches
✕ encountered a declaration exception (2ms)
● Batches › encountered a declaration exception
TypeError: Cannot read property 'getters' of undefined
at VueComponent.mappedGetter (node_modules/vuex/dist/vuex.common.js:898:73)
at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:4459:25)
<Additional error details here>
...
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Error in render: "TypeError: Cannot read property 'getters' of undefined"
I have tried different methods to make my test work with vuex resources but seem to be stuck. I can't figure out where I am going wrong. Any assistance would be greatly appreciated!