Mocking Vuex getters for unit tests yields unexpected result

Question

I'm writing unit tests for VueJS components and am using this article as a reference for testing components that have the Vuex store as a dependency. Here are the relevant parts of the component in question:

<!-- COMPONENT -->

<template>
    <div>
      {{ resources.main.copyIco }} {{ resources.main.rights }} {{ resources.main.read }}
    </div>
</template>

<script>
  import { mapActions, mapGetters } from 'vuex'

  export default {
      computed: {
          ...mapGetters({
              resources: 'resources'
          })
      },
      methods: {
          ...mapActions({
              dispatchAction: 'dispatchAction'
          })
      }
   }
</script>

Here is what my test suite for the component looks like:

/* Test suite for component */

import { createLocalVue, shallowMount } from '@vue/test-utils'
import Vuex from 'vuex'
import AppFooter from '@/components/AppFooter/AppFooter'
import { mapActions, mapGetters } from 'vuex'

describe('AppFooter component', () => {   

    it('instantiates the component correctly', () => {
        const localVue = createLocalVue()
        localVue.use(Vuex)
        /* define mock getters */
        const getters = {
            resources: () => 'resources'
        }
        const store = new Vuex.Store({ getters })
        const wrapper = shallowMount(AppFooter, {
            store,
            localVue
        })

        console.log('test suite does not reach this point due to error')
    })
})

What's interesting about this is that when I run the Jest test suite, the error reads as follows:

To me, this seems strange because (taken into context with the component template), it looks like the resources.main property is well-defined but that resources.main.copyIco is not. Otherwise, if resources.main was not well-defined, that would be the error instead of what's seen in the picture.

In a nutshell, why is this error occurring based on how both the component and suite are set up? Do I need to redefine the mapGetters within the component?

Olivier De Meulder Olivier De Meulder · Accepted Answer · 2018-08-21T18:43:55

In your example your getter is just returning a string named resources and that has no main property. This has nothing to do with Vue.

resources.main is undefined. And now your program tries to get the copyIco property of undefined. The error is message is right. It cannot read the copyIco of undefined.

One way to mock this better would be something along those lines.

const getters = {
    resources: () => ({ main: { copyIco: 'something', rights: 'rights'}})
}

Mocking Vuex getters for unit tests yields unexpected result

1 Answers