Vuex with Jest - Cannot read property of undefined

Question

I'm trying to use Jest to test a Vue component which makes use of a getter in Vuex. The getter returns a function which in turn returns an array:

questions: state => pageNumber => state.pages[pageNumber].questions

I make use of it in my component like so:

computed: {
  inputs() {
    return this.$store.getters.questions(this.pageNumber);
  },
},

This seems to work fine in terms of rendering the UI, but when trying to test the component I get Cannot read property 'questions' of undefined

My test is a pretty simple one, but I've not used Jest with Vuex before so I could be misunderstanding how you would test components which use getters:

import Vuex from 'vuex';
import { mount, createLocalVue } from '@vue/test-utils';
import SurveyQuestionBuilder from '../components/SurveyQuestionBuilder.vue';
import store from '../store';

const localVue = createLocalVue();
localVue.use(Vuex);

describe('SurveyQuestionBuilder.vue', () => {
  it('renders a value from $store.state', () => {
    const wrapper = mount(SurveyQuestionBuilder, { store, localVue });

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

I'm presuming it's to do with pages[pageNumber] in the getter, but not sure what to do to resolve it.

Store.js imports a couple of modules:

import Vue from 'vue';
import Vuex from 'vuex';
import surveyBuilderStore from './survey_builder';
import matrixStore from './matrix';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    survey: surveyBuilderStore,
    matrix: matrixStore,
  },
});

The module in question is surveyBuilderStore:

const surveyBuilderStore = {
  state: {
    pages: [],
  },
  getters: {
    pages: state => state.pages,
    questions: state => pageNumber => state.pages[pageNumber].questions,
    config: state => (pageNumber, questionNumber) =>
      state.pages[pageNumber].questions[questionNumber].config,
  },
  mutations: {
    // my mutations
  }
};

user_7152354 · Answer

In your questions getter, you search at probably unknown index in the pages array.

So questions: state => pageNumber => state.pages[pageNumber] is undefined because state.pages is empty and pageNumber is above 0.

To avoid this you can do:

questions: state => pageNumber => {
    return state.pages[pageNumber] 
       ? state.pages[pageNumber].questions 
       : [] // <-- here your default value
}

You can set in your test the value of pageNumber but I don't know if it's a props or data of the component:

For data:

mount(SurveyQuestionBuilder, { 
    store, 
    localVue, 
    data:() => ({ pageNumber: 0 }) 
})

For props:

mount(SurveyQuestionBuilder, { 
    store, 
    localVue, 
    propsData: { pageNumber: 0 } 
})

Vuex with Jest - Cannot read property <getterName> of undefined

1 Answers