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

Question

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

  

C：\回购\安全中心前端-2 \安全中心前端\ node_modules \摩卡\ lib中\ runner.js：726   err.uncaught = true;                  ^

     

TypeError：无法创建属性＆＃39; uncaught＆＃39;在字符串上   ＆＃39;找不到window.matchMedia！确保您使用的是polyfill。＆＃39;

我认为这与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');
    });
});