用Jest测试模块Vuex Store

问题描述

我是一个玩笑测试vue的初学者。 我要测试下面描述的vuex模块。

bible.mudule.js

export const mutations = {
   setTestament(state,testament) {
     state.testament = testament;
   },setBookList(state,list) {
     state.bookList = list;
   },setCurrentBook(state,book) {
     state.currentBook = book;
   },setCurrentChapterNumber(state,chapter) {
    state.currentChapterNumber = chapter;
   }
 }

export const actions = {
    retrieveBooksByTestament( { commit },testament) {
        BibleService.retrieveBooksByTestament(testament).then(bookList => {
            commit('setBookList',bookList);
         })
    },changeCurrentBook({ commit },book) {
       commit('setCurrentBook',book);
       commit('setCurrentChapterNumber',1);
    },setTestament({ commit },testament) {
       commit('setTestament',testament);
    }
 }

export const bible = {
  namespaced: true,state: {
      testament: null,bookList: null,currentBook: null,currentChapterNumber: null

  },mutations: mutations,actions: actions,}

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate";
import { bible } from "./bible/bible.module";

Vue.use(Vuex)

export default new Vuex.Store({
   modules: {
    bible,},plugins: [createPersistedState()]
});

我正在尝试编写如下测试

import { shallowMount,createLocalVue } from '@vue/test-utils'
import listofBooksScreen from '../../src/views/listofBooksScreen.vue'
import BibleService from '../../src/services/BibleService'
import Vuex from 'vuex'
import bible from '../../src/store/bible/bible.module'

const localVue = createLocalVue()
localVue.use(Vuex)

describe('listofBooksScreen.vue',() => {
  let actions
  let store
  window.prompt = jest.fn();

  beforeEach(() => { 
    actions = {
      retrieveBooksByTestament: jest.fn().mockName('retrieveBooksByTestament'),setTestament: jest.fn()
    }

    store = new Vuex.Store({
      components: {
        bible: {
          actions,namespaced: true
        }
      }
    }) 
  })  

  it('calls store action "retrieveBooksByTestament" when is mounted',async () => {
    const wrapper = shallowMount(listofBooksScreen,{ store,localVue});
    expect(actions.retrieveBooksByTestament).toHaveBeenCalled();
  }) 
})

但我收到关注错误

console.error node_modules/vuex/dist/vuex.common.js:1132
[vuex] module namespace not found in mapState(): bible/

console.error node_modules/vuex/dist/vuex.common.js:1132
[vuex] module namespace not found in mapActions(): bible/

此外，在我的组件中，在挂接的钩子上调用了retrieveBooksByTestament方法，所以我认为

expect(actions.retrieveBooksByTestament).toHaveBeenCalled() 

返回true，但永远不会调用该操作，并且测试失败并显示以下消息

Expected number of calls: >= 1
Received number of calls:    0

关于第一个问题，我知道这是由于与命名空间有关的某些原因，但是我找不到问题所在。我正在查看vuex文档，看来还可以。 关于第二个问题，我真的不知道测试是否进行得很好。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）