測試子組件是否在切換方法后有條件地呈現

Question

這是一個具有切換功能的 Vue 組件，它從數組中隱藏或顯示渲染的 v-for 列表中每個項目的詳細信息子組件。

我想用 Jest 測試這個功能。 更具體地說，當 ListDetails 的條件為真時：

<ListDetails
   v-if="currentIndex >= 0 && currentIndex === index"
/>

我想檢查是否正在呈現 ListDetails。

這是我到目前為止所得到的。 如果它們似乎返回 false，我已經嘗試了不同的場景。

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

您的第一個測試返回 false，因為您沒有傳遞任何道具，因此 errands 數組為空。

第二個我不知道selectedErrand是什么。

Answer 2

我的問題似乎是我必須把

await wrapper.vm.$nextTick();

前

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

在您設置反應性屬性后等待 Vue 執行更新。

https://vue-test-utils.vuejs.org/guides/testing-async-components.html