angular-cli: ng test not executing tests, 0 out of 0 error with PhantomJS

Hi, recently I’ve started investigating unit testing for Angular for a project. I want to use the karma unit test runner for Chrome (to test while developing) and for PhantomJS, to generate test reports that can be used for a CI/CD strategy.

At the moment I have two issues. One is that karma doesn’t seem to find my tests, nothing gets executed and no results are given. This is in Chrome.

When trying to execute the PhantomJS browser, I do get results from the junit reporter, but this is saying that 0 tests were executed, which results in an error.

Any suggestions on the error?

NOTE: the processes run in a docker container using the node:latest image

Bug Report or Feature Request (mark with an x)

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

Versions.

@angular/cli: 1.0.0-rc.2 node: 6.9.1 os: linux x64 (note, this is running in a docker container)

Repro steps.

Commands run: ng test --browsers Chrome --reporters progress

ng test --browsers PhantomJS --reporters junit

The log given by the failure.

Chrome container (can connect on http://localhost:9000, but can’t see any unit tests run)

test_1          | 24 03 2017 19:28:37.509:WARN [karma]: No captured browser, open http://localhost:9000/
test_1          | 24 03 2017 19:28:37.615:INFO [karma]: Karma v1.4.1 server started at http://0.0.0.0:9000/
test_1          | 24 03 2017 19:28:37.622:INFO [launcher]: Launching browser Chrome with unlimited concurrency
test_1          | 24 03 2017 19:28:37.706:INFO [launcher]: Starting browser Chrome
test_1          | 24 03 2017 19:28:37.708:ERROR [launcher]: No binary for Chrome browser on your platform.
test_1          |   Please, set "CHROME_BIN" env variable.

PhantomJS container (does run and post reports in xml file)

test-jenkins_1  | 24 03 2017 19:28:46.346:WARN [karma]: No captured browser, open http://localhost:9000/
test-jenkins_1  | 24 03 2017 19:28:46.445:INFO [karma]: Karma v1.4.1 server started at http://0.0.0.0:9000/
test-jenkins_1  | 24 03 2017 19:28:46.446:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
test-jenkins_1  | 24 03 2017 19:28:46.564:INFO [launcher]: Starting browser PhantomJS
test-jenkins_1  | 24 03 2017 19:28:54.566:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket aZCgNQhhirsnVtAyAAAA with id 55284456

Desired functionality.

I would like that Karma executes my unit tests, and to remove the 0 out of 0 error.

Mention any other details that might be useful.

karma.conf.js: 
// 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('karma-junit-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', 'junit', 'coverage-istanbul']
              : ['progress', 'junit', 'kjhtml',],
    port: 9000,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS', 'Chrome'],
    singleRun: false,

    junitReporter: {
      outputDir: 'testreports', // results will be saved to testreports directory
      outputFile: 'test-results.xml', // results will be saved to test-results.xml
      useBrowserName: false,
    },

    phantomjsLauncher: {
      // Have phantomjs exit if a ResourceError is encountered
      exitOnResourceError: true
    }
  });
};

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();

app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';

import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
  
});