Angular-cli: ng test - TypeError: (msg || "").replace is not a function

[alvipeo]

When you generate new project with 'ng new' and immediately run tests - they work. But when going a bit further and adding some dependencies (like jQuery, Bootstrap 4 and Trumbowyg) tests starts to fail right away with TypeError: (msg || "").replace is not a function. Here's the output:

10 05 2016 04:19:17.581:WARN [karma]: No captured browser, open http://localhost:9876/
10 05 2016 04:19:17.595:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
10 05 2016 04:19:17.600:INFO [launcher]: Starting browser Chrome
10 05 2016 04:19:18.359:INFO [Chrome 50.0.2661 (Windows 10 0.0.0)]: Connected on socket /#-kPxpXeuzKFiXoPcAAAA with id 7707656
Missing error handler on `socket`.
TypeError: (msg || "").replace is not a function
    at D:\Documents\Visual Studio 2015\Projects\TestAppCLI\node_modules\karma\lib\reporter.js:45:23
    at onBrowserError (D:\Documents\Visual Studio 2015\Projects\TestAppCLI\node_modules\karma\lib\reporters\base.js:58:60)
    at null.<anonymous> (D:\Documents\Visual Studio 2015\Projects\TestAppCLI\node_modules\karma\lib\events.js:13:22)
    at emitTwo (events.js:100:13)
    at emit (events.js:185:7)
    at onKarmaError (D:\Documents\Visual Studio 2015\Projects\TestAppCLI\node_modules\karma\lib\browser.js:95:13)
    at Socket.<anonymous> (D:\Documents\Visual Studio 2015\Projects\TestAppCLI\node_modules\karma\lib\events.js:13:22)
    at emitOne (events.js:95:20)
    at Socket.emit (events.js:182:7)
    at Socket.onevent (D:\Documents\Visual Studio 2015\Projects\TestAppCLI\node_modules\karma\node_modules\socket.io\lib\socket.js:335:8)
    at Socket.onpacket (D:\Documents\Visual Studio 2015\Projects\TestAppCLI\node_modules\karma\node_modules\socket.io\lib\socket.js:295:12)
    at Client.ondecoded (D:\Documents\Visual Studio 2015\Projects\TestAppCLI\node_modules\karma\node_modules\socket.io\lib\client.js:193:14)
    at Decoder.Emitter.emit (D:\Documents\Visual Studio 2015\Projects\TestAppCLI\node_modules\karma\node_modules\socket.io\node_modules\socket.io-parser\node_modules\component-emitter\index.js:134:20)
    at Decoder.add (D:\Documents\Visual Studio 2015\Projects\TestAppCLI\node_modules\karma\node_modules\socket.io\node_modules\socket.io-parser\index.js:247:12)
    at Client.ondata (D:\Documents\Visual Studio 2015\Projects\TestAppCLI\node_modules\karma\node_modules\socket.io\lib\client.js:175:18)
    at emitOne (events.js:90:13)
    at Socket.emit (events.js:182:7)
    at Socket.onPacket (D:\Documents\Visual Studio 2015\Projects\TestAppCLI\node_modules\karma\node_modules\socket.io\node_modules\engine.io\lib\socket.js:101:14)
    at emitOne (events.js:90:13)
    at WebSocket.emit (events.js:182:7)
    at WebSocket.Transport.onPacket (D:\Documents\Visual Studio 2015\Projects\TestAppCLI\node_modules\karma\node_modules\socket.io\node_modules\engine.io\lib\transport.js:104:8)
    at WebSocket.Transport.onData (D:\Documents\Visual Studio 2015\Projects\TestAppCLI\node_modules\karma\node_modules\socket.io\node_modules\engine.io\lib\transport.js:115:8)
10 05 2016 04:19:21.367:WARN [Chrome 50.0.2661 (Windows 10 0.0.0)]: Disconnected (1 times)

Does anyone know how to fix it? It's really annoying. I already tried to recreate project from scratch, step-by-step => no luck :(

[cladera]

We came across this very issue as well.

We fixed it by adding symbol-observable dependency:

//app/system-config.ts
const map: any = {
  'symbol-observable': 'vendor/symbol-observable',
  ...
}

const packages: any = {
   'symbol-observable': {
    main: 'index'
  },
  ...
}

//angular-cli-build.js
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ...
      'symbol-observable/*.js',
      ...
    ]
  });
};

