小编sp0*_*0gg的帖子

对包含带有槽的 Vuetify 数据表的 Vue 组件进行单元测试

我正在尝试使用嵌套组件对一个简单组件进行单元测试v-data-table。该页面在浏览器中正确呈现,但我似乎无法编写有效的 Jest 测试。

问题似乎出在我用于插槽的模板上——我直接从文档中提取了该模板。

当我用属性注释掉模板时v-slot,测试执行得很好。

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
    }
  }
}; …
Run Code Online (Sandbox Code Playgroud)

javascript ecmascript-6 vue.js jestjs vuetify.js

6
推荐指数
1
解决办法
2604
查看次数

标签 统计

ecmascript-6 ×1

javascript ×1

jestjs ×1

vue.js ×1

vuetify.js ×1