我希望能够使用 JSDOM 作为浏览器,使用 karma 以 Angular 运行 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",
我错过了什么吗?如何使用 JSDom 而不是 chrome 浏览器运行我的测试?
最佳答案
我能够使用您发布的版本重现上述问题。
与
"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 .它说,如果使用源 map , karma 发射器可以挂起。如果我们尝试通过以这种方式添加 "sourceMap: false"
来禁用 angular.json
中的 sourcemaps:
"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 .
然而,必须禁用源映射并不酷。这意味着您将无法在测试中使用断点,这可能是一个不便的限制。
如果 sourcemaps 的限制令人痛苦,则值得考虑使用 Headless Chrome。关于使用 Headless Chrome 的教程 can be found here .
关于angular - JSDom karma Angular 设置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61386944/
相关文章:
r - 如何使用 knitr::kable() 将两个不同大小的表并排顶部对齐
asp.net-mvc - Azure 应用服务授权/简易身份验证与 ASP.NET 表单例份验证冲
ruby-on-rails - URL 参数被转换为看似乱码的字符
python - 为什么在 Python 中从不同路径调用类时 __class__ 不同?
css - Stylus error : "expected "indent", got "outd
vba - 在 64 位 VBA 中使用 TaskDialogIndirect
javascript - 排序 mongoose-aggregate-paginate-v2 更改顺