ReferenceError: WebGLRenderingContext не определен

Question

Контекст:

Я кодирую персональный WebGL Api, используя Typescript с Webpack. Файлы WebGL корректно отображаются в браузере.

Все в порядке!

Теперь попытаемся создать несколько модульных тестов, следуя этой настройке с помощью mocha:

Модульные приложения узлов тестирования с TypeScript - с использованием мокко и чая

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. (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. [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)

Результат мокко

Нарушение> Не нормально!

Я не понимаю, как заставить его работать, есть предложения?

• Мне не хватает способа связать ссылку?
• Стоит ли мне исследовать другой способ тестирования?

Вот мои конфигурации:

пакет. 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

Ваши модульные тесты выполняются в node.js через mocha. node.js не поддерживает WebGL так же, как не поддерживает большинство API-интерфейсов браузера.

Вы можете использовать мокко внутри puppeteer , если вы хотите запускать тесты, использующие API-интерфейсы браузера. Страница примеров этой статьи про кукловода ссылается на пример использования мокко с кукольником .

Answer 2

После долгого поиска информации и благодаря ответу gman я увидел это по-другому, и мне удалось опубликовать sh свои тесты с помощью Webpack, используя npm mocha-loader.

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

с другим файлом webpack.config, предназначенным для тестирования:

This can be related to this Сообщение Stackoverflow .

Было нелегко объединить информацию, найденную в Интернете, для кого-то кто новичок в машинописи / npm головоломка.