Solvedangular cli How to run jasmine tests without browser ?

OS: Ubuntu 14.04.3 in a docker environment, without web browser (it's actually running in Cloud9)

Version: angular-cli: 1.0.0-beta.11-webpack.8
node: 6.5.0
os: linux x64

Without any browser installed in the os, I cannot find a way to execute jasmine unit tests in spec files.

running ng test :

Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.

WARNING in ./src/app/app.component.ts
[208, 7]: comment must start with a space
[20, 3]: Declaration of public instance member variable not allowed to appear after declaration of public instance member function
...
07 09 2016 20:57:41.939:WARN [karma]: No captured browser, open http://0.0.0.0:9876/
07 09 2016 20:57:41.947:INFO [karma]: Karma v0.13.22 server started at http://0.0.0.0:9876/
07 09 2016 20:57:41.955:INFO [launcher]: Starting browser Chrome
07 09 2016 20:57:41.958:ERROR [launcher]: No binary for Chrome browser on your platform.
  Please, set "CHROME_BIN" env variable.

No error shown even if some tests have
expect(true).toEqual(false);

Is there a way to execute these tests in a console-only environment ?

Thanks !

30 Answers

✔️Accepted Answer

Here is how I did it.

$ npm --version
3.10.6
$ ng --version
angular-cli: 1.0.0-beta.11-webpack.8
node: 6.4.0
os: darwin x64

npm i --save-dev karma-phantomjs-launcher

Then I modified the plugins property of the karma.conf.js file, adding the PhantomJS plugin to the list. Also add PhantomJS to the browsers property.

plugins: [
    require( 'karma-jasmine' ),
    require( 'karma-chrome-launcher' ),
    require( 'karma-phantomjs-launcher' ),
    require( 'karma-remap-istanbul' ),
    require( 'angular-cli/plugins/karma' )
],
...
browsers: [ 'PhantomJS', 'Chrome' ],

Since you want a completely headless experience, you can remove Chrome from the browsers property, and remove the karma-chrome-launcher from the plugins array as well.

Other Answers:

@oravecz
Thanks for the information, I needed to uncomment some things before I could fully use PhantomJS. These where all in the polyfills.ts file:

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/string';
import 'core-js/es6/array';

Info from here #4654

Hi all,

For me it's still not working. I've followed all these steps as well.


1. Install phantomjs:

npm install --save-dev phantomjs phantomjs-prebuilt karma-phantomjs-launcher

2. Add import to karma.conf.js:

require('karma-phantomjs-launcher'),

(...)

browsers: ['PhantomJS'],

3. Install intl

npm install --save-dev intl

4. Uncomment polyfills' imports:

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/string';
import 'core-js/es6/array';

import 'intl';  // Run `npm install --save intl`.

5. Target for es5 instead of es6 in tsconfig.spec.json:

"target": "es5",


But still doesn't work. I receive this from running:
ng test --browsers PhantomJS --watch=false

image

Already tried to increase the timeout value but there is no difference.

Does anybody know if I'm skipping some steps here?

Thanks so much in advance.

This configuration worked for me:

  • OS: Linux Mint
  • Chrome: 62.0.3202.89
  • Node: 8.9.0
  • npm: 5.5.1
  • ng-cli: 1.3.1

karma.conf.js

customLaunchers: {
    ChromeHeadless: {
        base: 'Chrome',
        flags: [
            '--headless',
            '--disable-gpu',
            '--no-sandbox',
            '--remote-debugging-port=9222',
        ]
    }
},
browsers: [
    'Chrome',
    'ChromeHeadless',
],

And simply running the following command from the app directory:

ng test --browsers="ChromeHeadless"

Hope somebody finds this useful, ChromeHeadless is a much better option then PhantomJS

@cbeldacap you only need to specify browsers: ['ChromeHeadless'] using karma-chrome-launcher (just remember to update this to the latest version, and you don't need to add customLaunchers.

PhantomJS is out of question, I need to had a bunch of polyfills (and those will end up on my final production build using the polyfills.ts file and I don't want that), to make it happen and still Phantom crashes trying to understand ES6 template literals.

Trying now to install Chrome on my jenkins slave that runs the tests, but this slave is using CentOS and I'm having a really hard time setting this up.

More Issues: