vue.js - 使用 Vue 测试工具测试 Chart.js 组件会引发 window.matchMedia 错误
问题描述
我正在尝试为使用 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');
});
});
解决方案
推荐阅读
- python - 使用 SQLAlchemy 和 Python 执行 SQL CTE
- react-native - 在 React Native 中使用异步存储计数器
- jquery - 如何在 jquery 的同一页面上检测页面重新加载时 url 参数值的变化?
- python - 从python中的给定数据集中提取一个值
- graphviz - Yosys——用verilog制作电子原理图
- python - 使用熊猫从字符串中删除所有字母数字单词
- flutter - 在颤振上存储 api 密钥的最佳方法是什么?
- java - Kafka Producer 注册 AppInfo mbean 时出错且未创建消息
- apache-spark - 在 Spark 中读取数据框中的 XML 列
- xamarin - Azure DevOps 管道构建错误:未为项目“MyProject.iOS.csproj”设置 OutputPath 属性。用于 Xamarin iOS 项目