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!

Naveen Kashyap · Accepted Answer · 2019-11-19 19:40:13Z

1

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

answered Nov 19, 2019 at 19:40

Naveen Kashyap

3821 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

golfadas · Accepted Answer · 2020-08-14 10:33:48Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related