用 Jest 测试 LightningChartJS

Question

我正在尝试创建一个 Jest 测试来测试实例化 LightningChartJS ChartXY 的 class 的实现。

图表实例化过程中抛出以下错误：

  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)

This GH issue hints 问题的根源：LightningChartJS 没有找到要插入的相应 DOM 节点。

到目前为止我尝试过的：

将 jest-canvas-mock 导入到设置中（需要在 JSDom 中启用 canvas 并避免 this issue）
在设置期间使用 JSDom 导入来模拟 DOM ()
使用 Jest 测试环境jest-environment-jsdom配置

DOM 模拟以多种方式进行了测试：

使用 createElement()
设置body的innerHTML

Answer 1

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

您需要安装 gl and canvas npm 包，然后将安装文件添加到您的 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"
    ]
  }
}

使用该安装文件将使 LightningChart JS 在 Jest 提供的环境中运行成为可能。安装文件基于 lcjs-headless 实现。

用 Jest 测试 LightningChartJS

Testing LightningChartJS with Jest

javascript

jestjs

lightningchart