Angular-cli: `ng test` errors out with "Unexpected string" after upgrade to Angular CLI 6

[joeattardi]

I have an Angular 5 project that I updated to use Angular 6/Angular CLI 6. Now, though, when I run my tests with ng test --watch=false, I get this error several times:

HeadlessChrome 66.0.3359 (Mac OS X 10.13.4) ERROR
  {
    "message": "Uncaught SyntaxError: Unexpected string\nat src/test.ts:1:8\n\nSyntaxError: Unexpected string",
    "str": "Uncaught SyntaxError: Unexpected string\nat src/test.ts:1:8\n\nSyntaxError: Unexpected string"
  }

Versions

Angular CLI: 6.0.3
Node: 9.11.1
OS: darwin x64
Angular: 6.0.3
... animations, cli, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.3
@angular-devkit/build-angular     0.6.3
@angular-devkit/build-optimizer   0.6.3
@angular-devkit/core              0.6.3
@angular-devkit/schematics        0.6.3
@angular/cdk                      5.2.5
@ngtools/webpack                  6.0.3
@schematics/angular               0.6.3
@schematics/update                0.6.3
rxjs                              6.2.0
typescript                        2.7.2
webpack                           4.8.3

karma.conf.js

const baseConfig = (config) => ({
  basePath: '',
  frameworks: ['jasmine', '@angular-devkit/build-angular'],
  plugins: [
    require('karma-jasmine'),
    require('karma-chrome-launcher'),
    require('karma-jasmine-html-reporter'),
    require('karma-coverage-istanbul-reporter'),
    require('karma-mocha-reporter'),
    require('@angular-devkit/build-angular/plugins/karma'),
    require('karma-webdriver-launcher')
  ],

  client: {
    clearContext: false // leave Jasmine Spec Runner output visible in browser
  },

  files: [
    {pattern: './src/test.ts', watched: false}
  ],

  mime: {
    'text/x-typescript': ['ts', 'tsx']
  },

  angularCli: {
    environment: 'dev'
  },

  coverageIstanbulReporter: {
    dir: require('path').join(__dirname, 'coverage'), reports: ['html', 'text', 'text-summary'],
    fixWebpackSourcePaths: true
  },

  reporters: config.angularCli && config.angularCli.codeCoverage
    ? ['mocha', 'coverage-istanbul']
    : ['mocha', 'kjhtml'],

  customLaunchers: {
    ChromeDebugging: {
      base: 'Chrome',
      flags: [ '--remote-debugging-port=9333', '--auto-open-devtools-for-tabs', 'http://localhost:9876/debug.html' ]
    },
    ChromeHeadless: {
      base: 'Chrome',
      flags: [
        '--headless',
        '--disable-gpu',
        '--no-sandbox',
        // Without a remote debugging port, Google Chrome exits immediately.
        '--remote-debugging-port=9222',
      ],
    }
  },

  port: 9876,
  colors: true,
  logLevel: config.LOG_INFO,
  autoWatch: false,
  browserNoActivityTimeout: 60000,
  browsers: ['ChromeHeadless'],
  singleRun: false,
  concurrency: Infinity,
  refresh: true
});

test.ts

import './polyfills.ts';

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 const __karma__: any;
declare const 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('./app/', true, /\.ts/);

// And load the modules.
context.keys().map(context);

// Finally, start Karma to run the tests.
__karma__.start();

[stephanmullerNL]

@joeattardi Did you close this issue because you solved it? I'm running into the same problem, could you share your solution?

[joeattardi]

I generated a new application project via ng generate application and just copied everything from test.ts and karma.conf.js in the generated project. That seemed to fix the issue for me.

[stephanmullerNL]

Ah, thanks. I'll give that a shot!

[stephanmullerNL]

Generating a fresh project and using the karma.conf.js from that solved it for me too. Much obliged!

[SaydChada]

Had that issue too, it was because this line in my karma.conf.js :

{
...
files: [
{ pattern: './src/test.ts', watched: false }, // <= maybe its not needed anymore
...
}

[akisiel1]

@SaydChada have you found any documentation of this change? What have you dont with the file './src/test.ts'

EDIT: I have found that files property is now in angular.json: https://stackoverflow.com/a/50426456

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