Vue3+Vitest环境下Highcharts组件单元测试报错解决方案咨询

问题场景 #

Vue3 TypeScript项目中，Mycomponent使用Highcharts模块运行正常，但Vitest单元测试时出现「Failed to resolve component: highcharts」错误，同时不知道如何访问和检查Highcharts数据。

相关代码 #

Mycomponent.vue

<script setup lang="ts">
interface Config {
  name?: string
  type: string
  series: Array<any>,
  headers?: Array<any>
}

const props = defineProps<Config>()

// 注：原代码缺少chartOptions定义，推测是根据props生成的逻辑
const chartOptions = {
  series: props.series,
  chart: {
    type: props.type
  }
}
</script>

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

原测试代码（有问题版本）

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")
    })
  })
})

main.ts配置

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

const app = createApp(App)

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

app.mount('#app')

错误信息

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

解决「Failed to resolve component: highcharts」错误 #

测试环境是独立的，不会自动继承main.ts中的全局组件注册，需手动处理：

方法1：单测试文件内局部注册插件 #

在测试文件中，通过mount的global.plugins选项注册HighchartsVue：

import { mount } from '@vue/test-utils'
import Mycomponent from './Mycomponent.vue'
import HighchartsVue from 'highcharts-vue'

describe('Mycomponent', () => {
  it('Chart data type should be set correctly', () => {
    const wrapper = mount(Mycomponent, {
      global: {
        plugins: [HighchartsVue]
      },
      props: {
        series: [{ name: 'delta', data: [500, 83, -200, -800, 228, 184] }],
        type: 'column'
      }
    })
    expect(wrapper.props().type).toBeTypeOf("string")
  })
})

方法2：全局配置测试环境（所有测试文件生效） #

创建测试前置文件setup.ts，全局注册HighchartsVue：

// setup.ts
import { config } from '@vue/test-utils'
import HighchartsVue from 'highcharts-vue'

config.global.plugins.push(HighchartsVue)

修改vitest.config.ts，指定前置文件：

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: {
    setupFiles: ['./setup.ts'],
    environment: 'jsdom'
  }
})

访问和检查Highcharts数据 #

方式1：获取真实Highcharts实例断言 #

HighchartsVue组件会暴露chart实例，可通过组件实例访问：

it('should render correct series data', () => {
  const wrapper = mount(Mycomponent, {
    global: {
      plugins: [HighchartsVue]
    },
    props: {
      series: [{ name: 'delta', data: [500, 83, -200, -800, 228, 184] }],
      type: 'column'
    }
  })
  // 获取Highcharts组件实例
  const highchartsComponent = wrapper.findComponent('highcharts')
  // 获取Highcharts核心实例
  const chartInstance = highchartsComponent.vm.chart
  
  // 断言系列名称和数据
  expect(chartInstance.series[0].name).toBe('delta')
  expect(chartInstance.series[0].data.map(item => item.y)).toEqual([500, 83, -200, -800, 228, 184])
})

方式2：模拟Highcharts组件（聚焦业务逻辑） #

若无需测试图表渲染细节，可模拟highcharts组件，捕获传入的配置进行断言：

it('should pass correct options to Highcharts component', () => {
  let receivedOptions: any = null
  const wrapper = mount(Mycomponent, {
    global: {
      stubs: {
        highcharts: {
          template: '<div></div>',
          props: ['options'],
          created() {
            receivedOptions = this.options
          }
        }
      }
    },
    props: {
      series: [{ name: 'delta', data: [500, 83, -200, -800, 228, 184] }],
      type: 'column'
    }
  })
  
  // 断言传入的配置是否正确
  expect(receivedOptions.chart.type).toBe('column')
  expect(receivedOptions.series[0].data).toEqual([500, 83, -200, -800, 228, 184])
})

内容的提问来源于stack exchange，提问作者chan