Angular CLI: how to run tests using a browser without a browser?

Question

Using:

ng test

Angular CLI runs default tests in Chrome, which is great, but what if I need to run them in a console-only environment (no browser)?

It would also be nice if I could indicate if I want a browser less or not every time I launch it, something like:

ng test --browsers MyHeadLessBrowser

---

Edit

running PhantomJS I got the following:

PhantomJS 2.1.1 (Linux 0.0.0) ERROR TypeError: useValue, useFactory, data is not repeated! at http: // localhost: 9876 / _karma_webpack_ / polyfills.bundle.js: 854

---

eferenceError: Cannot find variable: Intl at http: // localhost: 9876 / _karma_webpack_ / vendor.bundle.js (line 49362) intlDateFormat @ http: // localhost: 9876 / _karma_webpack_ / vendor.bundle.js: 49362: 20

Answer 1

As a more complete answer based on William Hampshire one, Cuga commentary and my personal additions.

---

Short answer: using ChromeHeadless

You can simply use Headless Chrome :

ng test --browsers ChromeHeadless

You need to have Chrome 59+.

But if you need PhantomJS (and / or changing the default behavior of ng test by default with no arguments), read the following.

---

Longer answer: using PhantomJS

Customization

To be able (optionally) to run tests without a browser using PhantomJS, you must:

1) Install some dependencies:

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

2) Add PhantomJS to the list of karma plugins

Open karma.conf.js and add require('karma-phantomjs-launcher') to the plugins array, for example:

 module.exports = function (config) { config.set({ basePath: '', frameworks: ['jasmine', '@angular/cli'], plugins: [ require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-phantomjs-launcher'), // ... ], 

3) Include policies

Open the src/polyfills.ts and uncomment the following lines:

BROWSER INDICATORS

 import 'core-js/es6/symbol'; import 'core-js/es6/object'; import 'core-js/es6/function'; import 'core-js/es6/parse-int'; import 'core-js/es6/parse-float'; import 'core-js/es6/number'; import 'core-js/es6/math'; import 'core-js/es6/string'; import 'core-js/es6/date'; import 'core-js/es6/array'; import 'core-js/es6/regexp'; import 'core-js/es6/map'; import 'core-js/es6/weak-map'; import 'core-js/es6/set'; 

IMPORT OF USE

 import 'intl'; import 'intl/locale-data/jsonp/en'; 

---

How to run tests

Specifying browsers when running a command

No, you can either run the test using Chrome (angular-cli by default):

ng test --browsers Chrome

Or PhantomJS (headless):

ng test --browsers PhantomJS

Executing default behavior only ng test

You can change the default behavior of ng test (therefore, if the --browsers argument is not specified) by changing the value of the browsers array in karma.conf.js .

Now you can install only Chrome (the default setting is angular-cli):

browsers: ['Chrome'],

or PhantomJS :

browsers: ['PhantomJS'],

or even both:

browsers: ['Chrome', 'PhantomJS'],

Answer 2

This should do the trick:

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

Then change the plugins property of the karma.conf.js file to add the PhantomJS plugin to the list. Also add the PhantomJS property 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 properties and remove the karma-chrome-start from the array of plugins.