无法在空的DOMWrapper上调用text的Vuejs单元测试问题
P粉204136428
P粉204136428 2023-10-31 22:51:57
[Vue.js讨论组]

我正在使用 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: `
          `,
    }
  });
  const patientNameSelector = wrapper.find("#test-patient");
  // see if the message renders
  expect(patientNameSelector.text()).toEqual("arpit satyal");
});

表视图 将表组件重构为它自己的组件。它现在从仪表板组件接收道具。





P粉204136428
P粉204136428

全部回复(1)
P粉697408921

您正在测试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");
  });
});
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号