vue.js - 使用 Vue 测试工具测试 Chart.js 组件会引发 window.matchMedia 错误

Question

我正在尝试为使用 Chart.js 的 Vue 组件编写 Mocha/Chai 测试。所有测试都通过了，但是我得到了这个错误：

C:\repos\security-center-frontend-2\security-center-frontend\node_modules\mocha\lib\runner.js:726 err.uncaught = true; ^

TypeError：无法在字符串“window.matchMedia 未找到”上创建属性“未捕获”！确保您使用的是 polyfill。

我认为这与 Vue 测试工具表示窗口对象的方式有关，我应该以某种方式存根它，但不确定正确的语法。

我的组件：

<template>
    <card>
        <template slot="header">
            <h4 v-if="$slots.title || title" class="card-title">
                <slot name="title">
                    {{title}}
                </slot>
            </h4>
            <p class="card-category">
                <slot name="subTitle">
                    {{subTitle}}
                </slot>
            </p>
        </template>
        <div>
            <div :id="chartId" class="ct-chart"></div>
            <div class="footer">
                <div class="chart-legend">
                    <slot name="legend"></slot>
                </div>
                <hr>
                <div class="stats">
                    <slot name="footer"></slot>
                </div>
                <div class="pull-right">
                </div>
            </div>
        </div>

    </card>
</template>
<script>
    import Card from './Card.vue';

    export default {
        name: 'chart-card',
        components: {
            Card
        },
        props: {
            footerText: {
                type: String,
                default: ''
            },
            title: {
                type: String,
                default: ''
            },
            subTitle: {
                type: String,
                default: ''
            },
            chartType: {
                type: String,
                default: 'Line' // Line | Pie | Bar
            },
            chartOptions: {
                type: Object,
                default: () => {
                    return {};
                }
            },
            chartData: {
                type: Object,
                default: () => {
                    return {
                        labels: [],
                        series: []
                    };
                }
            }
        },
        data () {
            return {
                chartId: 'no-id'
            };
        },
        methods: {
            /***
             * Initializes the chart by merging the chart options sent via props and the default chart options
             */
            initChart (Chartist) {
                const chartIdQuery = `#${this.chartId}`;
                Chartist[this.chartType](
                    chartIdQuery,
                    this.chartData,
                    this.chartOptions
                );
            },
            /***
             * Assigns a random id to the chart
             */
            updateChartId () {
                const currentTime = new Date().getTime().toString();
                const randomInt = this.getRandomInt(0, currentTime);
                this.chartId = `div_${randomInt}`;
            },
            getRandomInt (min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }
        },
        mounted () {
            this.updateChartId();
            import('chartist').then((Chartist) => {
                let ChartistLib = Chartist.default || Chartist;
                this.$nextTick(() => {
                    this.initChart(ChartistLib);
                });
            });
        }
    };
</script>
<style>
</style>

我的测试：

import { expect } from 'chai';
import { mount } from '@vue/test-utils';
import ChartCard from '@/components/Cards/ChartCard.vue';

describe('ChartCard.vue', () => {
    it('Has a title', () => {
        const wrapper = mount(ChartCard);
        wrapper.setProps({title: 'test title'});
        expect(wrapper.contains('.card-title')).to.be.true;
    });
    it('Displays passed title', () => {
        const wrapper = mount(ChartCard);
        wrapper.setProps({title: 'test title'});
        expect(wrapper.text()).to.include('test title');
    });
});