Test if child component is being conditionally rendered after toggle method

Question

This is a Vue component that has a toggle function, which hides or shows a detail child component for each item in the rendered v-for list from an array.

I would like to test this functionality with Jest. More specifically when the conditions for ListDetails is true:

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

I would like to check if ListDetails is being rendered.

This is what I got so far. I've tried different scenarios bu all if them seem to return 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);
  });

As you can see I've been able to test the toggleMethod with a given index and test if the conditions are true but not if the ListDetails component is being shown or rendered after that.

A sample of my Vue component

<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>

I hope I'm making myself clear, otherwise just ask!

Thanks beforehand, Erik

Answer 1

Your first test returns false because you don't pass any props so errands array is empty.

In the second I don't know what selectedErrand is.

Answer 2

My issue seemed to be that I had to put

await wrapper.vm.$nextTick();

Before

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

To wait until Vue has performed updates after you set a reactive property.

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