Vuex с Jest - не может прочитать свойство <getterName>из неопределенного - PullRequest
Новая
       7

Vuex с Jest - не может прочитать свойство <getterName>из неопределенного

0 голосов
/ 01 сентября 2018

Я пытаюсь использовать Jest для тестирования компонента Vue, который использует геттер в Vuex. Получатель возвращает функцию, которая в свою очередь возвращает массив: 

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

Я использую его в своем компоненте так: 

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

Кажется, это нормально работает с точки зрения рендеринга интерфейса, но при попытке протестировать компонент я получаю Cannot read property 'questions' of undefined

Мой тест довольно прост, но я раньше не использовал Jest с Vuex, поэтому я могу неправильно понять, как вы будете тестировать компоненты, использующие геттеры: 

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

Рассматриваемый модуль - 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
  }
};

1 Ответ

0 голосов
/ 01 сентября 2018

В получателе вопросов вы ищете, вероятно, неизвестный индекс в массиве страниц.

То есть questions: state => pageNumber => state.pages[pageNumber] не определено, поскольку state.pages пусто, а pageNumber выше 0.

Чтобы избежать этого, вы можете сделать: 

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 } 
})
...