运行测试时，TypeError:无法对“(0，_GetTravelDatas.getTravelDatas)(.)”的属性“travelDatas”进行析构因为它是未定义的

Question

当我运行测试时，它会显示TypeError: run destructure属性'travelDatas‘of '(0，_GetTravelDatas.getTravelDatas)(.)’“因为它是未定义的.

如您所见，截图：单元测试

没有任何控制台错误或警告。

有人能帮忙吗？

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

您正在使用自动模拟版本来模拟GetTravelDatas模块，方法是：

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

这意味着从该模块导出的所有方法都将被模拟(方法的真正代码将不会被调用)，而模拟版本在调用时将返回未定义的内容。

在您正在测试的代码中，您有：

const { travelDatas } = getTravelDatas();

从未定义的travelDatas属性中读取将导致所看到的错误。

您应该模拟getTravelDatas方法，以便它返回适当的数据。例如，返回空数组如下所示：

getTravelDatas.mockReturnValue([]);