javascript - 在切换方法之后测试子组件是否有条件地呈现
问题描述
这是一个具有切换功能的 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>
我希望我说清楚,否则就问!
预先感谢,埃里克
解决方案
我的问题似乎是我必须把
await wrapper.vm.$nextTick();
前
expect(wrapper.find(ListDetails).exists()).toBe(true);
在设置响应属性后等到 Vue 执行更新。
https://vue-test-utils.vuejs.org/guides/testing-async-components.html
推荐阅读
- java - 是否可以在java中创建一个“类对象”类?
- python - Tkinter 在鼠标右键和左键单击时按钮不同的命令
- css - 复选框表 - 相等的列宽
- java - 在Java中为对象赋值
- uml - 哪种班级结构最适合设置?
- kotlin - 如何使用 Kotlin 协程执行类似 cron 的调度?
- reactjs - 如何在 reactjs 中实现对 HighChart StockChart 的日期选择器(没有 jQuery)
- r - UseMethod(“predict”)中的错误:没有适用于“predict”的适用方法应用于“NULL”类的对象
- java - 如何让 Spring @ControllerAdvice 与其他自定义 Spring @Aspect 一起工作?
- python - Dataframe - 如何在不使用 for 循环的情况下运行计算?