Vue 2:如何使用Chart.js (vue-图表-3)的单元测试组件

Question

我有一个vue2项目，它使用ClassComponents和Chart.js (通过vue-图表-3)。现在我有了一个简单的组件，它封装了一个DoughnutChart来管理数据和其他东西。

DBOverviewDoughnut.vue

<template>
  <div>
    <p>test</p>
    <DoughnutChart ref="doughnutRef" :chartData="sharesData"></DoughnutChart>
  </div>
</template>

<script lang="ts">
import Component from 'vue-class-component';
import Vue from 'vue';
import { DoughnutChart, ExtractComponentData } from 'vue-chart-3';
import { Prop, Ref } from 'vue-property-decorator';
import { ChartData } from 'chart.js';

@Component({ components: { DoughnutChart } })
export default class DBOverviewDoughnut extends Vue {
  @Prop()
  private sharesData!: ChartData<'doughnut'>;

  @Ref()
  private readonly doughnutRef!: ExtractComponentData<typeof DoughnutChart>;

  created(): void {
    this.assignColors();
  }

  mounted(): void {
    if (this.doughnutRef.chartInstance) {
      console.log(this.doughnutRef.chartInstance.data);
    }
  }

  assignColors(): void {
    this.sharesData.datasets[0].backgroundColor = [
      '#77CEFF',
      '#0079AF',
      '#123E6B',
      '#97B0C4',
      '#A5C8ED',
    ];
  }
}
</script>

启动程序，它将工作良好，我可以访问chartInstance内的mounted钩子。

但是现在我想对我的组件进行单元测试。我考虑设置propsData，这将是图表的输入数据。

DBOverviewDoughnut.spec.ts

import DBOverviewDoughnut from '@/components/dashboard/DBOverviewDoughnut.vue';
import { mount, Wrapper } from '@vue/test-utils';
import { Share } from '@/Share';

describe('DBOverviewDoughnut', () => {
  let cut: Wrapper<DBOverviewDoughnut>;

  it('should render the correct amount of sections', () => {
    cut = mount(DBOverviewDoughnut, {
      propsData: {
        sharesData: {
          labels: ['TestShare1', 'TestShare2', 'TestShare3'],
          datasets: [{ data: [11, 22, 33] }]
        }
      }
    });
    const chart = cut.findComponent({ ref: 'doughnutRef' });
    console.log(chart);
  });
});

使用shallowMount()似乎不起作用，因为我只能通过日志记录(没有chartInstance及其属性，如生产代码中的那样)：

VueWrapper {
      isFunctionalComponent: undefined,
      _emitted: [Object: null prototype] {},
      _emittedByOrder: [],
      selector: { ref: 'doughnutRef' }
    }

所以我想也许我必须挂载组件，因为DoughnutChart也是Chart.js图表的包装器。但是，当使用mount()时，我会得到以下错误：

console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
    [Vue warn]: `createElement()` has been called outside of render function.

  console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
    [Vue warn]: Error in render: "Error: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function."
    
    found in
    
    ---> <DoughnutChart>
           <DBOverviewDoughnut>
             <Root>

我不知道我做错了什么。我在我的VueCompostionAPI上注册了main.ts

import Vue from 'vue';
import { Chart, registerables } from 'chart.js';
import App from './App.vue';
import router from './router';
import store from './store';
import VueCompositionAPI from '@vue/composition-api';

Chart.register(...registerables);
Vue.use(VueCompositionAPI);

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

遵循this post也不能解决问题。

有人知道出了什么问题吗？我有点困惑这个错误是否与我的测试设置或chart.js或compositionApi的安装有关。

Answer 1

在挂载组件时，还需要在规范中使用VueCompositionAPI。可以通过在规范中创建本地Vue实例，将VueCompositionAPI作为插件添加到实例中，并在挂载组件时使用实例来实现这一点。https://vue-test-utils.vuejs.org/api/options.html#localvue

Answer 2

使用localVue确实是我应该考虑的问题。这和安装canvas-package是有效的，这样我就可以获得关于Ref-元素的附加信息。不过，我还是得想办法用它做什么。

@AdriHM我想测试呈现的聊天是否得到了正确的数据。或者，如果它正确地显示了它(例如显示正确的节数)，但是我考虑的时间越长，我就越确信这是正确的测试。不过，我不想测试Chart.js API。