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

Question

我创建了一个简单的 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)
    })
})

Answer 1

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

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