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

Admin 1
Viewed 7254

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)
    })
})
vue-test-utils vuejs2 vue.js jestjs javascript
2 Answers
user_128627080

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...
});
user_111273830
Related