Настройка JSDom karma angular

Question

Я хочу использовать JSDOM в качестве браузера для запуска жасминовых тестов в angular с использованием кармы.

Я установил 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?

Answer 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.

В FAQ по karma-jsdom-launcher есть известная проблема , задокументированная здесь . Это говорит о том, что лаунчер кармы может зависнуть, если используются исходные карты. Если мы попытаемся отключить исходные карты в angular.json с добавлением "sourceMap: false" таким образом:

"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": []
  }
},

Это действительно работает. Для этого я создал демо-версию, , которую можно проверить здесь .

Однако не круто, что исходные карты должны быть отключены. Это означает, что вы не сможете использовать контрольные точки в тестах, что может быть неудобным ограничением.

Стоит рассмотреть возможность использования безголового Chrome, если ограничение с исходными картами является болезненным. Учебное пособие по использованию Headless Chrome можно найти здесь .