TypeError：无法读取 Vue 中未定义的属性“_modulesNamespaceMap”

Posted 2023-02-22

【中文标题】TypeError：无法读取 Vue 中未定义的属性“_modulesNamespaceMap”

【英文标题】：TypeError: Cannot read property '_modulesNamespaceMap' of undefined in Vue

【发布时间】：2021-05-03 21:54:30

【问题描述】：

我创建了一个简单的 web 应用程序，用于使用 Vue Test Utils 和 Jest 练习我在 Vue 中的测试技能，但在使用 Vue 时遇到了一个错误。我只是控制台日志，看看我的 AddDialog 是否在我的主文件中但有一个错误：这是我的错误：

TypeError: 无法读取未定义的属性“_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)
    )
)

【参考方案1】：

因为在 Home 内部使用了 store，但是你没有它渲染。 https://vue-test-utils.vuejs.org/guides/using-with-vuex.html

【参考方案2】：

正如@Raynhour 正确指出的那样，问题在于store 没有被添加到测试中。除了这个响应，我将添加一个示例代码 sn-p，它使用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...
);

【讨论】：

只是指出：诀窍在于“模块”层次结构，以及“namespeaced:true”属性。