JSDom 业力角度设置

Posted 2023-03-07

【中文标题】JSDom 业力角度设置

【英文标题】：JSDom karma angular setup

【发布时间】：2020-08-06 18:17:02

【问题描述】：

我希望能够使用 JSDOM 作为浏览器，以便使用 karma 以角度运行 jasmine 测试。

我使用以下命令安装了 jsdom 和 karma-jsdom-launcher：

npm install jsdom --save-dev
npm install karma-jsdom-launcher --save-dev

安装软件包后，我将插件添加到 karma.conf.js

require('karma-jsdom-launcher')

但是，当我使用命令 ng test --browsers=jsdom 运行测试时，我得到了

10% building 4/4 modules 0 active23 04 2020 13:09:45.095:INFO [launcher]: Starting browser jsdom
23 04 2020 13:09:57.422:WARN [karma]: No captured browser, open http://localhost:9877/
Error: Uncaught [TypeError: Cannot read property 'origin' of undefined]

以下是我正在使用的版本

Node version - 12
Angular version - 9

"jsdom": "^16.2.2",
"karma": "~4.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"karma-jsdom-launcher": "^8.0.2",

我错过了什么吗？如何使用 JSDo 而不是 chrome 浏览器运行测试？

【问题讨论】：

您可以尝试从karma.conf.js 配置浏览器吗？我的意思是添加config.set(browsers: ['jsdom'],); 部分。在此运行之后只需 ng test。

我也试过了，还是不行

【参考方案1】：

我能够使用您发布的版本重现上述问题。

与

"jsdom": "^16.2.2", 
"karma-jsdom-launcher": "^8.0.2",
"karma": "~4.3.0" 
"karma"-jasmine: "~2.0.1" 

我遇到了同样的错误：

10% building 4/4 modules 0 active23 04 2020 13:09:45.095:INFO [launcher]: Starting browser jsdom
23 04 2020 13:09:57.422:WARN [karma]: No captured browser, open http://localhost:9877/
Error: Uncaught [TypeError: Cannot read property 'origin' of undefined]

将karma 更新为~5.0.0 和karma-jasmine 更新为~3.0.1 后，Error: Uncaught [TypeError: Cannot read property 'origin' of undefined] 错误消失了，但测试仍未启动，当应启动 Jasmine 测试时控制台挂起。

在karma-jsdom-launcher 的常见问题解答中有一个已知问题documented here。它说，如果使用源地图，业力启动器可能会挂起。如果我们尝试以这种方式添加"sourceMap: false" 来禁用angular.json 中的源映射：

"test": 
  "builder": "@angular-devkit/build-angular:karma",
  "options": 
    "main": "src/test.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.spec.json",
    "karmaConfig": "karma.conf.js",
    "sourceMap": false,
    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],
    "styles": [
      "src/styles.scss"
    ],
    "scripts": []
  
,

确实有效。我为此创建了一个演示，it can be checked here。

但是，必须禁用源映射并不酷。这意味着您将无法在测试中使用断点，这可能是一个不便的限制。

如果源图的限制很痛苦，那么值得考虑使用 Headless Chrome。 Headless Chrome 使用教程can be found here.

【讨论】：

所以我将 karma 和 karma-jasmine 更新到提到的版本并再次运行它。这次我克服了原始错误，但现在又遇到了另一个错误。未实现：HTMLCanvasElement.prototype.getContext（不安装canvas npm包）

好的，我找到了 HTMLCanvasElement 问题。这是因为 pollyfills.ts 中的包 web-animations.js。我添加了该行并在您的项目中安装了该软件包并得到了同样的错误。你知道怎么解决吗？

我看了看，但似乎走得太远了。为什么需要 JSDOM 作为测试的浏览器？

在没有浏览器的 CI 服务器上运行它。没有 chrome/headless chrome 或 phantom js 等，所以唯一的选择是 jsdom。它可以工作，但对于网络动画，它现在会抛出错误。

任何运气如何解决这个问题？