Проверьте, отображается ли дочерний компонент условно после метода переключения

Question

Это компонент Vue, имеющий функцию переключения, которая скрывает или показывает детальный компонент детализации для каждого элемента в визуализированном списке v-for из массива.

Я хотел бы проверить это функциональность с Jest. Более конкретно, когда условия для ListDetails выполняются:

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

Я хотел бы проверить, отображается ли ListDetails.

Это то, что я получил до сих пор. Я пробовал разные сценарии ios бу все, если они, кажется, возвращают 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, потому что вы не пропустили ни одного реквизита, поэтому массив поручений пуст.

Во втором я не знаю, что такое 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