我正在使用 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 }}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
您正在测试Dashboard组件并尝试检查ATable(
)组件渲染了传递给的槽内容它。这是错误的。 考虑到 ATable 组件,在测试 Dashboard 组件时您应该检查的是 ATable 组件是否刚刚渲染。就是这样。// In Dashboard.spec.js it("renders ATable component.", () => { const ATableStub = { template: '<div>ATableStub</div>' } 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: ` <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>` }, 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"); }); });