无法使用jest获取vue.js中的vuex存储getters数据

问题描述

我正在尝试使用玩笑来测试vuex存储的getters方法。但是结果变得不确定。 下面是我正在使用的代码

storeConfigurations.ts
---------------------
const state = {
    update: false
}

const getters = {

  [types.GET_UPDATE_VALUE]: (state: { update: any }) => {
        return state.update;
    }

}

types.ts
--------
export const GET_UPDATE_VALUE = 'GET/update'

试图在updatedValue()方法中测试store getters方法,并得到未定义的结果。

update.vue
===========

  <div class="updateCss">
      <customList :items="updatedValue"></customList>
    </div>
    
export default class UpdateTest extends Vue {

get updatedValue() {
        
const updatedValue = this.$store.getters[
      types.GET_UPDATE_VALUE
    ];      
}


update.spec.ts
==============

import Vuex from 'vuex' 
import storeConfigurations from '@/store/modules/storeDetails'
const localVue = createLocalVue()
localVue.use(Vuex)

 describe('Update Component TestSuite',() => {
 
 beforeEach(() => {
    let store
    let updateWrapper
     store = new Vuex.Store({
      modules: {
        storeConfigurations: {
          state: { update:false},getters: {
            updatedValue: jest.fn()
            
         }
      }
      }
    })

     updateWrapper = shallowMount(UpdateTest,{
      store,localVue
        
 }

在这里,我试图从存储中获取更新的值,但是在模拟存储时却无法定义。

解决方法

通过在模块内部为getter提供状态变量来解决问题。