TypeError：无法读取Vue Jest Test上未定义的属性“ getters”

Question

这是我的测试文件

import { shallowMount, createLocalVue } from '@vue/test-utils';
import Home from '@/views/Home.vue';
import Vuex from 'vuex';
import Vuetify from 'vuetify';
import movies from '@/store/modules/movies';

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

describe('Home.vue', () => {
  let vuetify;
  let store;
  let state;
  let actions;
  beforeEach(() => {
    state = {
      movieList: [],
      movieDetails: {},
    };
    actions = {
      getMovieList: jest.fn(),
      getMovieDetails: jest.fn(),
    };
    store = new Vuex.Store({
      modules: {
        movies: {
          namespaced: true,
          state,
          actions,
        },
      },
    });
    vuetify = new Vuetify();
  });
  const wrapper = shallowMount(Home, {
    store,
    vuetify,
    localVue,
  });
  it('should call submitForm() function when button is clicked', () => {
    wrapper.find('button').trigger('click');
    expect(wrapper.vm.submitForm).toHaveBeenCalled();
  });
});

这是我的查看文件

<script>
import Tooltip from '@/components/Tooltip.vue';
import { moviesComputed, moviesMethods } from '@/store/helpers/movies';

export default {
  components: {
    Tooltip,
  },
  methods: {
    ...moviesMethods,
    submitForm() {
      const validate = this.$refs.form.validate();
      if (!validate) return;
      this.currentPage = 1;
      this.getMoviesList({ s: this.searchQuery });
    },
    async goToDetails(moveId) {
      this.$router.push({ name: 'MovieDetails', params: { id: moveId } });
    },
    onScroll() {
      const isOnBottom = document.documentElement.scrollTop + window.innerHeight
        === document.documentElement.offsetHeight;
      if (isOnBottom) {
        this.currentPage += 1;
        this.nextMoviePage({ s: this.searchQuery, page: this.currentPage });
      }
    },
  },
  computed: {
    ...moviesComputed,
    pagedMovieList() {
      const listNumber = this.maxList * this.currentPage;
      const list = this.movieList.filter((movie, index) => index < listNumber);
      return list;
    },
  },
  data() {
    return {
      searchQuery: '',
      queryRules: [(v) => !!v || 'Antes de pesquisar, forneça um nome'],
      mouseOverIndex: '',
      maxList: 6,
      currentPage: 1,
    };
  },
  async mounted() {
    document.addEventListener('scroll', this.onScroll);
  },
  beforeDestroy() {
    document.removeEventListener('scroll', this.onScroll);
  },
};
</script>

<template>
  <div id="home">
    <v-row class="justify-center align-center">
      <v-col class="home-form" :class="{ 'to-top': movieList.length }" sm="12" md="6" xl="4">
        <v-form ref="form" color="secondary" @submit="submitForm">
          <v-text-field
            label="Digite sua busca"
            append-icon="mdi-magnify"
            :rules="queryRules"
            v-model="searchQuery"
            required
          />
        </v-form>
        <v-btn color="secondary" class="mt-1" @click="submitForm">Enviar</v-btn>
      </v-col>
    </v-row>
    <v-row class="mt-5">
      <v-col
        cols="12"
        sm="6"
        md="4"
        v-for="(movie, index) in pagedMovieList"
        :key="`${movie.Title}-${index}`"
        style="position: relative"
      >
        <v-card elevation="10" @mouseover="mouseOverIndex = index" @mouseout="mouseOverIndex = ''">
          <p class="mt-1 text-center" v-if="movie.Poster === 'N/A'">{{ movie.Title }}</p>
          <v-img v-if="movie.Poster !== 'N/A'" :src="movie.Poster" />
          <v-img v-else src="@/assets/not-found.png" />
          <Tooltip @clicked="goToDetails" :active="index === mouseOverIndex" :movie="movie" />
        </v-card>
      </v-col>
    </v-row>
  </div>
</template>

这是我的商店模块文件

import { GetList, GetDetails } from '@/services/movies';

export const state = {
  movieList: [],
  movieDetails: {},
};

export const mutations = {
  SET_LIST(state, newList) {
    state.movieList = newList;
  },
  SET_MOVIE_DETAILS(state, newValue) {
    state.movieDetails = newValue;
  },
  ADD_TO_LIST(state, list) {
    state.movieList.push(...list);
  },
};

export const actions = {
  async getMoviesList({ commit }, query) {
    const resp = await GetList(query);
    if (resp.status === 200) commit('SET_LIST', resp.data.Search);
  },
  async getMovieDetails({ commit }, movieId) {
    const resp = await GetDetails({ i: movieId });
    if (!resp.status === 200) return;
    commit('SET_MOVIE_DETAILS', resp.data);
  },
  async nextMoviePage({ commit }, query) {
    const resp = await GetList(query);
    if (resp.status === 200 && resp.data.Search) commit('ADD_TO_LIST', resp.data.Search);
  },
};

const movies = {
  namespaced: true,
  mutations,
  state,
  actions,
};
export default movies;

这是我的base.js模块文件

export const state = {
  isLoading: false,
};

export const mutations = {
  SET_LOADING(state, newValue) {
    state.isLoading = newValue;
  },
};

export const actions = {
  setLoading({ commit }, value) {
    commit('SET_LOADING', value);
  },
};

const base = {
  namespaced: true,
  mutations,
  state,
  actions,
};
export default base;

这是我的store.js

import Vue from 'vue';
import Vuex from 'vuex';

// Modules
import Base from './modules/base';
import Movies from './modules/movies';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    base: Base,
    movies: Movies,
  },
  strict: process.env.NODE_ENV !== 'production',
});

这是错误

TypeError: Cannot read property 'getters' of undefined

       8 | Vue.use(Vuex);
       9 | 
    > 10 | export default new Vuex.Store({
         |                ^
      11 |   modules: {
      12 |     base: Base,
      13 |     movies: Movies,

我不知道为什么在测试的新Vuex.Store上出现错误。该应用程序正常运行，在Vuex上没有错误。我什至不能发布已经解决该问题的方法，因为我完全迷路了