mocha 单元测试中的 Highchart 导入错误

Posted 2023-03-07

【中文标题】mocha 单元测试中的 Highchart 导入错误

【英文标题】：Error on Highchart import within mocha unit test

【发布时间】：2017-12-15 22:49:24

【问题描述】：

有没有人能够对Highcharts 和mocha 进行单元测试。当我们部署代码时一切正常，但看起来可能无法将 highcharts 包加载到浏览器之外。

我们的代码 repro 是 Typescript，因此我们使用 ts-node 转译为 commonJS，并使用 mocha 和 Domino 运行测试来伪造窗口/文档，我们用它来测试我们的其他 React 组件。

具体调用 import 的副作用会触发 TypeError：

import * as _Highcharts from 'highcharts';

触发此堆栈跟踪：

TypeError: Cannot set property 'hcTimezoneOffset' of undefined
    at A (<MyPath>/node_modules/highcharts/highcharts.js:113:299)
    at <MyPath>/node_modules/highcharts/highcharts.js:119:497
    at <MyPath>/node_modules/highcharts/highcharts.js:119:502
    at a (<MyPath>/node_modules/highcharts/highcharts.js:8:83)
    at Object.<anonymous> (<MyPath>/node_modules/highcharts/highcharts.js:8:109)
    at Module._compile (module.js:569:30)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .js] (<MyPath>/node_modules/ts-node/src/index.ts:373:14)

哪个是引用这个代码sn-p。

    <MyPath>/node_modules/highcharts/highcharts.js:113
a.defaultOptions.global,k=q.moment;if(g.timezone)if(k)return function(a)return-k.tz(a,g.timezone).utcOffset();a.error(25)return g.useUTC&&g.getTimezoneOffsetfunction A()var g=a.defaultOptions.global,u,h=g.useUTC,e=h?"getUTC":"get",n=h?"setUTC":"set";a.Date=u=g.Date||q.Date;u.hcTimezoneOffset=h&&g.timezoneOffset;u.hcGetTimezoneOffset=C();u.hcMakeTime=function(a,c,e,b,n,g)var d;h?(d=u.UTC.apply(0,arguments),d+=m(d)):d=(new u(a,c,k(e,1),k(b,0),k(n,0),k(g,0))).getTime();return d;F("Minutes Hours Day Date Month FullYear".split(" "),

缩小后的代码有点难以理解，但看起来根本原因是a.defaultOptions.global 是undefined，无论出于何种原因。我正在进一步挖掘，但很好奇是否有其他人已经获得了类似的设置。很可能我们的测试 Domino 窗口混淆了highcharts 代码。

【参考方案1】：

因此，对 highcharts 代码的简化让我找到了答案。失败的块在这里。

var g = a.defaultOptions.global,
    u, h = g.useUTC,
    e = h ? "getUTC" : "get",
    n = h ? "setUTC" : "set";
    a.Date = u = g.Date || q.Date;
    u.hcTimezoneOffset = h && g.timezoneOffset;

全局 defaultOptions 是这样初始化的，重要的是要注意，没有设置 Date 键，也没有设置我能看到的其他任何地方。

global: 
  useUTC: !0,
  VMLRadialGradientURL: "http://code.highcharts.com/5.0.12/gfx/vml-radial-gradient.png"

看起来它假设它将在 globalOptions 或 q.Date 中找到一个 Date 键，并且 q 设置为窗口。我们的多米诺骨牌窗口现在公开了一个 Date 方法来模仿本机浏览器窗口。添加它似乎使一切顺利进行。虽然不是最直观的失败。

如果导入没有那么多副作用就好了。

【参考方案2】：

在我的情况下，它看起来像是我用于测试的 Highchart 和 JSDOM 的冲突。 JSDOM 提供的 Window 对象缺少 Date 对象，所以我只是添加了

global.window.Date = Date;

Highcharts 导入成功。