Testing LightningChartJS with Jest

Question

我正试图创建一个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)

这个GH问题暗示了问题的根源：LightningChartJS找不到要插入的相应DOM节点。

到目前为止我尝试过的：

• 将jest canvas mock导入到设置中(在JSDom中启用canvas并避免此问题所必需的(
• 在设置期间使用JSDom导入来模拟DOM(基于此SO答案(
• 使用Jest testEnvironmentjest-environment-jsdom配置

DOM mock通过以下几种方式进行了测试：

• 使用createElement((
• 设置正文的innerHTML

Answer 1

JSDOM本身不足以在浏览器环境之外运行LightningChart JS。JSDOM不提供WebGL支持，因此当LightningChart JS调用canvas.getContext('webgl')时，它将不会接收上下文，并将抛出错误。为了能够使用Jest运行LCJS，需要对canvas.getContext方法进行一些编辑以支持WebGL。

您需要安装gl和canvasnpm软件包，然后将一个安装文件添加到您的Jest配置中。

__setups__/lcjs.js:

const createContext = require('gl')
// overwrite getContext to return headless-gl webgl context
const orig_getContext = window.HTMLCanvasElement.prototype.getContext
window.HTMLCanvasElement.prototype.getContext = function () {
if (arguments[0] === 'webgl') {
// create headless-gl GL context
const ctx = createContext(1, 1, arguments[1])
// insert the resize method to the context so that lcjs package can use it
ctx.resize = ctx.getExtension('STACKGL_resize_drawingbuffer').resize
return ctx
} else {
return orig_getContext.apply(this, arguments)
}
}

Jest配置：

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

使用该设置文件将使LightningChartJS能够在Jest提供的环境中运行。设置文件基于lcjs-headless实现。