How do I debug a “[object ErrorEvent] thrown” erro

Question

I have several failing tests that only output [object ErrorEvent] thrown. I don't see anything in the console that helps me pinpoint the offending code. Is there something I need to do to track these down?

[EDIT]: I'm running Karma v1.70, Jasmine v2.7.0

Answer 1

This is because the jasmine framework can not handle the ErrorEvent type so it does not extract the error message and calls error.toString() on that object instead.

I just filed an issue at jasmine repo https://github.com/jasmine/jasmine/issues/1594

As long as it is not fixed, you can temporarily patch your installed jasmine package in the node_modules folder. In my case it is

node_modules/jasmine/node_modules/lib/jasmine-core/jasmine.js

and then change the implementation of the ExceptionFormatter from this

if (error.name && error.message) {
    message += error.name + ': ' + error.message;
} else {
    message += error.toString() + ' thrown';
}

to this

if (error.name && error.message) {
    message += error.name + ': ' + error.message;
} else if (error.message) {
    message += error.message;
} else {
    message += error.toString() + ' thrown';
}

It helps to identify the issue.

Answer 2

what about cleaning after each test case:

  afterEach(() => {
    TestBed.resetTestingModule();
  })

Answer 3

[object ErrorEvent] thrown

This error shows that you have something undefined. The easiest way to debug it from my experience is :

it('should create', () => {
    console.log(component);
    // You can check in the browser log which property is undefined
    });

Answer 4

If sourcemap=false doesn't help, try to 1) open your browser running the tests 2) click debug button 3) open the console

The error will be there

Answer 5

You may have a race or an async test that isn't set up quite right or is used incorrectly. I would assume that the debug case needs to be fixed and ignore that the command line passes. Just keep refreshing the karma test runner (browser) in case the error [object ErrorEvent] thrown appears intermittently, then make sure you have implemented the async condition correctly.

Hopefully this works.

Answer 6

Try if you get a more descriptive error message by running the test from the terminal, like this:

ng test -sm=false

In your test, you can replace

it('should...')

with

fit('should...') 

Now only tests preceded by fit will run. To leave the browser open after running the test, run the test like this:

ng test -sm=false --single-run false

---

Personally, I have encountered this error twice. Both were only triggered when calling fixture.detectChanges().

The first time, I solved it by using string interpolation more safely in my .html file.

Unsafe example:

<p>{{user.firstName}}</p>

Safe(r) example (note the question mark):

<p>{{user?.firstName}}</p>

The same may apply to property binding:

<p [innerText]="user?.firstName"></p>

---

The second time, I was using a DatePipe in my .html file, but the mock property that I used it on was not a date.

.html file:

<p>{{startDate | date: 'dd-MM-yyyy'}}</p>

.ts (mock-data) file (wrong):

let startDate = 'blablah';

.ts (mock-data) file (correct):

let startDate = '2018-01-26';