上下文:
我正在使用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'
一切都还好!
问题:
直到我尝试测试引用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)
突破>不行!
我不知道如何使它起作用,有什么建议吗?
这是我的配置:
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
}
答案 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文件:
这可能与此Stackoverflow post相关。
对于那些刚接触Typescript / npm拼图的人来说,要在网络上找到信息是很不容易的。