在Vue中出现TypeError: Cannot read property '_modulesNamespaceMap' of undefined

Question

我创建了一个简单的Web应用程序，使用Vue Test Utils和Jest来练习我的测试技能，但出现了与Vue相关的错误。 我只是在控制台记录以查看我的AddDialog是否在我的Home文件中，但是出现了错误：这是我的错误：

类型错误：无法读取未定义的属性'_modulesNamespaceMap'

这是我的测试代码。

// 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)
    })
})

- user13766435

Answer 1

因为在 Home 中使用了 store，但你却没有将其渲染出来。

https://cn.vuejs.org/v2/guide/state-management.html

- Raynhour

Answer 2

正如@Raynhour所指出的那样，问题在于没有将store添加到测试中。除了这个回答，我还会添加一个示例代码片段，它修复了在使用Vuex时我的一个组件中的TypeError: Cannot read property '_modulesNamespaceMap' of undefined。

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

- Daniel Danielecki

---

只是想指出一下：诀窍在于“模块”层次结构，以及“namespaced:true”属性。 - Marcel