제스트가 포함된 Vuex - 정의되지 않은 속성을 읽을 수 없습니다.

제스트가 포함된 Vuex - 정의되지 않은 속성을 읽을 수 없습니다.

저는 Vuex의 getter를 사용하는 Vue 컴포넌트를 테스트하기 위해 Jest를 사용하려고 합니다.getter는 함수를 반환하고 그 함수는 배열을 반환합니다.

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

다음과 같이 컴포넌트에서 사용합니다.

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

UI 렌더링에 관해서는 정상적으로 동작하고 있는 것처럼 보이지만 컴포넌트를 테스트하려고 하면,Cannot read property 'questions' of undefined

제 테스트는 매우 간단합니다만, Vuex에서는 Jest를 사용해 본 적이 없기 때문에, getter를 사용하는 컴포넌트를 어떻게 테스트하는지를 오해할 수 있습니다.

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

제 생각에 그건 이 일과 관련이 있는 것 같아요.pages[pageNumber]어떻게 해결해야 할지 모르겠어요.

Store.js는 몇 가지 모듈을 Import합니다.

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

문제의 모듈은 survey Builder Store입니다.

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

질문 게터에서는 페이지 배열에서 알 수 없는 인덱스를 검색합니다.

그렇게questions: state => pageNumber => state.pages[pageNumber]정의되어 있지 않습니다.state.pages비어 있습니다.pageNumber0을 넘습니다.

이를 피하기 위해 다음 작업을 수행할 수 있습니다.

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

테스트에서 다음 값을 설정할 수 있습니다.pageNumber컴포넌트의 소품인지 데이터인지 알 수 없습니다.

데이터의 경우:

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

소품:

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

언급URL : https://stackoverflow.com/questions/52127313/vuex-with-jest-cannot-read-property-gettername-of-undefined