TypeError: Cannot read property '_modulesNamespaceMap' of undefined in Vue

Question

I have a simple webapp created to practice my testing skills in vue using Vue Test Utils and Jest but come up with an error regarding with Vue. I'm just console logging to see if my AddDialog is in my Home file but have an error: This is my error:

TypeError: Cannot read property '_modulesNamespaceMap' of undefined

Here is my testing code.

// Imports
import Home from '@/components/Home'
// Utilities
import {createLocalVue, mount,  } from '@vue/test-utils'
import Vue from 'vue'
import Vuetify from 'vuetify'
import AddDialog from "@/components/AddDialog";

Vue.use(Vuetify)

describe('Home.vue', () => {

    const localVue = createLocalVue()
    let vuetify
    beforeEach(() => {
        vuetify = new Vuetify()
    })
    test('creates a todo', async () => {
        const wrapper = mount(Home)
        console.log(wrapper)
    })
})

Answer 1

Because inside Home using store, but you render without it.https://vue-test-utils.vuejs.org/guides/using-with-vuex.html

Answer 2

As correctly pointed out by @Raynhour, the problem is when store is not being added to the test. In addition to this response, I'll add a sample code snippet, which fixed the TypeError: Cannot read property '_modulesNamespaceMap' of undefined in one of my components using Vuex .

describe("MyComponent.vue", () => {
  let actions: any;
  let getters: any;
  let state: any;
  let store: any;
  let wrapper: any;

  beforeEach(() => {
    actions = {
      sampleAction: jest.fn(),
    };
    getters = {
      sampleGetter: jest.fn(),
    };
    state = {
      sampleState: jest.fn(),
    };

    store = new Vuex.Store({
      modules: {
        requests: {
          namespaced: true,
          actions,
          getters,
          state,
        },
      },
    });
  });

  wrapper = shallowMount(MyComponent, {
    store,
  });

  ... // Some test cases...
});