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

Posted 2023-02-22

【中文标题】带有 Jest 的 Vuex - 无法读取未定义的属性 <getterName>

【英文标题】：Vuex with Jest - Cannot read property <getterName> of undefined

【发布时间】：2019-02-07 04:28:24

【问题描述】：

我正在尝试使用 Jest 来测试一个在 Vuex 中使用 getter 的 Vue 组件。 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();
  );
);

我假设它与 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
  
;

【问题讨论】：

可以添加store.js的代码吗？

绝对 - 我已经更新了我的问题以包含它

【参考方案1】：

在您的问题获取器中，您在 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的值，但我不知道它是组件的道具还是数据：

对于数据：

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

道具：

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

【讨论】：

啊哈！非常感谢，感谢您的帮助！