Angular单元测试中无法访问HighCharts yAxis的title属性

云原生阿岚

2026-8-2

Angular单元测试验证HighCharts yAxis Title更新问题解决方案

核心原因：HighCharts yAxis是数组结构

HighCharts中即使只配置了一个y轴，chart.yAxis也是数组类型，而非单个对象。直接访问chart.yAxis.title自然会提示属性不存在，正确的访问路径是chart.yAxis[0].title.text。

解决方案1：直接验证chart实例的属性（需初始化chart）

在单元测试中确保组件的chart实例已初始化，调用目标方法后等待HighCharts异步更新，再验证属性值：

import { fakeAsync, tick } from '@angular/core/testing';
import * as Highcharts from 'highcharts';

it('更新Y轴标题方法生效', fakeAsync(() => {
  // 初始化测试用的chart实例（可动态创建容器）
  component.chart = Highcharts.chart(document.createElement('div'), {
    yAxis: [{ title: { text: '' } }]
  });

  // 调用私有方法（测试中通过[]访问私有成员）
  component['setYAxisTitle']('月度销售额');
  tick(); // 等待HighCharts完成异步更新

  // 验证标题是否更新
  expect(component.chart.yAxis[0].title.text).toBe('月度销售额');
}));

如果遇到类型报错，可添加类型断言：

expect((component.chart.yAxis as Highcharts.Axis[])[0].title.text).toBe('月度销售额');

解决方案2：Mock Chart实例，验证update调用参数

如果不需要实际渲染图表，可通过Mock对象验证chart.update方法是否传入了正确的配置：

it('调用setYAxisTitle时传入正确的标题参数', () => {
  // 创建带update方法的mock chart对象
  const mockChart = jasmine.createSpyObj('Chart', ['update']);
  component.chart = mockChart;

  component['setYAxisTitle']('用户活跃度');

  // 验证update方法的调用参数是否符合预期
  expect(mockChart.update).toHaveBeenCalledWith({
    yAxis: {
      title: {
        text: '用户活跃度'
      }
    }
  });
});