PhantomJS does not work with Karma in Angular2 project

8
votes

I have created an out-of-the box project with the angular cli (1.0.0-rc1.0.0). Then I installed the PhantomJS plugin (npm install karma-phantonjs-launcher). Reproduction steps:

  1. create project with angular2 cli (ng new TestPhantomJS)
  2. run npm install karma-phantonjs-launcher
  3. in the karma.conf file add PhantomJS, ie change to browsers: ['Chrome'] this browsers:['Chrome', 'PhantomJS']

Reason beeing that for Team City integration I need a headless browser. The test run OK with ng test as long as the Chrome is specified as the browser, The problem is when you try and use PhantomJS. You will get the error as per image below. My research suggests that this is has to do with PhantomJS and javascript version compatibility. However, I have not found a solution to this problem.

Has anyone else come across this and possibly found a solution?

enter image description here

My karma.conf

// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-phantomjs-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    files: [
      { pattern: './src/test.ts', watched: false }
    ],
    preprocessors: {
      './src/test.ts': ['@angular/cli']
    },
    mime: {
      'text/x-typescript': ['ts','tsx']
    },
    coverageIstanbulReporter: {
      reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    angularCli: {
      environment: 'dev'
    },
    reporters: config.angularCli && config.angularCli.codeCoverage
              ? ['progress', 'coverage-istanbul']
              : ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: [ 'PhantomJS'],
    singleRun: false
  });
};

My test.ts

// This file is required by karma.conf.js and loads recursively all the .spec and framework files

import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
declare var __karma__: any;
declare var require: any;

// Prevent Karma from running prematurely.
__karma__.loaded = function () {};

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
// Finally, start Karma to run the tests.
__karma__.start()

;

3
angulartypescriptphantomjsteamcitykarma-runner
Can you show us your karma.conf.js and test.ts files? We're using PhantomJS and although we've run into problems before it is currently working. - shusson
@shusson , I have added my karma.conf and test.ts . Apart from the edit described above these are created "as is" by the angular cli. - Tomas Schier
try to import polyfills.ts in test.ts and main.ts ie import './polyfills.ts'; and remove it from your .angular-cli.json - shusson
afaik, you're right, this is caused because the phantomjs doesn't support ecmascript 2015. so, stay using chrome until phantomjs 2.5 released i guess? - kucing_terbang

3 Answers

11
votes

In fact, you don't have to wait for phantomjs 2.5 release.

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

  • in karma.conf.js

    • add require('karma-phantomjs-launcher') to the plugins section
    • add PhantomJS to the browsers

  • npm install --save intl

  • in src/polyfill.ts
    • add import 'intl'; (uncomment at the bottom)
    • add import "core-js/client/shim"; to the Evergreen requirements section
  • In src/tsconfig.spec.json set the target to es5.

Ref: https://stackoverflow.com/a/42539894/7683428

15
votes

Since Chrome supports now (as of version 59) headless running, there's no reason any more to use outdated PhantomJS. Unless you cannot update/install chrome on target machine. If you have included karma-chrome-launcher in karma.conf you can now just specify:

browsers: ['ChromeHeadless']

There's also possibility to use the Canary edition via ChromeCanary or ChromeCanaryHeadless.

2
votes

My current work around is to target es5 for the tests only.

tsconfig.spec.json

{
    "compilerOptions": {
        ...
        "target": "es5",
        ...
}

.angular-cli.json

{
    "project": {
        "name": "client"
    },
    "apps": [
        {
            ...
            "tsconfig": "tsconfig.app.json",
            "testTsconfig": "tsconfig.spec.json",
            ...