ReferenceError: WebGLRenderingContext is not defined

Question

Context:

I'm coding a personal WebGL Api using Typescript with Webpack. WebGL stuffs renders correctly in the browser.

Everything is ok !

Now, trying to create some unit tests following this setup with 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 !

Problem :

Until I try to test a code which references WebGLRenderingContextwhere the following error arise:

   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 !

I don't understand how to make it works, any suggestion ?

Am I missing some way to link reference ?
Should I investigate in another way of testing ?

Here is my configurations :

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
}

score 1 · Answer 1 · answered Aug 02 '20 at 16:40

1

Your unit tests are running in node.js via mocha. node.js does not support WebGL just like it doesn't support most of the browser's APIs.

You can use mocha inside 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.

answered Aug 02 '20 at 16:40

gman

100,619
31
269
393

This helped me to understand I had to see it with another way. Finally I used Webpack and mocha-loader to publish my tests too. But I probably will have to go with your solution if my needs grows and if an external API is needed. Thank you for your answer ! – Jerome Puttemans Aug 03 '20 at 22:04

score 0 · Accepted Answer · answered Aug 03 '20 at 22:03

After a long way searching informations, and thanks to gman answer, I saw this in another way and I manage to publish my tests with Webpack using npm mocha-loader.

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

with an other webpack.config file dedicated to test :

This can be related to this Stackoverflow post.

This wasn't easy to combine informations found around the web for someone who is new to the typescript/npm puzzle.

ReferenceError: WebGLRenderingContext is not defined

2 Answers2