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

[ghost]

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

});

[cmaart]

+1 I have the same problem

[filipesilva]

Does this project run test correctly out of containers?

As the Chrome scenario error says, you do not have Chrome installed in your container.

[cmaart]

For me, chrome works.
PhantomJs shows:
27 03 2017 13:45:59.886:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket nfT8ZEuQX3J77bn2AAAA with id 34460309

And then nothing anymore

[cmaart]

When I set the following config in karma.conf.js:
autoWatch: true
it executes the tests but doesn't run only once, which is what I want in case of CI-builds

[cmaart]

Okay, this worked for me:

Remove the autoWatch and singleRun config value from karma.conf.js.
In case of a CI-build (single run) I call ng test like this: ng test --single-run

Now it works!

[ghost]

@filipesilva outside of containers I encounter the same problem. From the containers I can connect on localhost, but no tests are ran.

[ghost]

@cmaart I tried your fix, but still, Chrome remains dead-silent. PhantomJS runs, but gives me the following output in junit:

<?xml version="1.0"?>
<testsuite name="PhantomJS 2.1.1 (Linux 0.0.0)" package="" timestamp="2017-03-31T13:47:23" id="0" hostname="e6465d133d72" tests="0" errors="1" failures="0" time="0">
  <properties>
    <property name="browser.fullName" value="Mozilla/5.0 (Unknown; Linux x86_64) AppleWebKit/538.1 (KHTML, like Gecko) PhantomJS/2.1.1 Safari/538.1"/>
  </properties>
  <system-out>
    <![CDATA[PhantomJS 2.1.1 (Linux 0.0.0) ERROR
  TypeError: undefined is not an object (evaluating '(_a = ((Object))).assign.apply')
  at webpack:///~/@angular/common/src/pipes/intl.js:187:0 <- src/test.ts:35267

]]>
  </system-out>
  <system-err/>
</testsuite>

I'm confused as to what is actually going on at the moment. If liked, I could give my component and module files?

[ghost]

Update: I tried to run the most basic test of all:

describe('1st tests', () => {
    it('true is true', () => expect(true).toBe(true));
})

In a 1st.spec.ts file, no results yet.

[ghost]

Ok, so now I'm seeing something funny/weird. I've tried to start with a fresh project, and just write the simple test I've written before. Again, there weren't any logs. But when I openend the debug runner and the console in Chrome, I saw that in the console the tests are ran. But then the question is, why aren't there any reports in the console, or the Jasmine reporter?

[ghost]

Tried the same thing in my other project, gave the same; output in the Chrome console, no output in console, junit

[ghost]

When running ng serve from a container without using a command specified in a dockerfile (so running the command from an image of node using bash) jasmine shows output:

[ghost]

Ok, I managed to get karma running in the browser outside of docker, by removing the phantomJS and junit configurations from the karma.conf.js file. However, I still need this functionality for jenkins...

[tarlepp]

For me locally Chrome works, PhantomJS doesn't. And within TravisCI both fails.

[tarlepp]

Hmm it seems that we need to add some polyfills to make these work. Personally I uncommented following from src/polyfills.ts and after that local PhantomJS runs just fine, and also TravisCI runs PhantomJS and Chrome just fine.

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

And source for this from https://github.com/angular/angular-cli/issues/4654

[johvo]

Thank you, this is doing the trick for me.

[ghost]

A big thank to cmaart for his solution for PhantomJS just hanging without running anything. I had been stuck on that for a while, and this solution worked :

Remove the autoWatch and singleRun config value from karma.conf.js.
In case of a CI-build (single run) I call ng test like this: ng test --single-run

[filipesilva]

Thanks for adding the solution here @tarlepp, closing the issue but flagging as FAQ so people find it more easily 👍

[cristianobecker]

Exaclty this problem started happening to me after using ng eject.

On my first attempt, I didn't separate the development and production file from the webpack configuration.

After that change, I've noticed the src/tsconfig.json was still with the following part:

  "exclude": [      
    "test.ts",      
    "**/*.spec.ts"      
  ]

I removed that part and my tests started working again.

[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._}