我正在使用 vue test utils 来测试组件,并在尝试测试文本时收到此错误。无法在空 DOMWrapper 上调用文本。
更新了代码。 在 atable.spec.ts 测试中出现“ RangeError:超出最大调用堆栈大小”。
atable.spec.ts
import ATable from "../components/ATable.vue"; import { IPatientResponse } from "@/types/patients"; import { shallowMount, RouterLinkStub } from "@vue/test-utils"; it("renders proper texts.", () => { const wrapper = shallowMount(ATable, { props: { patients: [ { id: 1, firstName: "arpit", lastName: "satyal", email: "arpited7@gmail.com", contact: "12345", address: "ktm", dob: "1998-07-29", allergies: ["Pet allergies"], }, ] as IPatientResponse[], }, stubs: { RouterLink: RouterLinkStub, }, scopedSlots: { bodyCell: ` <template slot-scope="{ column, record }" v-if="column.key === 'firstName'"> <router-link :to="{ name: 'PatientProfile', params: { id: record.id } }"> <div id="test-patient">{{ record.firstName }} {{ record.lastName }}</div> </router-link> </template>`, } }); const patientNameSelector = wrapper.find("#test-patient"); // see if the message renders expect(patientNameSelector.text()).toEqual("arpit satyal"); });
表视图 将表组件重构为它自己的组件。它现在从仪表板组件接收道具。
<!-- eslint-disable vue/multi-word-component-names --> <template> <section> <a-table :columns="columns" :data-source="patients" :pagination="false"> <template #bodyCell="{ column, record }"> <template v-if="column.key === 'firstName'"> <router-link :to="{ name: 'PatientProfile', params: { id: record.id } }"> <span id="test-patient">{{ record.firstName }} {{ record.lastName }}</span> </router-link> </template> <template v-else-if="column.key === 'specialAttention'"> <span class="pointer"> <EyeOutlined v-if="record.specialAttention" @click="markAsSpecial(record, false)" class="iconStyle" /> <EyeInvisibleOutlined v-else @click="markAsSpecial(record, true)" class="iconStyle" /> </span> </template> <template v-else-if="column.key === 'action'"> <span class="pointer"> <router-link :to="{ name: 'UpdatePatient', params: { id: record.id } }"> <EditOutlined style="margin-right: 10px" class="iconStyle" /> </router-link> <a-divider type="vertical" /> <DeleteOutlined @click="deletePatient(record.id)" class="iconStyle" /> <a-divider type="vertical" /> </span> </template> </template> </a-table> </section> </template> <script lang="ts"> import { EditOutlined, DeleteOutlined, EyeInvisibleOutlined, EyeOutlined, } from "@ant-design/icons-vue"; import { defineComponent } from "@vue/runtime-core"; const columns = [ { title: "Name", dataIndex: "firstName", key: "firstName", align: "center", }, { title: "Contact", dataIndex: "contact", key: "contact", align: "center", }, { title: "Address", dataIndex: "address", key: "address", align: "center", }, { title: "DOB", key: "dob", dataIndex: "dob", align: "center", }, { title: "Special Attention", key: "specialAttention", align: "center", }, { title: "Actions", key: "action", align: "center", }, ]; export default defineComponent({ props: ["deletePatient", "markAsSpecial", "patients"], components: { EditOutlined, DeleteOutlined, EyeInvisibleOutlined, EyeOutlined, }, data() { return { columns, }; }, }); </script>
您正在测试Dashboard组件并尝试检查ATable(
)组件渲染了传递给的槽内容它。这是错误的。 考虑到 ATable 组件,在测试 Dashboard 组件时您应该检查的是 ATable 组件是否刚刚渲染。就是这样。您应该将测试 ATable 的槽内容留给测试 ATable 组件,而不是仪表板 组件。