TypeError: Cannot read property 'getters' of undefined @vue/test-utils

Question

I am using @vue-test-utils for vuejs unit testing.

My store looks like :

export default {
 root: true,
 state: {
    batches: []
 },
 getters: {
 getBatches: state => {
    return state.batches
  }
 }
}

Component Looks like this:

<template>
  <div>
   <p>Batches Work!</p>
  </div>
</template>

<script>
  import { mapGetters } from "vuex";

  export default {
    computed: {
      ...mapGetters({
         getBatches: "getBatches"
      })
   }
  }; 
 </script>

Tests file looks like this:

 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()
 })

})

When i run the test, it throws the following:

 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)
 at Watcher.evaluate (node_modules/vue/dist/vue.runtime.common.dev.js:4564:21)
 at Proxy.computedGetter (node_modules/vue/dist/vue.runtime.common.dev.js:4813:17)
 at Proxy.render (src/pages/Batches.vue:772:20)
 at VueComponent.Vue._render (node_modules/vue/dist/vue.runtime.common.dev.js:3532:22)
 at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4048:21)
 at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:4459:25)
 at new Watcher (node_modules/vue/dist/vue.runtime.common.dev.js:4448:12)
 at mountComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4055:3)
 at VueComponent.Object.<anonymous>.Vue.$mount 
 (node_modules/vue/dist/vue.runtime.common.dev.js:8386:10)
  at init (node_modules/vue/dist/vue.runtime.common.dev.js:3112:13)
  at createComponent (node_modules/vue/dist/vue.runtime.common.dev.js:5952:9)
  at createElm (node_modules/vue/dist/vue.runtime.common.dev.js:5899:9)
  at VueComponent.patch [as __patch__] 
 (node_modules/vue/dist/vue.runtime.common.dev.js:6449:7)
 at VueComponent.Vue._update (node_modules/vue/dist/vue.runtime.common.dev.js:3927:19)
 at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4048:10)
 at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:4459:25)
 at new Watcher (node_modules/vue/dist/vue.runtime.common.dev.js:4448:12)
 at mountComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4055:3)
 at VueComponent.Object.<anonymous>.Vue.$mount 
 (node_modules/vue/dist/vue.runtime.common.dev.js:8386:10)
 at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:8649:21)
 at shallowMount (node_modules/@vue/test-utils/dist/vue-test-utils.js:8677:10)
 at Suite.Object.<anonymous>.describe (test/unit/pages/batches-test.spec.js:49:21)
 at Object.describe (test/unit/pages/batches-test.spec.js:18:1)

 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 all the ways to get my test to work with vuex resources, but I am stuck. I can’t understand Where I am going wrong. Please help me!

Answer 1

You're trying to use localVue and Vue at the same, which is not going to work, also components that depend on Vuetify should not use localVue

Give that, the spec could be rewritten as:

import { shallowMount } from '@vue/test-utils';
import Vuex from 'vuex';
import Vuetify from 'vuetify';
import Vue from 'vue';
import Batches from '../../../src/pages/Batches';

Vue.use(Vuex);
Vue.use(Vuetify);

describe('Batches', () => {
  it('Batches is a vue component', () => {
    const store = new Vuex.Store({
      modules: {
        module: {
          getters: { getBatches: () => jest.fn() },
        },
      },
    });

    const $route = {
      path: '/batches',
    };

    const wrapper = shallowMount(Batches, {
      Vue,
      mocks: {
        $route,
      },
      store,
    });

    expect(wrapper.isVueInstance()).toBeTruthy();
  });
});

Answer 2

you have to use same getter in you test file that you are using in your main file for you are creating test