TypeError：无法读取未定义的属性“排序”

Question

我正在尝试运行测试，我正在返回 TypeError: Cannot read property 'sort' of undefined

有什么想法吗？

谢谢

测试：

import { cloneDeep } from "lodash";
import Vue from "vue";
import Vuex from "vuex";

import mockStoreModule from "@app/tests/support/mockStoreModule";
import analytics from "@store/modules/analytics";
import { mount } from "@vue/test-utils";

import TopConditionSetPresenter from "@app/components/analytics-new/top-conditions/top-condition-set-presenter.vue";

describe("TopConditionSetPresenter component", () => {
    const campaignsMockStore = mockStoreModule({});
    Vue.use(Vuex);
    const store = new Vuex.Store({
        modules: {
            campaigns: campaignsMockStore,
            analytics: cloneDeep(analytics),
        },
    });
    describe("component rendering", () => {
        it("should mount component without error", () => {
            mount(TopConditionSetPresenter, { store });
        });
    });
});

结构

export interface ImpressionDataTopConditions {
    name: string;
    icon: string;
    conditions: TopConditionsData[];
}

export interface TopConditionsData {
    name: string;
    values: TopConditionValues;
}

export interface TopConditionValues {
    value: string;
    altValue: { [key: string]: number };
    total: number;
    totalDeliveryPercentage: number;
}

开玩笑的测试反应：

 FAIL  
  TopConditionSetPresenter component
    component rendering
      ✕ should mount component without error (16ms)

  ● TopConditionSetPresenter component › component rendering › should mount component without error

    TypeError: Cannot read property 'sort' of undefined

      42 | 
      43 |         get sortedConditions(): TopConditionsData[] {
    > 44 |             return this.conditionSet.conditions.sort(
         | ^
      45 |                 (a, b) =>
      46 |                     (b.values.altValue[this.selectedTopCondition] || b.values.totalDeliveryPercentage) -
      47 |                     (a.values.altValue[this.selectedTopCondition] || a.values.totalDeliveryPercentage)

组件

<template>
    <div class="top-condition-set" data-testid="top-condition-set">
        <p>
            <i class="mr-2 fa" :class="conditionSet.icon" />
            <strong>{{ conditionSet.name }}</strong>
        </p>

        <v-progress-linear
            v-for="(cond, i) in sortedConditions"
            :key="i"
            class="top-condition"
            :color="selectedTopCondition === cond.values.value ? 'pink' : 'blue'"
            height="30"
            :value="cond.values.altValue[selectedTopCondition] || cond.values.totalDeliveryPercentage"
            @click="barClicked(cond.values.value)"
        >
            <span class="condition-stat">
                {{ cond.name }} :
                {{ cond.values.altValue[selectedTopCondition] || cond.values.totalDeliveryPercentage }} %
            </span>
        </v-progress-linear>
    </div>
</template>
<script lang="ts">
    import Vue from "vue";
    import Component from "vue-class-component";
    import { Prop } from "vue-property-decorator";

    import { ImpressionDataTopConditions, TopConditionsData } from "@store/modules/analytics";

    @Component({})
    export default class TopConditionSetPresenter extends Vue {
        @Prop() selectedTopCondition: string;

        @Prop({
            default: () => {
                return {};
            },
            type: Object,
        })
        conditionSet: ImpressionDataTopConditions;

        get sortedConditions(): TopConditionsData[] {
            return this.conditionSet.conditions.sort(
                (a, b) =>
                    (b.values.altValue[this.selectedTopCondition] || b.values.totalDeliveryPercentage) -
                    (a.values.altValue[this.selectedTopCondition] || a.values.totalDeliveryPercentage)
            );
        }

        barClicked(selectedCondition: string): void {
            this.$emit("selected", selectedCondition);
        }
    }
</script>

Answer 1

问题是您没有在测试中使用 props 安装组件，并且 conditionSet 未定义。您需要更改测试上的挂载方法以提供条件集：

mount(TopConditionSetPresenter, { propsData: {
    conditionSet: theConditionSetYouWantToTest,
    selectedTopCondition: the other property from your component
}, store })

在这里查看官方文档https://vue-test-utils.vuejs.org/api/mount.html

Answer 2

先这样定义你的条件

let conditions = this.conditionSet.conditions;
return conditions.sort(
a, b) =>

Answer 3

你不应该在安装组件时在选项中传递一个 propData 吗？ 它使用conditionSet的默认值{}，所以数组条件是未定义的。