无法在空的DOMWrapper上调用text的Vuejs单元测试问题

Question

我正在使用 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>

Answer 1

您正在测试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");
  });
});