Модульное тестирование Vue компонента, содержащего таблицу данных Vuetify со слотами - PullRequest
Новая
       23

Модульное тестирование Vue компонента, содержащего таблицу данных Vuetify со слотами

4 голосов
/ 07 мая 2020

Я пытаюсь провести модульное тестирование простого компонента с вложенным v-data-table компонентом. Страница отображается правильно в браузере, но я не могу написать работающий тест Jest.

Проблема, похоже, связана с шаблоном, который я использую для слота, который я снял напрямую документацию.

Когда я закомментирую шаблон с атрибутом v-slot, тест выполняется нормально.

Люди. 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>

Люди. spe c. js: 

import { shallowMount } from "@vue/test-utils";
import People from "@/components/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"
      }
    ]);
  });
});

Сообщение об ошибке: 

  console.error node_modules/vue/dist/vue.runtime.common.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.common.dev.js:1884
    TypeError: Cannot read property 'item' of undefined

1 Ответ

1 голос
/ 21 августа 2020

Я столкнулся с той же проблемой и обнаружил, что если вы заключите v-data-table в div, тест пройдет успешно. По какой-то причине shallowMount не работает в Jest, когда v-data-table является элементом root вашего шаблона.

...