1

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

在 Chart 的实例化过程中会抛出以下错误：

  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 中启用画布并避免此问题）
  • 在设置期间使用 JSDom 导入来模拟 DOM（基于此 SO 答案）
  • 使用 Jest testEnvironmentjest-environment-jsdom配置

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

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

1 回答 1

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": {
    "setupFiles": [
      "./__setups__/lcjs.js"
    ]
  }
}

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

于 2020-07-20T07:07:49.560 回答