时间戳

首页 > 解决方案 > 运行测试时，TypeError: Cannot destruct property 'travelDatas' of '(0 , _GetTravelDatas.getTravelDatas)(...)' 因为它是未定义的

jestjs - 运行测试时，TypeError: Cannot destruct property 'travelDatas' of '(0 , _GetTravelDatas.getTravelDatas)(...)' 因为它是未定义的

问题描述

当我运行测试时，它显示TypeError: Cannot destructure property '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 }
}

标签： jestjsvuejs3vue-test-utils

解决方案

您正在GetTravelDatas通过调用以下方式使用自动模拟版本模拟模块：

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

这意味着从该模块导出的所有方法都将被模拟（不会调用该方法的真实代码），并且模拟版本在调用时将返回undefined。

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

const { travelDatas } = getTravelDatas();

从undefined读取travelDatas属性会导致您看到的错误。

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

getTravelDatas.mockReturnValue([]);

推荐阅读