[英]Check Vue component data after method has been triggered with Jest
我正在尝试使用 Jest 为我的一些组件编写单元测试。 我在这里尝试做的是在触发 toggleExtended 方法后检查 selectedErrand 的输出是否 >= 0。
错误:
Matcher error: received value must be a number
Received has value: undefined
我在这里缺少什么?
将数据设置为 selectedErrands 的默认状态,模拟 toggleExtended 方法,然后检查 selectedErrands 数据(状态)是否根据在我的 Vue 中呈现的列表的索引更改了它的值。
我想我可以做这样的事情。
笑话
it(“Test”, () => {
wrapper.setData({ selectedErrand: -1 });
wrapper.vm.toggleExpanded();
expect(wrapper.vm.selectedErrand).toBeGreaterThanOrEqual(0);
});
组件
<template>
<div
v-if="!error"
class="flex-table flex-table--white-background flex-table--green-header flex-table--with-dropdown"
:class="{ loading: loading }"
>
<div class="flex-table__row flex-table--header text--level-6">
<div class="flex-table__cell flex-table__cell--width-3">
{{ statusHeader }}
</div>
<div class="flex-table__cell flex-table__cell--width-3">
{{ idHeader }}
</div>
<div class="flex-table__cell flex-table__cell--width-7">
{{ descriptionHeader }}
</div>
<div class="flex-table__cell flex-table__cell--width-5">
{{ typeHeader }}
</div>
<div class="flex-table__cell flex-table__cell--width-3">
{{ dateOpenedHeader }}
</div>
<div class="flex-table__cell flex-table__cell--width-3">
{{ dateClosedHeader }}
</div>
<div class="flex-table__cell flex-table__cell--width-1" />
</div>
<div
v-for="(errand, index) in sliceArray(errands)"
:key="!errand.id ? index : errand.id"
>
<div
class="flex-table__row"
:class="{ 'flex-table__row--closed': index !== selectedErrand }"
@click="toggleExpanded(index)"
>
<div class="flex-table__cell flex-table__cell--width-3">
{{ errand.status }}
</div>
<div class="flex-table__cell flex-table__cell--width-3">
{{ errand.id }}
</div>
<div
class="flex-table__cell flex-table__cell--width-7 flex-table__cell--show-on-mobile"
:data-header="descriptionHeader"
>
{{ errand.description }}
</div>
<div class="flex-table__cell flex-table__cell--width-5">
{{ errand.type }}
</div>
<div
class="flex-table__cell flex-table__cell--width-3 flex-table__cell--show-on-mobile"
:data-header="dateOpenedHeader"
>
{{ errand.orderDate }}
</div>
<div class="flex-table__cell flex-table__cell--width-3">
{{ errand.deliveryDate }}
</div>
<div
class="flex-table__cell flex-table__cell--width-1 flex-table__cell--dropdown-show-on-mobile"
>
<i
class="icon-angle__small"
:class="{ 'icon-angle__small--down': selectedErrand === index }"
/>
</div>
</div>
<ErrandsListDetails
v-if="selectedErrand >= 0 && selectedErrand === index"
:errand="errand"
v-bind="$props"
/>
</div>
<div
v-if="errands.length >= numberOfErrandsLoaded"
class="flex-table--load-more text--level-5"
>
<a href="#" @click="loadMore">
{{ showMoreText }}
<i class="icon-down" />
</a>
</div>
<div
v-if="errands.length < 1 && !loading"
class="flex-table--error text--level-5"
>
{{ noCasesText }}
</div>
<div v-if="error && !loading" class="flex-table--error text--level-5">
{{ errorText }}
</div>
</div>
</template>
<script>
import _ from "lodash";
import ErrandsListDetails from "./ErrandsListDetails.vue";
export default {
components: {
ErrandsListDetails: ErrandsListDetails
},
props: {
componentTitle: {
type: String,
default: () => {
return "";
}
},
showMoreText: {
type: String,
default: "Visa fler ärenden"
},
statusHeader: {
type: String,
default: () => {
return "Status";
}
},
dateOpenedHeader: {
type: String,
default: () => {
return "Beställt/Anmält";
}
},
dateClosedHeader: {
type: String,
default: () => {
return "Beräknad klar";
}
},
idHeader: {
type: String,
default: () => {
return "Ärendenummer";
}
},
descriptionHeader: {
type: String,
default: () => {
return "Beskrivning";
}
},
typeHeader: {
type: String,
default: () => {
return "Typ";
}
},
fileDetails: {
type: String,
default: () => {
return "Ladda ned beställningen som PDF:";
}
},
commentsDetails: {
type: String,
default: () => {
return "Noteringar";
}
},
wordList: {
type: String,
default: () => {
return "";
}
},
attachment: {
type: String,
default: () => {
return "";
}
},
noCasesText: {
type: String,
default: () => {
return "Det finns inget att visa";
}
},
errorText: {
type: String,
default: () => {
return "Något gick fel";
}
},
createdOnFallback: {
type: String,
default: () => {
return "-";
}
},
closedOnFallback: {
type: String,
default: () => {
return "-";
}
},
errands: {
type: Array,
default: () => {
return [];
}
},
loading: {
type: Boolean,
default: () => {
return false;
}
}
},
data() {
return {
selectedErrand: -1,
error: undefined,
numberOfErrandsLoaded: 10
};
},
methods: {
toggleExpanded: function(index) {
this.selectedErrand = this.selectedErrand === index ? -1 : index;
},
loadMore: function(event) {
event.preventDefault();
this.numberOfErrandsLoaded += 10;
},
sliceArray: function(array) {
let val = _.orderBy(array, "orderDate", "desc");
return val.slice(0, this.numberOfErrandsLoaded);
}
}
};
</script>
我希望这已被正确解释,但如果您有任何其他问题,请随时提问。
预先感谢,埃里克
您的函数toggleExpanded
期望 number 作为参数
toggleExpanded: function(index) {
this.selectedErrand = this.selectedErrand === index ? -1 : index;
}
但是,您没有通过任何东西。 selectedErrand
值最初是 -1 因此你最终得到-1 === undefined
并最终在this.selectedErrand
得到undefined
。
您应该在调用toggleExpanded
时传递索引。
wrapper.vm.toggleExpanded(1);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.