为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕姐8265434 2022-05-22 10:10:47
这是一个具有切换功能的 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


查看完整回答
反对 回复 2022-05-22
?
慕斯王

TA贡献1864条经验 获得超2个赞

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

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


查看完整回答
反对 回复 2022-05-22
  • 2 回答
  • 0 关注
  • 92 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号