How do I debug a “[object ErrorEvent] thrown” error in my Karma/Jasmine tests?

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 t

Answer 1

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 2

FYI: you can find the exact error thrown just by open DevTools Console once your tests are running.

As a quickfix you can try to run your tests without sourcemaps:

CLI v6.0.8 and above
--source-map=false

CLI v6.0.x early versions
--sourceMap=false

CLI v1.x
--sourcemaps=false

Shortcut ng test -sm=false might also work

There is an open issue on that https://github.com/angular/angular-cli/issues/7296

UPDATE: I had that issue as well, so I just migrated to the latest cli and make sure that all packages are updated in package.json also I fully reinstalled the node_modules so now the issue has gone.

Answer 3

For me it was related to having a promise resolved in the ngOnInit of a component. I had to use async, fakeAsync and tick as well as stubbing out the async service with spyOn

beforeEach(async(
  //... initialise testbed and component
))
beforeEach(fakeAsync(
  // ... setup mocks then call:
  component.ngOnInit()
  tick()
  fixture.detectChanges()
))

Angular - How to unit test component with asynchronous service call

Answer 4

TL;DR: It may be related to testing routing.

I'm getting [object ErrorEvent] thrown too. An hour later, traced it to one line of code.

this.username = this.userService.getUser(this.route.snapshot.paramMap.get('id'))[0];

The problem lies with the test environment attempting to evaluate this.route.snapshot.paramMap.get('id').

If I replace it with 0, [object ErrorEvent] thrown goes away.

My userService has a user like so:

public users = [ ["admin", "First name", "Surname", etc... ] ].

So 0 just gets this user, at index 0.

Otherwise when normally running my app, this.route.snapshot.paramMap.get('id') is evaluated when the user selects a user to edit from my table of users.

So in my HTML, *ngFor="let user of users; index as i" loops to display all the users then routerLink="/edit/{{i}}" so you can click on edit buttons for each user, which when clicked go to e.g. http://localhost:4200/edit/0 to edit the aforementioned admin user's details.

Answer 5

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';

Answer 6

what about cleaning after each test case:

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