Angular-cli: karma jsdom launcher hangs

[catull]

Bug Report

- [x] bug report -> please search issues before submitting

Area

- [x] `npm run test`   or  `ng test`

Versions

Angular CLI: 6.0.8
Node: 10.6.0
OS: linux x64 (Linux Mint)
Angular: 6.0.9
Npm: 6.1.0 and 6.2.0

Reproduction steps

1. ng new appWithJsdom
2. cd appWithJsdom
3. npm install
4. npm install karma-jsdom-launcher jsdom --save-dev
5. modify src/karma.conf.js

diff --git a/src/karma.conf.js b/src/karma.conf.js
index b6e0042..c9f81b7 100644
--- a/src/karma.conf.js
+++ b/src/karma.conf.js
@@ -8,6 +8,7 @@ module.exports = function (config) {
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
+      require('karma-jsdom-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
       require('@angular-devkit/build-angular/plugins/karma')
@@ -24,8 +25,8 @@ module.exports = function (config) {
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false
+    autoWatch: false,
+    browsers: ['jsdom'],
+    singleRun: true
   });
 };

The log given by the failure

Then ng test displays build statements in CLI:

16 07 2018 13:06:35.821:WARN [karma]: Port 9876 in use
16 07 2018 13:06:35.823:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9878/
16 07 2018 13:06:35.823:INFO [launcher]: Launching browsers jsdom with unlimited concurrency
16 07 2018 13:06:35.842:INFO [launcher]: Starting browser jsdom
16 07 2018 13:06:40.252:INFO [Mozilla/5.0 (linux) AppleWebKit/537.36 (KHTML, like Gecko) jsdom/11.11.0]: Connected on socket p6lvGGcG6uRr_zm5AAAB with id 26520884

The the console is cleared, nothings happens.
Ctrl-c eventually leads me back to the console.

This is repeatable.
No other user is connected to the desktop, no other node instances are running concurrently.
Can't really run too many processes on it anyway.

When I use 'Chrome' or 'ChromeHeadless', the browser pops up etc, runs the tests all green.
Eveidently, I have the Chrome browser installed locally.

Desired functionality

I need a way to run the UI tests in a build process.
Tried PhantomJS - no luck.

Would like to use jsdom as test browser for builds - as it does headless mode with minimal effort.
Can't install a browser on the build server.
Though puppeteer and ChromeHeadless, the karma launcher fails with not finding libX11.so ...

[catull]

Two and a half months later, I revisit this defect.

I am not able to reproduce it.
The same project configuration now runs and terminates nicely, returning to the command prompt.

Closing this issue.

[catull]

Verified with

Angular CLI: 6.2.4
Node: 10.11.0
OS: Linux x64 (Linux Mint 19.1 - based on Ubuntu 18.4)
Angular: 6.1.9
Yarn: 1.10.1

[kimamula]

I am facing this issue.
I confirmed that this can be easily reproduced with a fresh Angular project.

$ ng new karma-jsdom-demo
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
$ cd karma-jsdom-demo
$ yarn add jsdom karma-jsdom-launcher -D
$ vi src/karma.conf.js
// edit karma.conf.js as shown below

@@ -7,7 +7,7 @@ module.exports = function (config) {
     frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
       require('karma-jasmine'),
-      require('karma-chrome-launcher'),
+      require('karma-jsdom-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
       require('@angular-devkit/build-angular/plugins/karma')
@@ -25,7 +25,7 @@ module.exports = function (config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ['jsdom'],
     singleRun: false
   });

$ yarn test

My environment:

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.1.4
Node: 10.12.0
OS: darwin x64
Angular: 7.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.4
@angular-devkit/build-angular     0.11.4
@angular-devkit/build-optimizer   0.11.4
@angular-devkit/build-webpack     0.11.4
@angular-devkit/core              7.1.4
@angular-devkit/schematics        7.1.4
@ngtools/webpack                  7.1.4
@schematics/angular               7.1.4
@schematics/update                0.11.4
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1

[catull]

Have moved on w/ using Jest as my headless browser test runner.

[kimamula]

@catull I would appreciate if you reopen this issue for those who are still using Karma.

[catull]

@kimamula Sure, do not expect assistance from me though. I found a more suitable solution with Jest.

[kimamula]

Thanks!
I am also considering moving to Jest.
I would like to hear from Angular team whether they could support karma-jsdom-launcher for making the decision.

[catull]

@kimamula

1. Jest uses jsdom internally.
   That alone motivated me.

2. I cannot imagine why karma-jsdom-launcher would be supported.
   They support karma-chrome-launcher and karma-firefox-launcher, head-full and head-less.

Don't know if they also support Edge on Windows.

[tiaguinho]

@filipesilva @mgechev any tip to fix this bug?
I would love to try to fix this.

[filipesilva]

@tiaguinho I'm not very sure myself actually. I suppose the starting point is to figure out what's happening.

It's start by trying to strip down the the karma config in a CLI project in order to not have any CLI specific stuff, then add a basic test and karma-jsdom, to see if that work.

Once that works I'd add back the CLI stuff. See what breaks then. Try to get some logs or karma events or something that tells me where things go wrong.

I've never used karma-jsdom myself so it's hard to imagine what's going wrong.

[andrewpmontgomery]

I've found a fix, but it's a bit hacky. The problem is something to do with the way JSDom performs synchronous requests, which are used for loading <script src="..."> elements. For some reason, the Karma server doesn't respond to those requests. I'm not sure whether the problem is in Karma or in JSDom; or possibly in the way Karma launches JSDom.

My hack is to force JSDom to treat all scripts as asynchronous. In theory this could break your application; but at least for Angular apps, it doesn't seem to matter.

Here is the hack:

1. Start editing node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js
2. At line 599, add the following:
   flag.synchronous = false; // hack
   The resulting file will look like:
   598: } 599: flag.synchronous = false; // hack 600: if (flag.synchronous) {
3. Save the file
4. Run ng test

Please let me know if this works for you.

[tiaguinho]

Thanks, @andrewpmontgomery this hack will help a lot of people.
@filipesilva I think this is not an Angular CLI issue.

[andrewpmontgomery]

No, it isn't an Angular CLI issue. The problem lies in karma-jsdom-launcher.

Most other karma launchers (e.g. karma-chrome-launcher, karma-phantomjs-launcher) use Node's child_process.spawn method to launch the browser as a separate process. But karma-jsdom-launcher runs jsdom in-process, which is the same process as Angular's web server. When JSDom tries to perform a synchronous request to the Angular server, it's like a snake eating its own tail: the server can't respond until JSDom finishes its request, but JSDom is waiting for the server to respond. The result is deadlock.

JSDom isn't without blame. It really ought to use async/await to handle synchronous XHR, but that would require major refactoring.

I'm exploring the possibility of adding a runtime argument to JSDom which would force all requests to be asynchronous, then making karma-jsdom-launcher use that option. I don't know when or if I'll be able to do that, or whether such a change would even be welcomed by JSDom's maintainers. In the meantime, anyone with urgent requirements is advised to use my hack above. (I use a postinstall script to patch the file.)

[mgechev]

@andrewpmontgomery thank you for sharing your findings! Let's close the issue here and move it to the attention of the maintainers of karma-jsdom-launcher.

If there's something on our side, feel free to open another issue with details.

[filipesilva]

Heya just wanted to mention that @badeball investigated this further in https://github.com/angular/angular-cli/issues/13580 and provides a way to use them together after https://github.com/angular/angular-cli/pull/13584 is merged.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}