javascript - Unit testing a Vue component containing a Vuetify data table with slots - Stack Overflow

admin管理员组

文章数量:1431699

I'm trying to unit test a simple ponent with a nested v-data-table ponent. The page renders properly in the browser, but I can't seem to write a Jest test that works.

The issue seems to be with the template I'm using for the slot -- which I pulled directly off the documentation.

When I ment out the template with the v-slot attribute, the test executes fine.

People.vue:

<template>
  <v-data-table
    :headers="headers"
    :items="people"
    disable-pagination
    disable-sort
    disable-filtering
    hide-default-footer
    :loading="!people"
  >
    <template v-slot:item.id="{ item }">
      <v-icon>
        mdi-link-variant
      </v-icon>
      <router-link
        :to="{ name: 'assignments', query: { assignee_id: item.id } }"
        >Link</router-link
      >
    </template>
  </v-data-table>
</template>

<script>
export default {
  name: "People",
  data: () => ({
    headers: [
      {
        text: "Name",
        value: "first_name"
      },
      {
        text: "Assignment link",
        value: "id"
      }
    ]
  }),
  props: {
    people: {
      type: Array,
      required: true
    }
  }
};
</script>

People.spec.js:

import { shallowMount } from "@vue/test-utils";
import People from "@/ponents/People.vue";

function getMountedComponent(Component, propsData) {
  return shallowMount(Component, { propsData });
}

const propsData = {
  people: [{ id: 1 }]
};
describe("headers", () => {
  it("contains name and assignment", () => {
    expect(getMountedComponent(People, propsData).vm.headers).toEqual([
      {
        text: "Name",
        value: "first_name"
      },
      {
        text: "Assignment link",
        value: "id"
      }
    ]);
  });
});

Error message:

  console.error node_modules/vue/dist/vue.runtimemon.dev.js:621
    [Vue warn]: Error in render: "TypeError: Cannot read property 'item' of undefined"

    found in

    ---> <VDataTable>
           <People>
             <Root>

  console.error node_modules/vue/dist/vue.runtimemon.dev.js:1884
    TypeError: Cannot read property 'item' of undefined

I'm trying to unit test a simple ponent with a nested v-data-table ponent. The page renders properly in the browser, but I can't seem to write a Jest test that works.

The issue seems to be with the template I'm using for the slot -- which I pulled directly off the documentation.

When I ment out the template with the v-slot attribute, the test executes fine.

People.vue:

<template>
  <v-data-table
    :headers="headers"
    :items="people"
    disable-pagination
    disable-sort
    disable-filtering
    hide-default-footer
    :loading="!people"
  >
    <template v-slot:item.id="{ item }">
      <v-icon>
        mdi-link-variant
      </v-icon>
      <router-link
        :to="{ name: 'assignments', query: { assignee_id: item.id } }"
        >Link</router-link
      >
    </template>
  </v-data-table>
</template>

<script>
export default {
  name: "People",
  data: () => ({
    headers: [
      {
        text: "Name",
        value: "first_name"
      },
      {
        text: "Assignment link",
        value: "id"
      }
    ]
  }),
  props: {
    people: {
      type: Array,
      required: true
    }
  }
};
</script>

People.spec.js:

import { shallowMount } from "@vue/test-utils";
import People from "@/ponents/People.vue";

function getMountedComponent(Component, propsData) {
  return shallowMount(Component, { propsData });
}

const propsData = {
  people: [{ id: 1 }]
};
describe("headers", () => {
  it("contains name and assignment", () => {
    expect(getMountedComponent(People, propsData).vm.headers).toEqual([
      {
        text: "Name",
        value: "first_name"
      },
      {
        text: "Assignment link",
        value: "id"
      }
    ]);
  });
});

Error message:

  console.error node_modules/vue/dist/vue.runtime.mon.dev.js:621
    [Vue warn]: Error in render: "TypeError: Cannot read property 'item' of undefined"

    found in

    ---> <VDataTable>
           <People>
             <Root>

  console.error node_modules/vue/dist/vue.runtime.mon.dev.js:1884
    TypeError: Cannot read property 'item' of undefined

• javascript
• vue.js
• ecmascript-6
• jestjs
• vuetify.js

Share Improve this question Follow edited May 9, 2020 at 10:42 skyboyer 23.8k77 gold badges6262 silver badges7171 bronze badges asked May 6, 2020 at 23:59 sp0ggsp0gg 4,15211 gold badge2020 silver badges2121 bronze badges 4

• did you ever find a solution for this? – Maurice Commented Jul 16, 2020 at 21:00
• Having the exact same problem. Did you find a solution? – Culda-Daisa Andrei Commented Jul 29, 2020 at 13:21
• 1 No solution. Someone from the Vuetify Discord suggested using mount over shallowMount which, to me, defeats the purpose. – sp0gg Commented Jul 29, 2020 at 16:50
• See answer from Ryan King bellow. That worked for me. – Culda-Daisa Andrei Commented Mar 6, 2021 at 6:46

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I ran into this same issue and found that if you wrap the v-data-table in a div, the test succeeds. For some reason shallowMount fails in Jest when the v-data-table is the root element of your template.

本文标签： javascriptUnit testing a Vue component containing a Vuetify data table with slotsStack Overflow