Vue开玩笑：创建的挂钩中出现错误：“ TypeError：无法读取未定义的属性'getters'”

问题描述

任何人都可以帮助我指出这里可能出了什么问题吗？

我正在尝试在测试用例中模拟在组件中使用的吸气剂，但我总是会得到未定义的吸气剂

在这里，我已经将我的组件装载到mount中，并创建了store实例，并将其映射到我的mount函数中。

describe('Get details',() => {
    const mountFunction = options => {
        return mount(Details,{
            localVue,...options
        })
    }
    test('Load weather for default location',() => {
        let getters
        let getLists = []
        let getWDetails = []
        let getSelectedDate = '24/10/2020'


        getters = {
            getLists : () => getLists,getWDetails : () => getWDetails,getSelectedDate: () => getSelectedDate
        }

        let mockStore = new Vuex.Store({
            getters
        })

        const wrapper = mountFunction({
            mockStore
        })

        wrapper.find('form').trigger('submit.prevent')
        expect(something needs to be called).toHaveLength(1)

    })
})

我也导入了必要的类（Vuex，mount ..，）

测试运行中的错误是

 ● Console

    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Error in created hook: "TypeError: Cannot read property 'getters' of undefined"

      found in

      ---> <FlightDetails>
             <Root>
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:1884
      TypeError: Cannot read property 'getters' of undefined
          at VueComponent.mappedGetter (C:\study\my-office\node_modules\vuex\dist\vuex.common.js:1020:75)
          at Watcher.get (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:4465:25)
          at Watcher.evaluate (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:4570:21)
          at VueComponent.computedGetter [as getFlights] (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:4819:17)
          at VueComponent.created (C:\study\my-office\src\components\flightDetails.vue:1172:33)
          at invokeWithErrorHandling (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:1850:57)
          at callHook (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:4207:7)
          at VueComponent.Vue._init (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:4989:5)
          at new VueComponent (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:5134:12)
          at createComponentInstanceForVnode (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:3277:10)
          at init (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:3108:45)
          at createComponent (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:5958:9)
          at createElm (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:5905:9)
          at VueComponent.patch [as __patch__] (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:6455:7)
          at VueComponent.Vue._update (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:3933:19)
          at VueComponent.updateComponent (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:4054:10)
          at Watcher.get (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:4465:25)
          at new Watcher (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:4454:12)
          at mountComponent (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:4061:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (C:\study\my-office\node_modules\vue\dist\vue.runtime.common.dev.js:8392:10)
          at mount (C:\study\my-office\node_modules\@vue\test-utils\dist\vue-test-utils.js:13935:21)
          at mountFunction (C:\study\my-office\tests\unit\flightDetails.spec.js:13:16)
          at Object.<anonymous> (C:\study\my-office\tests\unit\flightDetails.spec.js:35:25)
          at Object.asyncJestTest (C:\study\my-office\node_modules\jest-jasmine2\build\jasmineAsyncInstall.js:102:37)
          at C:\study\my-office\node_modules\jest-jasmine2\build\queueRunner.js:43:12
          at new Promise (<anonymous>)
          at mapper (C:\study\my-office\node_modules\jest-jasmine2\build\queueRunner.js:26:19)
          at C:\study\my-office\node_modules\jest-jasmine2\build\queueRunner.js:73:41
          at processticksAndRejections (internal/process/task_queues.js:93:5)

在我的组件中，除了三个吸气剂（我嘲笑的）之外，什么也没用。

解决方法

您可以尝试使用以下代码，也可以使用shallowMount来测试组件。

describe('Get details',() => {
    const mountFunction = options => {
        return shallowMount(Details,{
            localVue,...options
        })
    }
    test('Load weather for default location',() => {
        const getters = {
            getLists : () => [],getWDetails : () => [],getSelectedDate: () => '24/10/2020'
        }

        let mockStore = new Vuex.Store({
            getters
        })

        const wrapper = mountFunction({
            store: mockStore
        })

        const spyHandlemethods = jest.spyOn(wrapper.vm,'spyHandlemethods')
        wrapper.vm.submitHandler()
        expect(spyHandlemethods).toHaveBeenCalled()

    })
})