Karma Start Fails - HeadlessChrome - ERROR Uncaught [object Object]

Question

I am using Karma to run test on my Angular 4 app. It works locally but when it runs on my host environment (Travis CI) it fails with the following information:

INFO [HeadlessChrome 0.0.0 (Ubuntu 0.0.0)]: Connected on socket vT0QnQaqRkn010dfsw with id 10189531

HeadlessChrome 0.0.0 (Ubuntu 0.0.0): Executed 0 of 180 SUCCESS (0 secs / 0 secs)

e 0.0.0 (Ubuntu 0.0.0): Executed 1 of 180 SUCCESS (0 secs / 0.714 secs)

HeadlessChrome 0.0.0 (Ubuntu 0.0.0) ERROR

  Uncaught [object Object]

  at http://localhost:9876/_karma_webpack_/vendor.bundle.js:14078

I tried following the suggestions (deleting NPM cache, etc) from "Uncaught [object Object]" when running karma tests on Angular but it did not solve my issue.

How can I identify what is causing this Uncaught [object Object] error. What additional steps should I take to troubleshoot?

Answer 1

This is what fixed it for me:

I searched the whole project for occurrences of HttpClientModule in all *.spec.ts files. Turned out I had a few!

Then I replaced all occurrences of

import { HttpClientModule } from '@angular/common/http';

with

import { HttpClientTestingModule } from '@angular/common/http/testing';

And then I made sure that the entry in the imports array of each of my test's TestBed.configureTestingModule was changed from HttpClientModule to HttpClientTestingModule.

And finally I turned my Wifi off and ran the tests again. And voilà: It worketh!

Answer 2

Full disclosure, I'm the guy that fixed this problem with Justin.

The problem is that we were importing modules into our unit tests. These modules have a component that has ngOnInit which makes an HTTP request. The module injects the real component into the test and it tries to make its HTTP request but fails. Because it's out of the normal stack, the stack trace gives us the very unhelpful error Uncaught [object Object].

In order to avoid that problem and for the component to not be undefined we use Christian Nunciato's helpful ng2-mock-component library to make a mock component that takes all the same inputs.

Because the mocked component has its own unit tests, we don't care if the unit tests on the parent component don't test the child at the same time.