组件与导入模块(highcharts)单元测试如何！vue3，vitest

44u64gxh 于 2023-10-20 发布在 Highcharts

关注(0)|答案(1)|浏览(205)

在我的项目中，我在Vue 3 ts的Mycomponent中使用了highcharts模块，它工作得很好。我还使用vitest添加了单元测试代码，以检查此组件是否工作正常。
但现在我得到了一个错误消息下面我的代码，我不知道我如何可以访问和检查highchart数据我虽然Mycomponent被挂载，但我没有编译器或渲染highchart模块.
你能给予我一些建议或链接检查，以解决这个问题？
谢谢！2谢谢！
Mycomponent.vue就像这样

script setup lang="ts">

interface Config {
  name?: string
  type: string
  series: Array<any>,
  headers?: Array<any>
}

const props = defineProps<Config>()

<template>
  <highcharts :options="chartOptions"></highcharts>
</template>

我试着用vitest测试这个组件
我的规格ts

const wrapper = mount(Mycomponent, {
  props : {
    series: [{ name: 'delta', data: [500, 83, -200, -800, 228, 184] }],
    type: 'column'
  },
})

describe('Mycomponent', () => {
  it('Mycomponent Highcharts', () => {

  test('Chart data type should be set correctly', () => {
    expect(wrapper.props().type).toBeTypeOf("string")
  })

我得到了这样的错误

[Vue warn]: Failed to resolve component: highcharts
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
  at <Mycomponent series= [ { name: 'delta', data: [ 500, 83, -200, -800, 228, 184 ] } ] type="column" ref="VTU_COMPONENT" >
  at <VTUROOT>

这是我的主.ts

import HighchartsVue from 'highcharts-vue'
import Highchart from 'highcharts'

const app = createApp(App)

app.use(HighchartsVue)
app.use(Highchart)

app.mount('#app')

config.plugins.VueWrapper.install（）

highcharts

来源：https://stackoverflow.com/questions/77195018/component-with-imported-module-highcharts-unit-test-how-to-vue3-vitest

1条答案

按热度按时间

cyvaqqii1#

你得到的警告表明，在Vitest环境中，Vue很难确定highcharts是原生HTML元素还是自定义组件。
我认为一个快速的解决方法是将组件名称从单个单词（<highcharts>）更改为-（如<highcharts-chart>）。您可以按照文档中所述执行此操作：

app.use(HighchartsVue({ tagName: 'highcharts-chart' });

如果仅此方法不起作用，则可以为自定义组件添加附加条件：

const app = createApp(App);
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('my-custom-');

或者，您可以尝试直接从highcharts导入Chart组件，而不是注册highcharts组件：

<script setup>
import { Chart } from 'highcharts';
</script>
<template>
  <Chart :options="{series:[{data:[1,2,3]}]}"></Chart>
</template>

当涉及到问题的第二部分（如何访问图表数据）时，您可以使用ref来创建添加对Highcharts对象的引用，在那里，您可以访问整个chart示例。

<highcharts ref="chartRef" :options="options"></highcharts>
...
const chartRef = ref();
watch(chartRef, () => {
  const chart = chartRef.value.chart;
  console.log(chart); // open up the console to see what's available
});

Demo：https://codesandbox.io/s/lucid-bas-rqqx93?file=/src/App.vue
API：https://api.highcharts.com/class-reference/Highcharts.Chart

赞(0）回复(0）举报 2023-10-20

我来回答

组件与导入模块(highcharts)单元测试如何！vue3，vitest

1条答案

相关问题

热门标签

最新问答