首页 文章

带有Jest的Vuex - 无法读取未定义的属性<getterName>

提问于
浏览 次
1

我正在尝试使用Jest测试Vue组件，该组件在Vuex中使用了getter . getter返回一个函数，该函数又返回一个数组：

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

我在我的组件中使用它，如下所示：

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

这似乎在渲染UI方面工作正常，但在尝试测试组件时我得到 Cannot read property 'questions' of undefined

我的测试非常简单，但之前我没有将Jest与Vuex一起使用，所以我可能会误解你将如何测试使用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();
  });
});

我在getter中使用了 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
  }
};
javascript vue.js jestjs vuex

1 回答

  • 0

    在你的问题获取器中，你可以搜索pages数组中可能未知的索引 .

    所以 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 的值但是我没有't know if it' s组件的道具或数据：

    对于数据：

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

    对于道具：

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

相关问题