Javascript 带有Jest的Vuex-无法读取属性<;getterName>;未定义的
我正在尝试使用Jest测试一个Vue组件,该组件在Vuex中使用getter。getter返回一个函数,该函数反过来返回一个数组:Javascript 带有Jest的Vuex-无法读取属性<;getterName>;未定义的,javascript,vue.js,jestjs,vuex,Javascript,Vue.js,Jestjs,Vuex,我正在尝试使用Jest测试一个Vue组件,该组件在Vuex中使用getter。getter返回一个函数,该函数反过来返回一个数组: questions: state => pageNumber => state.pages[pageNumber].questions 我在我的组件中使用它,如下所示: computed: { inputs() { return this.$store.getters.questions(this.pageNumber); }, },
questions: state => pageNumber => state.pages[pageNumber].questions
我在我的组件中使用它,如下所示:
computed: {
inputs() {
return this.$store.getters.questions(this.pageNumber);
},
},
这在呈现UI方面似乎很好,但在尝试测试组件时,我得到的无法读取未定义的属性“问题”
我的测试非常简单,但我以前没有在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中的页面[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
}
};
在您的问题获取程序中,您可以在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
}
道具:
mount(SurveyQuestionBuilder, {
store,
localVue,
propsData: { pageNumber: 0 }
})
你可以添加
store.js
的代码吗?当然可以-我已经更新了我的问题,将itAha包括在内!非常感谢你的帮助!
mount(SurveyQuestionBuilder, {
store,
localVue,
propsData: { pageNumber: 0 }
})