When run test, TypeError: Cannot destructure property 'travelDatas' of '(0 , _GetTravelDatas.getTravelDatas)(...)' as it is undefined

Question

When I run test, it show TypeError: Cannot destructure property 'travelDatas' of '(0 , _GetTravelDatas.getTravelDatas)(...)' as it is undefined.

As you see the screenshot: unit test

There isn't any console error or warning.

Could anyone help please

travelListTest.spec.js

import { mount, shallowMount } from '@vue/test-utils'
import TravelList from '../../src/components/TravelList.vue'
import { getTravelDatas } from '../../src/composables/GetTravelDatas'
import ElementPlus from 'element-plus'

const wrapper = shallowMount(TravelList, {
  global: {
      plugins: [ElementPlus]
  }
})

jest.mock('../../src/composables/GetTravelDatas')

describe('TravelList Test', () => {
      test('click more will call GoToTravelDetailPage', () => {
        wrapper.vm.GoToTravelDetailPage = jest.fn()
        console.log(wrapper.html())
        wrapper.find('.el-button').trigger('click')
        expect(wrapper.vm.GoToTravelDetailPage).toHaveBeenCalled()
      })
})

TravelList.vue

.....
<script>
import { ref } from '@vue/reactivity';
import { useRouter } from "vue-router";
import { getTravelDatas } from '../composables/GetTravelDatas'
export default {
  name: 'TravelList',
  setup() {
    
    const { travelDatas } = getTravelDatas();
    const router = useRouter();

    function GoToTravelDetailPage(acctractionId) {
      router.push({ path: `/travelDetail/${acctractionId}` })
    }

    
    return { travelDatas, GoToTravelDetailPage };
  },
};
</script>

GetTravelDatas.js

import axios from "axios";
import { ref } from '@vue/runtime-core';

export function getTravelDatas() {
    const travelDatas = ref([])
        axios.get('https://localhost:5001/MyTravel/GetTravelData')
        .then((response) => {
        if (!response.data.success) {
            alert(response.data.errorMessage)
        }else{
            travelDatas.value = response.data.travelDetail
        }
        }).catch((error) => {
        alert('Unexpected Error: ', error.message)
        console.log(error)
        });
    return { travelDatas }
}

Answer 1

You are mocking the GetTravelDatas module with an auto-mock version by calling:

jest.mock('../../src/composables/GetTravelDatas')

That means that all the methods exported from that module will be mocked (the real code of the method will not be called) and the mocked version will return undefined when called.

In the code you are testing you then have:

const { travelDatas } = getTravelDatas();

Reading the travelDatas property from undefined is causing the error you are seeing.

You should mock the getTravelDatas method so that it returns the appropriate data. For example, returning an empty array would look like:

getTravelDatas.mockReturnValue([]);