我正在嘗試使用嵌套組件對(duì)簡(jiǎn)單組件進(jìn)行單元測(cè)試。頁(yè)面在瀏覽器中正確呈現(xiàn),但我似乎無(wú)法編寫(xiě)有效的Jest測(cè)試。v-data-table問(wèn)題似乎出在我用于插槽的模板上 - 我直接從文檔中提取了它。當(dāng)我用屬性注釋掉模板時(shí),測(cè)試執(zhí)行正常。v-slotPeople.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" } ]); });});錯(cuò)誤信息: 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
單元測(cè)試包含帶有插槽的 Vuetify 數(shù)據(jù)表的 Vue 組件
qq_笑_17
2022-08-04 15:53:12
