ReferenceError: WebGLRenderingContext is not defined

Question

上下文：

我正在使用带有 Webpack 的 Typescript 编写个人 WebGL Api。 WebGL 内容在浏览器中正确呈现。

Everything is ok !

现在，尝试使用 mocha 在此设置之后创建一些单元测试：

Unit testing node applications with TypeScript — using mocha and chai

mocha --reporter list -r ts-node/register -r jsdom-global/register 'test/**/*.spec.ts'

Everything is also ok !

问题：

直到我尝试测试引用 WebGLRenderingContext 出现以下错误的代码：

   ReferenceError: WebGLRenderingContext is not defined
    at D:\JEROME\dev\repositories\experiment_typescript\webgl_api\src\webgl_objects\datas\webgl_enum_indexed.ts:7:34
    at Object.<anonymous> (D:\JEROME\dev\repositories\experiment_typescript\webgl_api\src\webgl_objects\datas\webgl_enum_indexed.ts:6:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Module.m._compile (D:\JEROME\dev\repositories\experiment_typescript\webgl_api\node_modules\ts-node\src\index.ts:837:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Object.require.extensions.<computed> [as .ts] (D:\JEROME\dev\repositories\experiment_typescript\webgl_api\node_modules\ts-node\src\index.ts:840:12)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)

Breaking > Not ok !

我不明白如何让它工作，有什么建议吗？

我是否遗漏了一些 link 参考的方法？
我应该用另一种测试方式进行调查吗？

这是我的配置：

package.json :

  "dependencies": {
    "gl-matrix": "^3.2.1",
    "wasm-loader": "^1.3.0",
    "css-loader": "^3.5.1"
  },
  "devDependencies": {
    "@types/chai": "latest",
    "@types/html-webpack-plugin": "^3.2.2",
    "@types/jsdom": "latest",
    "@types/mocha": "latest",
    "@types/webgl2": "~0.0.5",
    "canvas": "^2.6.1",
    "chai": "latest",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.1.1",
    "del-cli": "^3.0.0",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.0.4",
    "jsdom": "16.3.0",
    "jsdom-global": "3.0.2",
    "mocha": "latest",
    "prettier": "^2.0.4",
    "style-loader": "^1.1.3",
    "ts-loader": "^6.2.2",
    "ts-node": "^8.8.1",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3",
    "typescript": "^3.8.3"
  },

tsconfig.json :

{
  "compilerOptions": {
    "outDir": "./dist/",
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "typeRoots": [
      "./node_modules/@types",
      "./custom_typings",
    ],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "downlevelIteration": true
  },
  "include": [
    "./web/**/*",
    "./src/**/*",
    "./custom_typings",
    "./node_modules/@types",
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false
}

Answer 1

您的单元测试是运行 in node.js via mocha。 node.js 不支持 WebGL 就像不支持大多数浏览器的 API 一样。

你可以在里面使用 mocha puppeteer if you want to run tests that use browser APIs. The examples page of that puppeteer article links to an example of using mocha with puppeteer。

Answer 2

经过很长一段时间搜索信息，感谢 gman 的回答，我以另一种方式看到了这一点，我设法使用 npm mocha-loader.

发布了我的 Webpack 测试

"mocka_browser_test": "del-cli dist && webpack-dev-server --open --config webpack.config.test.ts"

与另一个 webpack.config 文件专用于测试：

这可能与此有关。

对于 typescript/npm 难题的新手来说，将在网络上找到的信息结合起来并不容易。

ReferenceError: WebGLRenderingContext is not defined

ReferenceError: WebGLRenderingContext is not defined

mocha.js

webgl

typescript

webpack