Vue jest: Error in created hook: "TypeError: Cannot read property 'getters' of undefined"

Question

谁能帮我指出这里可能出了什么问题？

我试图在我的测试用例中模拟我的组件中使用的 getter，但我总是得到 未定义的 getter

这里我已经将我的组件挂载到 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)

在我的组件中，除了三个 getter（我嘲笑的）之外没有任何用处。

Answer 1

你可以试试下面的代码，你可以使用 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()

    })
})

Vue jest: Error in created hook: "TypeError: Cannot read property 'getters' of undefined"

Vue jest: Error in created hook: "TypeError: Cannot read property 'getters' of undefined"

vue.js

vue-component

vuex

vue-test-utils