Vue jest: Error in created hook: "TypeError: Cannot read property 'getters' of undefined"

Question

Can you anyone help me to point out what might went wrong here?

I'm trying to mock my getters used in my component in my test cases, but I'm always getting getters of undefined

Here I have mounted my component in mount and created instance for store and mapped it in my mount function.

describe('Get details', () => {
    const mountFunction = options => {
        return mount(Details, {
            localVue,
            ...options
        })
    }
    test('Load weather for default location', () => {
        let getters
        let getLists = []
        let getWDetails = []
        let getSelectedDate = '24/10/2020'


        getters = {
            getLists : () => getLists,
            getWDetails : () => getWDetails ,
            getSelectedDate: () => getSelectedDate
        }

        let mockStore = new Vuex.Store({
            getters
        })

        const wrapper = mountFunction({
            mockStore
        })

        wrapper.find('form').trigger('submit.prevent')
        expect(something needs to be called).toHaveLength(1)

    })
})

Also I imported necessary classes (Vuex, mount..,)

Error on test run is

 ● Console

    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Error in created hook: "TypeError: Cannot read property 'getters' of undefined"

      found in

      ---> <FlightDetails>
             <Root>
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:1884
      TypeError: Cannot read property 'getters' of undefined
          at VueComponent.mappedGetter (C:\study\my-office\node_modules\vuex\dist\vuex.common.js:1020:75)
          at Watcher.get (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:4465:25)
          at Watcher.evaluate (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:4570:21)
          at VueComponent.computedGetter [as getFlights] (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:4819:17)
          at VueComponent.created (C:\study\my-office\src\components\flightDetails.vue:1172:33)
          at invokeWithErrorHandling (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:1850:57)
          at callHook (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:4207:7)
          at VueComponent.Vue._init (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:4989:5)
          at new VueComponent (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:5134:12)
          at createComponentInstanceForVnode (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:3277:10)
          at init (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:3108:45)
          at createComponent (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:5958:9)
          at createElm (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:5905:9)
          at VueComponent.patch [as __patch__] (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:6455:7)
          at VueComponent.Vue._update (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:3933:19)
          at VueComponent.updateComponent (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:4054:10)
          at Watcher.get (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:4465:25)
          at new Watcher (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:4454:12)
          at mountComponent (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:4061:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:8392:10)
          at mount (C:\study\my-office\node_modules\@vue\test-utils\dist\vue-test-utils.js:13935:21)
          at mountFunction (C:\study\my-office\tests\unit\flightDetails.spec.js:13:16)
          at Object.<anonymous> (C:\study\my-office\tests\unit\flightDetails.spec.js:35:25)
          at Object.asyncJestTest (C:\study\my-office\node_modules\jest-jasmine2\build\jasmineAsyncInstall.js:102:37)
          at C:\study\my-office\node_modules\jest-jasmine2\build\queueRunner.js:43:12
          at new Promise (<anonymous>)
          at mapper (C:\study\my-office\node_modules\jest-jasmine2\build\queueRunner.js:26:19)
          at C:\study\my-office\node_modules\jest-jasmine2\build\queueRunner.js:73:41
          at processTicksAndRejections (internal/process/task_queues.js:93:5)

in my component apart from the three getters(which I mocked) nothing used.

Answer 1

Can you try with following code and you can use shallowMount to test the component.

describe('Get details', () => {
    const mountFunction = options => {
        return shallowMount(Details, {
            localVue,
            ...options
        })
    }
    test('Load weather for default location', () => {
        const getters = {
            getLists : () => [],
            getWDetails : () => [] ,
            getSelectedDate: () => '24/10/2020'
        }

        let mockStore = new Vuex.Store({
            getters
        })

        const wrapper = mountFunction({
            store: mockStore
        })

        const spyHandlemethods = jest.spyOn(wrapper.vm, 'spyHandlemethods')
        wrapper.vm.submitHandler()
        expect(spyHandlemethods).toHaveBeenCalled()

    })
})