TypeError: Cannot read property 'getters' of undefined on Vue Jest Test - unit-testing

Question

This is my test file
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();
});
});
This is my view file
<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>
This is my store module file
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;
This is my base.js module file
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;
And this is my 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',
});
This is the error
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,
I have no idea why I'm getting an error on new Vuex.Store on tests. This application runs normally, without errors on Vuex. I cant even post what I already did to solve this because I'm completely lost