Cannot read property 'getters' of undefined - VueJS unit testing with jest

Question

I am writing unit tests for VueJS components and have consulted the "Applying Global Plugins and Mixins" section of Vue Test Utils Common Tips. I have a component that depends on the Vuex store so it makes sense that I would transpose the example under that section for my purposes.

Here is my code for that component's specific .spec.js file:

import { createLocalVue, mount } from '@vue/test-utils'
import AppFooter from '@/components/AppFooter/AppFooter'
import store from '@/store'

describe('AppFooter component', () => {
    const localVue = createLocalVue()
    localVue.use(store)

    it('AppFooter should have header slot', () => {
        const AppFooterComponent = mount(AppFooter, {
            localVue
        })

        /* TODO: Replace with a more appropriate assertion */
        expect(true).toEqual(true)
    })
})

This is pretty faithful to the example provided in the link above. However, the error I receive when I run the test suite is as follows:

Should I be installing the Vue store differently?

Iloilo

I believe you should be doing: localVue.use(Vuex) up top and then pass store in as an argument to mount(), right after localVue. – Haroldharolda

Did you remember to create mocks and mock the getter out there? – Misadvise

Answer 1

To elaborate on my comment, I believe it should look like the following, where you pass in the store on the mount() call.

import { createLocalVue, mount } from '@vue/test-utils'
import AppFooter from '@/components/AppFooter/AppFooter'
import Vuex from 'vuex'
import store from '@/store' //you could also mock this out.

describe('AppFooter component', () => {
    const localVue = createLocalVue()
    localVue.use(Vuex)

    it('AppFooter should have header slot', () => {
        const AppFooterComponent = mount(AppFooter, {
            store,
            localVue
        })

        /* TODO: Replace with a more appropriate assertion */
        expect(true).toEqual(true)
    })
})

Haroldharolda

Answer 2

I believe that you have something like this.$store.getters[someBeautifulGetterName] in you component. To make your tests mount the component your need to initialise store and pass it into your testing component. Just keep in mind that this would be a brand new instance of Vuex. Here is the code

import { shallowMount } from '@vue/test-utils'
import Vue from 'vue'
import Vuex from 'vuex'
import Tags from '@/components/Tags'
    
Vue.use(Vuex)
Vue.prototype.$store = new Vuex.Store()

const factory = (propsData) => {
  return shallowMount(Tags, {
    propsData: {
      ...propsData
    }
  })
}

describe('Tags', () => {  
  it("render tags with passed data", () => {
    const wrapper = factory({ loading: true })
    // TODO:
  })
})

Antagonism