我正在使用 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: ` {{ record.firstName }} {{ record.lastName }} `, } }); const patientNameSelector = wrapper.find("#test-patient"); // see if the message renders expect(patientNameSelector.text()).toEqual("arpit satyal"); });
表视图 将表组件重构为它自己的组件。它现在从仪表板组件接收道具。
{{ record.firstName }} {{ record.lastName }}
您正在测试Dashboard组件并尝试检查ATable（
// In Dashboard.spec.js it("renders ATable component.", () => { const ATableStub = { template: 'ATableStub ' } const wrapper = shallowMount(Dashboard, { stubs: { ATable: ATableStub }, data() { return { patients: [ { id: 1, firstName: "arpit", lastName: "satyal", email: "arpited7@gmail.com", contact: "12345", address: "ktm", dob: "1998-07-29", allergies: ["Pet allergies"], }, ] as IPatientResponse[], }; }, }); wrapper.findComponent(ATableStub).exists.toBe(true); }); });您应该将测试ATable的槽内容留给测试ATable组件，而不是仪表板组件。
// In ATable.spec.js import { shallowMount, RouterLinkStub } from '@vue/test-utils' it("renders proper texts.", () => { const wrapper = shallowMount(ATable, { stubs: { RouterLink: RouterLinkStub }, scopedSlots: { bodyCell: ` {{ record.firstName }} {{ record.lastName }} ` }, data() { return { patients: [ { id: 1, firstName: "arpit", lastName: "satyal", email: "arpited7@gmail.com", contact: "12345", address: "ktm", dob: "1998-07-29", allergies: ["Pet allergies"], }, ] as IPatientResponse[], }; }, }); const patientNameSelector = wrapper.find("#test-patient"); // see if the message renders expect(patientNameSelector.text()).toEqual("arpit satyal"); }); });