Vue单元测试报错：Cannot call text on empty DOMWrapper及栈溢出问题

错误原因及修复方案 #

1. 第一个错误：Cannot call text on an empty DOMWrapper

原因：使用shallowMount时，只会渲染当前组件，子组件（如Ant Design Vue的a-table）会被替换为空占位符，导致a-table内部的#test-patient元素根本没有渲染出来。

修复：把shallowMount替换为mount，mount会完整渲染所有子组件，包括a-table的内部内容。

2. 第二个错误：RangeError: Maximum call stack size exceeded

原因：测试代码中手动定义了scopedSlots.bodyCell，但ATable组件本身已经实现了该插槽的逻辑，重复定义导致插槽渲染时出现递归调用，引发栈溢出。另外，测试未传递组件要求的deletePatient和markAsSpecial函数props，也可能触发潜在错误。

修复：

• 删除测试代码中的scopedSlots配置，直接使用组件自身的插槽实现。
• 在props中补充deletePatient和markAsSpecial空函数（组件会调用这两个方法）。

修复后的测试代码：

import ATable from "../components/ATable.vue";
import { IPatientResponse } from "@/types/patients";
import { mount, RouterLinkStub } from "@vue/test-utils";

it("renders proper texts.", () => {
  const wrapper = mount(ATable, {
    props: {
      patients: [
        {
          id: 1,
          firstName: "arpit",
          lastName: "satyal",
          email: "arpited7@gmail.com",
          contact: "12345",
          address: "ktm",
          dob: "1998-07-29",
          allergies: ["Pet allergies"],
          specialAttention: false // 补充缺失字段，避免渲染报错
        },
      ] as IPatientResponse[],
      // 补充组件要求的函数props
      deletePatient: () => {},
      markAsSpecial: () => {}
    },
    stubs: {
      RouterLink: RouterLinkStub,
      // 可选：Stub Ant Design图标和分割线，提升测试速度
      EditOutlined: true,
      DeleteOutlined: true,
      EyeOutlined: true,
      EyeInvisibleOutlined: true,
      'a-divider': true
    }
  });
  const patientNameSelector = wrapper.find("#test-patient");
  expect(patientNameSelector.text()).toEqual("arpit satyal");
});

额外注意事项：

• 测试数据补充了specialAttention字段，避免组件渲染时因undefined报错。
• 可以选择性Stub Ant Design的图标和分割线组件，减少渲染负担，加快测试速度。

内容的提问来源于stack exchange，提问作者Arpit