Jest运行单元测试时Highcharts导入触发undefined属性设置错误

错误原因 #

这个错误是因为Highcharts的UMD模块加载时，会尝试将自身挂载到浏览器的window对象上，但Jest默认的jsdom测试环境中，window对象可能未被正确初始化，或者模块加载时window还未就绪，导致赋值失败。

解决方案 #

1. 提前初始化完整浏览器环境 #

在Jest的全局setup文件（比如src/setupTests.js）中，手动初始化window和document对象，确保Highcharts能找到挂载的全局对象：

// src/setupTests.js
import { JSDOM } from 'jsdom';

const dom = new JSDOM('<!doctype html><html><body></body></html>');
global.window = dom.window;
global.document = dom.window.document;
global.navigator = dom.window.navigator;

// 补充Highcharts可能用到的全局方法
global.window.addEventListener = jest.fn();

2. Mock Highcharts（推荐，适合组件逻辑测试） #

如果测试不需要验证图表真实渲染，只是测试组件业务逻辑，直接用Jest mock掉Highcharts及其模块，避免加载真实库：

// 在测试文件顶部或全局setup文件中
jest.mock('highcharts', () => ({
  chart: jest.fn(),
  setOptions: jest.fn(),
  // 根据组件用到的Highcharts方法补充对应mock
}));

// 针对Highcharts子模块做mock
jest.mock('highcharts/modules/exporting', () => jest.fn());
jest.mock('highcharts/modules/networkgraph', () => jest.fn());

3. 调整Jest转译配置 #

如果Highcharts源码包含未转译的ES语法，导致Jest无法解析，修改jest.config.js让Babel转译Highcharts相关模块：

// jest.config.js
module.exports = {
  // ...其他配置
  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest',
  },
  transformIgnorePatterns: [
    // 仅排除node_modules中除highcharts及其模块外的内容
    'node_modules/(?!(highcharts|highcharts/modules)/)',
  ],
};

验证 #

修改配置后重新运行测试，即可解决Cannot set properties of undefined (setting 'highcharts')错误。若组件依赖Highcharts实例，可在mock中返回模拟实例以满足调用需求。

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