CODEWITHSUNDEEP
highchartsvuejs3vitest
chan
chan

Reputation: 1

component with imported module (highcharts) unit-test how to! vue3,vitest

in my project, i'm using highcharts moudle in Mycomponent in vue3 ts and it's working well. i'm also add unit-test code to using vitest to check this component working well.

but now i got a error message below my code, i don't know how can i access and check highchart data i though that Mycomponent was mounted but i didn't declarer or render highchart module.

can you give me the some advice or link for check to resolve this probleme ?

thanks!

Mycomponent.vue like that


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>

i tried to test this component with vitest

MY spec.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")
  })

and i got a error like that

[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>

this is my main.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()

Upvotes: 0

Views: 620

Answers (1)

Jakub Szuminski
Jakub Szuminski

Reputation: 177

The warning that you're getting suggests that Vue in a Vitest environment struggles to determine whether highcharts is a native HTML element or a custom component.

I believe that a quick fix would be to change the component name from a single word (<highcharts>) to a name with - (like <highcharts-chart>). You can do this as described in the documentation:

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

If this alone does not work, you can add an additional condition for custom components:

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

Alternatively, you could try importing the Chart component directly from highcharts instead of registering the highcharts component:

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

When it comes to the second part of your question (how to access chart data), you can use ref to create add a reference to the Highcharts object and there, you have access to the entire chart instance.

<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

Upvotes: 1

Related Questions