[alvipeo]

Thanks, but that didn't help. Same error.

[Brocco]

Are your new tests dependent upon the newly added dependencies? If so (which they should otherwise why add them) then ensure that they are either mocked and/or provided within you tests.

[alvipeo]

I really don't think there's something special in the tests. And I don't mind sharing the project - zip archive

ng build and ng serve work.

[alvipeo]

This issue is the only obstacle which stops me from actually working on the project. Not even router.

[dherges]

Can you verify in the test browser if there is a 404 error? This could be down to system.js not finding some resources.

Example:

11 05 2016 16:44:28.701:WARN [web-server]: 404: /base/dist/vendor/ng2-bootstrap/ng2-bootstrap

For that particular ng2-bootstrap, solution in system-config.ts might be:

/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

/** User packages configuration. */
const packages: any = {
  'ng2-bootstrap': {}
};

[alvipeo]

no 404's at all in test (Chrome). btw, I don't use ng2-bootstrap.

[alvipeo]

made a small fix, not related to tests - same zip archive

[hansl]

It seems like you're including some tether script in your index.html. You might want to add it to karma.conf.js and set include: true. Basically your scripts are loading in the wrong order in your tests, and jQuery isn't loaded first.

[alvipeo]

Tried that - that doesn't work. Here's my karma.config.js:

