Блог

Можете ли вы кто-нибудь помочь мне указать, что здесь могло пойти не так?

Я пытаюсь высмеять мои геттеры, используемые в моем компоненте в моих тестовых примерах, но я всегда получаю геттеры неопределенного

Здесь я смонтировал свой компонент в mount и создал экземпляр для store и сопоставил его в своей функции монтирования.

 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:studymy-officenode_modulesvuexdistvuex.common.js:1020:75)
          at Watcher.get (C:studymy-officenode_modulesvuedistvue.runtime.common.dev.js:4465:25)
          at Watcher.evaluate (C:studymy-officenode_modulesvuedistvue.runtime.common.dev.js:4570:21)
          at VueComponent.computedGetter [as getFlights] (C:studymy-officenode_modulesvuedistvue.runtime.common.dev.js:4819:17)
          at VueComponent.created (C:studymy-officesrccomponentsflightDetails.vue:1172:33)
          at invokeWithErrorHandling (C:studymy-officenode_modulesvuedistvue.runtime.common.dev.js:1850:57)
          at callHook (C:studymy-officenode_modulesvuedistvue.runtime.common.dev.js:4207:7)
          at VueComponent.Vue._init (C:studymy-officenode_modulesvuedistvue.runtime.common.dev.js:4989:5)
          at new VueComponent (C:studymy-officenode_modulesvuedistvue.runtime.common.dev.js:5134:12)
          at createComponentInstanceForVnode (C:studymy-officenode_modulesvuedistvue.runtime.common.dev.js:3277:10)
          at init (C:studymy-officenode_modulesvuedistvue.runtime.common.dev.js:3108:45)
          at createComponent (C:studymy-officenode_modulesvuedistvue.runtime.common.dev.js:5958:9)
          at createElm (C:studymy-officenode_modulesvuedistvue.runtime.common.dev.js:5905:9)
          at VueComponent.patch [as __patch__] (C:studymy-officenode_modulesvuedistvue.runtime.common.dev.js:6455:7)
          at VueComponent.Vue._update (C:studymy-officenode_modulesvuedistvue.runtime.common.dev.js:3933:19)
          at VueComponent.updateComponent (C:studymy-officenode_modulesvuedistvue.runtime.common.dev.js:4054:10)
          at Watcher.get (C:studymy-officenode_modulesvuedistvue.runtime.common.dev.js:4465:25)
          at new Watcher (C:studymy-officenode_modulesvuedistvue.runtime.common.dev.js:4454:12)
          at mountComponent (C:studymy-officenode_modulesvuedistvue.runtime.common.dev.js:4061:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (C:studymy-officenode_modulesvuedistvue.runtime.common.dev.js:8392:10)
          at mount (C:studymy-officenode_modules@vuetest-utilsdistvue-test-utils.js:13935:21)
          at mountFunction (C:studymy-officetestsunitflightDetails.spec.js:13:16)
          at Object.<anonymous> (C:studymy-officetestsunitflightDetails.spec.js:35:25)
          at Object.asyncJestTest (C:studymy-officenode_modulesjest-jasmine2buildjasmineAsyncInstall.js:102:37)
          at C:studymy-officenode_modulesjest-jasmine2buildqueueRunner.js:43:12
          at new Promise (<anonymous>)
          at mapper (C:studymy-officenode_modulesjest-jasmine2buildqueueRunner.js:26:19)
          at C:studymy-officenode_modulesjest-jasmine2buildqueueRunner.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()

    })
})