我正在尝试使用嵌套的 v-data-table
对简单组件进行单元测试零件。该页面在浏览器中正确呈现,但我似乎无法编写一个有效的 Jest 测试。
问题似乎与我用于插槽的模板有关——我直接从文档中提取了该模板。
当我用 v-slot
注释掉模板时属性,测试执行良好。
人.vue:
<template>
<v-data-table
:headers="headers"
:items="people"
disable-pagination
disable-sort
disable-filtering
hide-default-footer
:loading="!people"
>
<template v-slot:item.id="{ item }">
<v-icon>
mdi-link-variant
</v-icon>
<router-link
:to="{ name: 'assignments', query: { assignee_id: item.id } }"
>Link</router-link
>
</template>
</v-data-table>
</template>
<script>
export default {
name: "People",
data: () => ({
headers: [
{
text: "Name",
value: "first_name"
},
{
text: "Assignment link",
value: "id"
}
]
}),
props: {
people: {
type: Array,
required: true
}
}
};
</script>
People.spec.js:
import { shallowMount } from "@vue/test-utils";
import People from "@/components/People.vue";
function getMountedComponent(Component, propsData) {
return shallowMount(Component, { propsData });
}
const propsData = {
people: [{ id: 1 }]
};
describe("headers", () => {
it("contains name and assignment", () => {
expect(getMountedComponent(People, propsData).vm.headers).toEqual([
{
text: "Name",
value: "first_name"
},
{
text: "Assignment link",
value: "id"
}
]);
});
});
错误信息:
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Error in render: "TypeError: Cannot read property 'item' of undefined"
found in
---> <VDataTable>
<People>
<Root>
console.error node_modules/vue/dist/vue.runtime.common.dev.js:1884
TypeError: Cannot read property 'item' of undefined
最佳答案
我遇到了同样的问题,发现如果你包装 v-data-table
在 div
,测试成功。出于某种原因shallowMount
当 v-data-table
时在 Jest 中失败是模板的根元素。
关于javascript - 单元测试包含带有插槽的 Vuetify 数据表的 Vue 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61647512/