module.exports = function (config) {
  config.set({
    basePath: '..',
    frameworks: ['jasmine'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher')
    ],
    customLaunchers: {
      // chrome setup for travis CI using chromium
      Chrome_travis_ci: {
        base: 'Chrome',
        flags: ['--no-sandbox']
      }
    },
    files: [
      { pattern: 'dist/vendor/es6-shim/es6-shim.js', included: true, watched: false },
      { pattern: 'dist/vendor/zone.js/dist/zone.js', included: true, watched: false },
      /* Tether */
      { pattern: 'dist/vendor/jquery/dist/jquery.min.js', included: true, watched: false },
      { pattern: 'dist/vendor/tether/dist/js/tether.min.js', included: true, watched: false },
      { pattern: 'dist/vendor/bootstrap/dist/js/bootstrap.min.js', included: true, watched: false },

      { pattern: 'dist/vendor/reflect-metadata/Reflect.js', included: true, watched: false },
      { pattern: 'dist/vendor/systemjs/dist/system-polyfills.js', included: true, watched: false },
      { pattern: 'dist/vendor/systemjs/dist/system.src.js', included: true, watched: false },
      { pattern: 'dist/vendor/zone.js/dist/async-test.js', included: true, watched: false },

      { pattern: 'config/karma-test-shim.js', included: true, watched: true },


      // Distribution folder.
      { pattern: 'dist/**/*', included: false, watched: true }
    ],
    exclude: [
      // Vendor packages might include spec files. We don't want to use those.
      'dist/vendor/**/*.spec.js'
    ],
    preprocessors: {},
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

[neilkyoung]

Did you manage to resolve this? I am also now receiving this error. I have commented out all my .spec.ts files and the error still persists! :-(

I am using CLI version 1.0.0-beta.9 but still happens after upgrading to the latest - beta.10.

Full error log below:

Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
20 07 2016 16:17:16.546:WARN [karma]: No captured browser, open http://localhost:9876/
20 07 2016 16:17:16.572:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
20 07 2016 16:17:16.579:INFO [launcher]: Starting browser Chrome
20 07 2016 16:17:18.725:INFO [Chrome 51.0.2704 (Mac OS X 10.11.1)]: Connected on socket /#8LrbM8q1Fg-lAEBjAAAA with id 22825427
20 07 2016 16:17:21.979:WARN [web-server]: 404: /base/dist/traceur
Missing error handler on `socket`.
TypeError: (msg || "").replace is not a function
    at /Users/substance/Sites/angular-2-testing/node_modules/karma/lib/reporter.js:45:23
    at onBrowserError (/Users/substance/Sites/angular-2-testing/node_modules/karma/lib/reporters/base.js:58:60)
    at null.<anonymous> (/Users/substance/Sites/angular-2-testing/node_modules/karma/lib/events.js:13:22)
    at emitTwo (events.js:87:13)
    at emit (events.js:172:7)
    at onKarmaError (/Users/substance/Sites/angular-2-testing/node_modules/karma/lib/browser.js:95:13)
    at Socket.<anonymous> (/Users/substance/Sites/angular-2-testing/node_modules/karma/lib/events.js:13:22)
    at emitOne (events.js:82:20)
    at Socket.emit (events.js:169:7)
    at Socket.onevent (/Users/substance/Sites/angular-2-testing/node_modules/socket.io/lib/socket.js:335:8)
    at Socket.onpacket (/Users/substance/Sites/angular-2-testing/node_modules/socket.io/lib/socket.js:295:12)
    at Client.ondecoded (/Users/substance/Sites/angular-2-testing/node_modules/socket.io/lib/client.js:193:14)
    at Decoder.Emitter.emit (/Users/substance/Sites/angular-2-testing/node_modules/component-emitter/index.js:134:20)
    at Decoder.add (/Users/substance/Sites/angular-2-testing/node_modules/socket.io-parser/index.js:247:12)
    at Client.ondata (/Users/substance/Sites/angular-2-testing/node_modules/socket.io/lib/client.js:175:18)
    at emitOne (events.js:77:13)
20 07 2016 16:17:23.999:WARN [Chrome 51.0.2704 (Mac OS X 10.11.1)]: Disconnected (1 times)

[sonicparke]

I am also receiving this error using CLI version 1.0.0-beta.9. Haven't tried beta.10 yet.

It only happens when I try to return a mocked Observable like this:

class MockClientEnvironmentsService {
  public getData() {
    return <Observable<RecentIndexesItem[]>> new Observable((observer) => {
      observer.next([
        new ClientEnvironmentItem()
      ]);
    })
  }
}

When I comment out the return block all is well.

Here's the error for reference:

20 07 2016 10:39:19.400:WARN [web-server]: 404: /base/dist/vendor/rxjs/index.js
Missing error handler on `socket`.
TypeError: (msg || "").replace is not a function
    at /Users/bmcalister/Documents/DEV/platform-indexing-dashboard/node_modules/kar
ma/lib/reporter.js:45:23
    at onBrowserError (/Users/bmcalister/Documents/DEV/platform-indexing-dashboard/
node_modules/karma/lib/reporters/base.js:58:60)
    at .<anonymous> (/Users/bmcalister/Documents/DEV/platform-indexing-dashboard/no
de_modules/karma/lib/events.js:13:22)
    at emitTwo (events.js:106:13)
    at emit (events.js:191:7)
    at onKarmaError (/Users/bmcalister/Documents/DEV/platform-indexing-dashboard/no
de_modules/karma/lib/browser.js:95:13)
    at Socket.<anonymous> (/Users/bmcalister/Documents/DEV/platform-indexing-dashbo
ard/node_modules/karma/lib/events.js:13:22)
    at emitOne (events.js:101:20)
    at Socket.emit (events.js:188:7)
    at Socket.onevent (/Users/bmcalister/Documents/DEV/platform-indexing-dashboard/
node_modules/socket.io/lib/socket.js:335:8)
    at Socket.onpacket (/Users/bmcalister/Documents/DEV/platform-indexing-dashboard
/node_modules/socket.io/lib/socket.js:295:12)
    at Client.ondecoded (/Users/bmcalister/Documents/DEV/platform-indexing-dashboar
d/node_modules/socket.io/lib/client.js:193:14)
    at Decoder.Emitter.emit (/Users/bmcalister/Documents/DEV/platform-indexing-dash
board/node_modules/component-emitter/index.js:134:20)
    at Decoder.add (/Users/bmcalister/Documents/DEV/platform-indexing-dashboard/nod
e_modules/socket.io-parser/index.js:247:12)
    at Client.ondata (/Users/bmcalister/Documents/DEV/platform-indexing-dashboard/n
ode_modules/socket.io/lib/client.js:175:18)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
    at Socket.onPacket (/Users/bmcalister/Documents/DEV/platform-indexing-dashboard
/node_modules/engine.io/lib/socket.js:101:14)
    at emitOne (events.js:96:13)
    at WebSocket.emit (events.js:188:7)
    at WebSocket.Transport.onPacket (/Users/bmcalister/Documents/DEV/platform-index
ing-dashboard/node_modules/engine.io/lib/transport.js:104:8)
    at WebSocket.Transport.onData (/Users/bmcalister/Documents/DEV/platform-indexin
g-dashboard/node_modules/engine.io/lib/transport.js:115:8)
20 07 2016 10:39:21.531:WARN [Chrome 51.0.2704 (Mac OS X 10.11.5)]: Disconnected (1
 times)

[saransh94]

I'm facing the same issue, below is my index.html file where I'm loading all the libraries and karma.conf.js file. I would greatly appreciate if anybody can review them and point out where am I making a mistake:

// index.html

<head>
<meta charset="utf-8">
<title>Test</title>
<base href="/"> {{content-for 'head'}}
<link rel="icon" type="image/x-icon" href="favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="styles/jquery-ui.min.css">
<link rel="stylesheet" href="styles/bootstrap.css">
<link rel="stylesheet" href="styles/test_header.css" />
<link rel="stylesheet" href="styles/test_submission.css" />

<link rel="stylesheet" type="text/css" href="vendor/primeui/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="vendor/primeui/primeui-ng-all.min.css" />
<link rel="stylesheet" type="text/css" href="vendor/pikaday/css/pikaday.css">
<link rel="stylesheet" type="text/css" href="styles/font-awesome.min.css" />
</head>

<body>
 <main>
    <br>
    <span>loading...</span>
  </div>
</aoma-app>
  </main>

<script src="vendor/es6-shim/es6-shim.js"></script>
<script src="vendor/reflect-metadata/Reflect.js"></script>
<script src="vendor/systemjs/dist/system-polyfills.js"></script>
<script src="vendor/systemjs/dist/system.src.js"></script>
<script src="vendor/zone.js/dist/zone.js"></script>

<!--3rd party libs-->
<script src="lib/jquery-2.2.3.min.js"></script>
<script src="lib/jquery-ui.min.js"></script>
<script src="lib/sparkmd5.min.js"></script>
<script src="vendor/resumablejs/resumable.js"></script>
<script src="vendor/moment/moment.js"></script>
<script src="vendor/pikaday/pikaday.js"></script>

  <script>

   <!--{{#each scripts.polyfills}}-->
     <!--<script src="{{.}}"></script>-->
   <!--{{/each}}-->
  System.import('system-config.js').then(function () {
    System.import('main');
  }).catch(console.error.bind(console));
 </script>
</body>

 </html>


// 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'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher')
    ],
    customLaunchers: {
      // chrome setup for travis CI using chromium
      Chrome_travis_ci: {
        base: 'Chrome',
        flags: ['--no-sandbox']
      }
    },
    files: [
      { pattern: 'dist/vendor/es6-shim/es6-shim.js', included: true, watched: true },
      { pattern: 'dist/vendor/zone.js/dist/zone.js', included: true, watched: true },
      { pattern: 'dist/vendor/reflect-metadata/Reflect.js', included: true, watched: true },
      { pattern: 'dist/vendor/systemjs/dist/system-polyfills.js', included: true, watched: true },
      { pattern: 'dist/vendor/systemjs/dist/system.src.js', included: true, watched: true },
      { pattern: 'dist/vendor/zone.js/dist/async-test.js', included: true, watched: true },
      { pattern: 'dist/vendor/zone.js/dist/fake-async-test.js', included: true, watched: true },
      { pattern: 'dist/vendor/resumablejs/resumable.js', included: true, watched: true },
      { pattern: 'dist/vendor/moment/moment.js', included: true, watched: true },
      { pattern: 'dist/vendor/pikaday/pikaday.js', included: true, watched: true },

      { pattern: 'config/karma-test-shim.js', included: true, watched: true },

      // Distribution folder.
      { pattern: 'dist/**/*', included: false, watched: true }
    ],
    exclude: [
      // Vendor packages might include spec files. We don't want to use those.
      'dist/vendor/**/*.spec.js'
    ],
    preprocessors: {},
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
   autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

[hantsy]

I got the similar error when Angular CLI is upgraded to 1.0.0-beta.11-webpack.2 and @angular2-material to 2.0.0-alpha.7-4, when run ng test in the command line, and got the following info.

Missing error handler on `socket`.                                              
TypeError: (msg || "").replace is not a function                                
    at E:\hantsylabs\angular2-sample\node_modules\karma\lib\reporter.js:45:23   
    at onBrowserError (E:\hantsylabs\angular2-sample\node_modules\karma\lib\repo
rters\base.js:58:60)                                                            
    at .<anonymous> (E:\hantsylabs\angular2-sample\node_modules\karma\lib\events
.js:13:22)                                                                      
    at emitTwo (events.js:111:20)                                               
    at emit (events.js:191:7)                                                   
    at onKarmaError (E:\hantsylabs\angular2-sample\node_modules\karma\lib\browse
r.js:95:13)                                                                     
    at Socket.<anonymous> (E:\hantsylabs\angular2-sample\node_modules\karma\lib\
events.js:13:22)                                                                
    at emitOne (events.js:101:20)                                               
    at Socket.emit (events.js:188:7)                                            
    at Socket.onevent (E:\hantsylabs\angular2-sample\node_modules\socket.io\lib\
socket.js:335:8)                                                                
    at Socket.onpacket (E:\hantsylabs\angular2-sample\node_modules\socket.io\lib
\socket.js:295:12)                                                              
    at Client.ondecoded (E:\hantsylabs\angular2-sample\node_modules\socket.io\li
b\client.js:193:14)                                                             
    at Decoder.Emitter.emit (E:\hantsylabs\angular2-sample\node_modules\componen
t-emitter\index.js:134:20)                                                      
    at Decoder.add (E:\hantsylabs\angular2-sample\node_modules\socket.io-parser\
index.js:247:12)                                                                
    at Client.ondata (E:\hantsylabs\angular2-sample\node_modules\socket.io\lib\c
lient.js:175:18)                                                                
    at emitOne (events.js:96:13)                                                
    at Socket.emit (events.js:188:7)                                            
    at Socket.onPacket (E:\hantsylabs\angular2-sample\node_modules\engine.io\lib
\socket.js:101:14)                                                              
    at emitOne (events.js:96:13)                                                
    at WebSocket.emit (events.js:188:7)                                         
    at WebSocket.Transport.onPacket (E:\hantsylabs\angular2-sample\node_modules\
engine.io\lib\transport.js:104:8)                                               
    at WebSocket.Transport.onData (E:\hantsylabs\angular2-sample\node_modules\en
gine.io\lib\transport.js:115:8)                                                 
23 08 2016 22:47:01.612:DEBUG [Chrome 52.0.2743 (Windows 10 0.0.0)]: Disconnecte
d during run, waiting 2000ms for reconnecting.                                  

[filipesilva]

Reopening since it seems this problem has resurfaced on the webpack version.

If you can get me a _minimal reproducible example repo_ I can take a stab at debugging it.

[hantsy]

@filipesilva I have been working on my angular 2 sample
Currently I just want to add unit tests and then add e2e test in future.

Currently includes only some small tests for PostSevice and PostsComponent, but all do not work when upgraded to webpack.

[filipesilva]

I really need a minimal example though, not a full blown app/sample. It's very hard to debug these problems in the context of a full app.

Something like the result of an ng new and after that the minimal code to reproduce the issue.

[paprende]

Is there any workaround for this? I'm getting the same issue.

[LMFinney]

When I've had this problem, it has meant that there was a TypeScript compilation error someplace else in the code. So, once I fixed all of the errors, the problem went away.

This error is unhelpful because it hides the actual problem, but perhaps you'll be fine if there are other errors that you can clean up.

[vigohe]

@sonicparke I also have the same issue when calling a mocked observable. To solve it you need to add this at "system-config.ts". I had only try it with "angular-cli: 1.0.0-beta.9".

/** Map relative paths to URLs. */
const map: any = {
  'rxjs': 'vendor/rxjs',
  ...
};

/** User packages configuration. */
const packages: any = {
  'rxjs': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'Rx.js'
  },
  ...
};

[azanebrain]

The only solution that worked for me was starting a new project with angular-cli at the newest version and migrating the config files over. There were too many small changes to track down the exact culprit

[catull]

@hantsy Your example from github works for me with ng 1.0.0-beta.24.
I successfully ng build it, then I ng serve'd it up. See the attached screenshot.

[catull]

@alvipeo Do you still experience the issue, or did you revolve it. Unfortunately, neither of the attached ZIP files are available anymore.

[Brocco]

The original issue has been verified to be working by @catull, closing for now. If issue is still occurring for @alvipeo please comment and we can reopen.

[azanebrain]

I have a small update on this, the tick method was causing issues for me. Removing all references to tick will get the tests running again. Not ideal, but at least I can run some of my tests

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