[英]Check Vue component data after method has been triggered with Jest
I'm trying out Jest to write unit tests for some of my components.我正在尝试使用 Jest 为我的一些组件编写单元测试。 What I'm trying to do here is to check if the output of selectedErrand is >= 0 after the toggleExtended method has been triggered.我在这里尝试做的是在触发 toggleExtended 方法后检查 selectedErrand 的输出是否 >= 0。
Error:错误:
Matcher error: received value must be a number
Received has value: undefined
What am I missing here?我在这里缺少什么?
setData to default state of selectedErrands, mock the toggleExtended method and then check to see if the selectedErrands data (state) has changed it's value according to the index of the list that's being rendered in my Vue .将数据设置为 selectedErrands 的默认状态,模拟 toggleExtended 方法,然后检查 selectedErrands 数据(状态)是否根据在我的 Vue 中呈现的列表的索引更改了它的值。
I figured I could do something like this.我想我可以做这样的事情。
Jest笑话
it(“Test”, () => {
wrapper.setData({ selectedErrand: -1 });
wrapper.vm.toggleExpanded();
expect(wrapper.vm.selectedErrand).toBeGreaterThanOrEqual(0);
});
Vue component组件
<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>
I hope this was explained correctly but feel free to ask if you have any further questions.我希望这已被正确解释,但如果您有任何其他问题,请随时提问。
Thanks beforehand, Erik预先感谢,埃里克
Your function toggleExpanded
expects number as param您的函数toggleExpanded
期望 number 作为参数
toggleExpanded: function(index) {
this.selectedErrand = this.selectedErrand === index ? -1 : index;
}
However, you are not passing anything.但是,您没有通过任何东西。 Value of selectedErrand
is -1 initially therefore you end up with -1 === undefined
and end up with undefined
in this.selectedErrand
. selectedErrand
值最初是 -1 因此你最终得到-1 === undefined
并最终在this.selectedErrand
得到undefined
。
You should pass the index when calling toggleExpanded
.您应该在调用toggleExpanded
时传递索引。
wrapper.vm.toggleExpanded(1);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.