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

【问题标题】：Test if child component is being conditionally rendered after toggle method测试是否在切换方法之后有条件地呈现子组件
【发布时间】：2020-06-28 00:53:29
【问题描述】：

这是一个具有切换功能的 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>

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

先谢谢了，埃里克

【问题讨论】：

标签： javascript vue.js jestjs

【解决方案1】：

我的问题似乎是我不得不把

await wrapper.vm.$nextTick();

之前

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

在设置响应式属性后等到 Vue 执行更新。

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

【讨论】：

【解决方案2】：

您的第一个测试返回 false，因为您没有传递任何道具，因此 errands 数组为空。

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

【讨论】：

哦，是的，所以 selectedErrand 是 currentIndex，我更新了它。所以你说我需要通过 const wrapper = shallowMount(ErrandsListTable, { propsData: { errands: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }] } });或者那些道具会是什么样子？上面的文字似乎不起作用
我想我找到了问题所在。当我触发事件时，我没有等待 dom 更新 await wrapper.vm.$nextTick();期望(wrapper.find(ErrandsListDetails).exists()).toBe(true);