亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在切換方法之后測試子組件是否有條件地呈現

在切換方法之后測試子組件是否有條件地呈現

慕姐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 關注
  • 124 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號