vue.js - 使用 Vuetify v-rating 模块测试组件时，“TypeError：无法读取未定义的属性‘isFilled’”

Question

我使用 vuetify 的 v-rating 模块为我的组件编写快照测试，但测试返回错误：“TypeError：无法读取未定义的属性 'isFilled'”。

属性“isFilled”是 vuetify 组件的标志，在组件的插槽中使用，我无法找到修复此错误的决定。

我的组件：

<template>
  <v-rating
    dense
    half-increments
    readonly
    size="35"
  >
    <template v-slot:item="props">
      <template v-if="props.isFilled">
        <v-img :src="fullStar" class="mr-1" />
      </template>
      <template v-else-if="props.isHalfFilled">
        <v-img :src="halfStar" class="mr-1" />
      </template>
      <template v-else>
        <v-img :src="emptyStar" />
      </template>
    </template>
  </v-rating>
</template>

<script>
export default {
  name: 'MyRatingComponent',
  data() {
    return {
      fullStar: require('@/assets/full-star.img'),
      halfStar: require('@/assets/half-star.img'),
      emptyStar: require('@/assets/empty-star.img'),
    };
  },
};
</script>

我的测试：

import Vue from 'vue';
import Vuetify from 'vuetify';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import MyRatingComponentfrom '../MyRatingComponent';

const localVue = createLocalVue();

describe('MyRatingComponent', () => {
  let vuetify;
  beforeEach(() => {
    vuetify = new Vuetify({});
    Vue.use(Vuetify);
  });

  it('should render correctly', () => {
    const wrapper = shallowMount(MyRatingComponent, {
      localVue,
      vuetify,
    });
    expect(wrapper).toMatchSnapshot();
  });
});

我尝试为测试添加值为“isFilled”的计算属性，但没有帮助。我查看了 vutify 文档和 vue test utils 文档以找到决定，但他们没有写我如何模拟这个属性。

如何在不使用评级更改组件中的代码的情况下解决此问题？

标签： vue.jsunit-testingvuetify.js