ReferenceError:未定义WebGLRenderingContext

时间:2020-08-02 14:30:20

标签: typescript webpack mocha webgl

上下文:

我正在使用Typescript和Webpack编写个人WebGL Api。 WebGL填充在浏览器中正确呈现。

一切都很好!

现在,尝试使用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'

Mocha result

一切都还好!

问题:

直到我尝试测试引用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)

Mocha result

突破>不行!

我不知道如何使它起作用,有什么建议吗?

  • 我是否缺少某种链接参考的方法?
  • 我应该以其他测试方式进行调查吗?

这是我的配置:

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
}

2 个答案:

答案 0 :(得分:1)

您的单元测试正在通过mocha在node.js中运行。 node.js不支持WebGL,就像它不支持大多数浏览器的API一样。

如果要运行使用浏览器API的测试,可以在puppeteer内使用mocha。该木偶文章的examples page链接到an example of using mocha with puppeteer

答案 1 :(得分:0)

经过长时间的搜索信息,并感谢gman的回答,我以另一种方式看到了这一点,并且我设法使用npm mocha-loader使用Webpack发布了测试。

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

以及另一个专用于test的webpack.config文件: enter image description here

这可能与此Stackoverflow post相关。

对于那些刚接触Typescript / npm拼图的人来说,要在网络上找到信息是很不容易的。