Javascript 用Jest测试LightningChartJS

我试图创建一个Jest测试，该测试测试实例化LightningChartJS ChartXY的类的实现

在图表实例化期间引发以下错误：

  EngineError: Null pointer in i
  ...
  at new i (../../node_modules/@arction/lcjs/dist/lcjs.js:1:8948)
  at Ot (../../node_modules/@arction/lcjs/dist/lcjs.js:1:20740)
  at new i (../../node_modules/@arction/lcjs/dist/lcjs.js:1:458125)
  at ../../node_modules/@arction/lcjs/dist/lcjs.js:47:49973
  at Object.ChartXY (../../node_modules/@arction/lcjs/dist/lcjs.js:47:211838)
  at new LightningPlot (src/app/lightningChart.ts:70:8)

问题的根源是：LightningChartJS找不到要插入的相应DOM节点

到目前为止，我所尝试的：

• 将jest canvas mock导入安装程序（在JSDom中启用canvas并避免此操作所必需的）
• 在安装过程中使用JSDom导入来模拟DOM（）
• 使用Jest测试环境

  Jest环境jsdom

  配置

DOM模拟通过几种方式进行了测试：

• 使用createElement（）
• 设置主体的内部HTML

---

JSDOM本身不足以在浏览器环境之外运行LightningChart JS。JSDOM不提供WebGL支持，因此当LightningChart JS调用

canvas.getContext（'WebGL'）

时，它将不会接收上下文并抛出错误。为了能够使用Jest运行LCJS，需要稍微编辑

canvas.getContext

方法以支持WebGL

您需要安装和npm软件包，然后将安装文件添加到Jest配置中

\uuuu设置\uuuu/lcjs.js

：

const createContext=require（'gl'）
//覆盖getContext以返回无头gl webgl上下文
const orig_getContext=window.htmlcanvaseelement.prototype.getContext
window.htmlcanvaseElement.prototype.getContext=函数（）{
if（参数[0]===“webgl”）{
//创建无头gl上下文
const ctx=createContext（1，1，参数[1]）
//将resize方法插入到上下文中，以便lcjs包可以使用它
ctx.resize=ctx.getExtension（'STACKGL\u resize\u drawingbuffer'）。resize
返回ctx
}否则{
返回orig_getContext.apply（此参数）
}
}

Jest配置：

{
  "jest": {
    "setupFiles": [
      "./__setups__/lcjs.js"
    ]
  }
}

---

使用该安装文件将使LightningChart JS能够在Jest提供的环境中运行。安装文件基于实现。

很好，谢谢！我将尝试集成您的解决方案，并与您联系。