这是一个具有切换功能的 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>我希望我说清楚,否则就问!
2 回答

RISEBY
TA贡献1856条经验 获得超5个赞
我的问题似乎是我必须把
await wrapper.vm.$nextTick();
前
expect(wrapper.find(ListDetails).exists()).toBe(true);
在设置响应属性后等到 Vue 执行更新。
https://vue-test-utils.vuejs.org/guides/testing-async-components.html
添加回答
举报
0/150
提交
取消