這是一個具有切換功能的 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>我希望我說清楚,否則就問!
在切換方法之后測試子組件是否有條件地呈現
慕姐8265434
2022-05-22 10:10:47