在切换方法之后测试子组件是否有条件地呈现

Question

这是一个具有切换功能的 Vue 组件，它隐藏或显示数组中呈现的 v-for 列表中每个项目的详细子组件。

我想用 Jest 测试这个功能。更具体地说，当 ListDetails 的条件为真时：

<ListDetails

   v-if="currentIndex >= 0 && currentIndex === index"

/>

我想检查是否正在呈现 ListDetails。

这是我到目前为止得到的。如果它们似乎返回错误，我已经尝试了不同的场景。

it("check if child is rendered after toggle method", () => {

    const wrapper = shallowMount(ErrandsListTable);

    wrapper.vm.toggleExpanded(1);

    expect(wrapper.find(ListDetails).exists()).toBeTruthy();

    expect(wrapper.vm.currentIndex).toBeGreaterThanOrEqual(0);

    // expect(wrapper.find(<ListDetails />).exists()).toBeTruthy();

    // expect(wrapper.find(ListDetails).exists()).toBeTruthy();

    // expect(wrapper.contains(<ListDetails />)).toBe(true);

    // expect(wrapper.contains(ListDetails)).toBe(true);

    // expect(wrapper.find(<ListDetails />).exists()).toBe(true);

    // expect(wrapper.find(ListDetails).exists()).toBe(true);

  });

如您所见，我已经能够使用给定的索引测试 toggleMethod 并测试条件是否为真，但如果 ListDetails 组件在此之后显示或呈现，则不是。

我的 Vue 组件示例

<template>

    <div

      v-for="(errand, index) in errands"

      :key="index"

    >

      <div

        :data-test="`errand-row-${index}`"

        class="flex-table__row"

        :class="{ 'flex-table__row--closed': index !== currentIndex }"

        @click="toggleExpanded(index)"

      >

      <ListDetails

        v-if="currentIndex >= 0 && currentIndex === index"

      />

    </div>

  </div>

</template>

<script>

import ListDetails from "./ListDetails.vue";

export default {

  components: {

    ListDetails: ListDetails

  },

  props: {

    errands: {

      type: Array,

      default: () => {

        return [];

      }

    },

  },

  data() {

    return {

      currentIndex: -1,

    };

  },

  methods: {

    toggleExpanded: function(index) {

      this.currentIndex = this.currentIndex === index ? -1 : index;

    },

  }

};

</script>

我希望我说清楚，否则就问！

Answer 1

我的问题似乎是我必须把await&nbsp;wrapper.vm.$nextTick();前expect(wrapper.find(ListDetails).exists()).toBe(true);在设置响应属性后等到 Vue 执行更新。https://vue-test-utils.vuejs.org/guides/testing-async-components.html

Answer 2

您的第一个测试返回 false，因为您没有传递任何道具，因此 errands 数组为空。第二个我不知道selectedErrand是什么。