无法使用 Jest 在我的单元测试中渲染 Vue 组件
2020-02-28
1224
我尝试使用 Jest 在我的 Vue 单元测试中渲染一个组件，但似乎无法让它工作。
日志显示：
TypeError：无法读取 null 的属性“length”
我尝试过其他组件，它工作正常。
ErrandsListTable.vue
<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 "-";
}
},
errandsCounter: {
type: Object,
default: () => {
return null;
}
},
errands: {
type: Array,
default: () => {
return null;
}
},
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>
另外请忽略这个组件尚未完成的事实，并且可能不一定涉及单元测试最相关的用例。我只是好奇为什么这个特定的组件不能在我的测试中作为 Vue 实例加载？
import { shallowMount } from "@vue/test-utils";
import ErrandsListTable from "../ErrandsListTable.vue";
let wrapper;
describe("Errandslist table", () => {
beforeEach(() => {
wrapper = shallowMount(ErrandsListTable);
});
afterEach(() => {
wrapper.destroy();
});
it("is a Vue instance", () => {
expect(wrapper.isVueInstance).toBeTruthy();
});
});
有人遇到过同样的问题吗？如果有，有人可以向我解释你是如何解决的吗？
2个回答
在您的模板中，您的
errands
数组为空，因此您无法访问 length 属性。您必须在组件中处理这种情况，或者必须将此属性传递给组件。
设置默认值
errands: {
type: Array,
default: () => {
return [];
}
}
在测试期间传递默认值
const wrapper = shallowMount(ErrandsListTable, {
propsData: {
errands: []
}
})
expect(wrapper.props().errands.length).toBe(0)
oshell
2020-02-28
errands
属性的默认值为
null
。由于您在没有任何属性的情况下安装组件，因此默认值
null
生效。您的模板包含
errands.length
，这会导致您观察到的错误。
要解决此错误，您可以使用数组安装组件，用于
errands
prop
:
wrapper = shallowMount(ErrandsListTable, {
propsData: {
errands: []
}
});
...或将默认值从
null
更改为空数组：
export default {
props: {
errands: {
type: Array,
default: () => []
}
}
}
...或向模板添加条件（即
v-if="errands"
），以便仅在为真时取消引用：
<div v-if="errands && errands.length >= numberOfErrandsLoaded">
^^^^^^^^^^
最后一个解决方案是
防御性编程
可以防止用户传递
null
/
undefined
属性，从而导致您遇到的相同错误。
tony19
2020-02-28