基于 Vue js 3 使用 Jest 测试 Chartjs - 创建图表失败：无法从给定项目获取上下文

Question

我正在创建一个基于图表 js 的圆环图。 包“vue”：“3.2.45”，“chart.js”：“4.2.1” 我的图表正在完美创建。但是当我尝试编写测试时，它给了我错误。

我的 DoughnutChartDialog.vue -

           <div id="chart-area" >
                <canvas
                    id="donut-chart"
                    ref="donut-chart"
                    class="objectiveChart"
                >
                </canvas>
            </div>

    /**
     * Mounted
     */
    mounted() {
        this.loadChart();
    },

methods(){
/** 
         * To load the doughnut chart based on chartData
         * To fill label text
         * To draw the Edit icon as image
         */
        loadChart(){
            const ctx = document.getElementById('donut-chart');
            let tempLabelCoordinates = [];
            let config = {
                type: 'doughnut',
                data: {
                    datasets: this.chartData
                },
                options: {
                    responsive: true,
                    events: ['click'],
                    onClick: this.chartClicked,
                    maintainAspectRatio: false,
                    radius: 186,
                    cutout: '55%',
                    animation: {
                        duration: 18
                    },
                    plugins: {
                        legend: {
                            display: false,
                        },
                        font: {
                            size: 16
                        }
                    }
                },
                plugins: [{
                    beforeDraw(chart) { ......  };
                }]
            Chart.register( ArcElement, DoughnutController);
            this.objectiveChart = new Chart(ctx, config);
        }
}
}

现在在我的 DoughnutChartDialog.test 中，我有 -

import {mount } from '@vue/test-utils';
import DoughnutChartDialog from '../src/components/doughnutchartdialog/DoughnutChartDialog.vue';

/**
 * standardCallbackFunction
 * @param  {String} buttonPressed
 */
const standardCallbackFunction = function(buttonPressed) {
    console.log('Button pressed :' + buttonPressed);
};

/**
 * doughnut chart data
 */
const doughnutData = [{
    'data': [
        30,
        45,
        25,
        20
    ],
    'backgroundColor': [
        '#f19d9e',
        '#ad7aff',
        '#bdff00',
        '#9df6e0'
    ],
    'labels': [
        'Label 1',
        'Label 2',
        'Label 3',
        'Label 4'
    ]
}]

describe('DoughnutChartDialog', () => {

    describe('Snapshot tests for DoughnutChartDialog', () => {
        it('Should render DoughnutChartDialog with default values', async () => {
            const wrapper = mount(DoughnutChartDialog, {
                props: {
                    callbackFunction: standardCallbackFunction,
                    chartData: doughnutData,
                }
            });
            expect(wrapper.html()).toMatchSnapshot();
            //expect(wrapper.find('.donut-chart').exists()).toBe(true);
        });
});

但这失败了，并在 beforDraw 函数内的一行出现上述错误。 请帮忙。提前致谢。

注意 - 这就像@CWSites 的 qn- here 但我的是基于 Vuejs 而不是反应。