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

It appeared to be an async problem, because after I added enough its in one of my component specs, I was able to get a usable error message which pointed to a file and line within that file (it was related to paramMap.

In the spec that tested ParamMap, I just added:

  describe('this test', () => {
    it('will succeed', () => {
      expect(true).toBeTruthy();
    });

    it('will succeed', () => {
      expect(true).toBeTruthy();
    });

    it('will succeed', () => {
      expect(true).toBeTruthy();
    });

    it('will succeed', () => {
      expect(true).toBeTruthy();
    });
  });

Answer 2

[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 3

For me, this was caused by not defining an error handler for an api I was subscribed to.

My fix just involved adding the block of code to handle (err) below:

it('reports an error to subscribers of api calls if not authenticated', (done) => {
    let obsDataFound = dataService.find(1);
    obsDataFound.subscribe((app) => {
        // not expecting this block to be called
        done();
    }, (err) => {
        // This is the err block that I added that solved the problem
        expect(true).toBeTruthy();
        done();
    });

    let testRequest = httpMock.expectOne({method: 'GET'});
    const mockErrorResponse = { status: 401, statusText: 'Unauthorized test status message' };
    testRequest.flush(appTest, mockErrorResponse);
});

Answer 4

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 5

I was using a proxy in my application defined in proxy.conf.json like:

'/api': { 'target': 'some path', 'changeOrigin': false }

Because Karma wasn't aware of this proxy, it kept trowing errors in the console that the API endpoint could not be found. So after looking in the Karma documentation, I found out that what I could do was to add the "proxies" property in karma.conf.js with the same object from the proxy.conf.json:

proxies: { '/api': { 'target': 'some path', 'changeOrigin': false }}

The error in the console was gone, and the [object errorEvent] was no longer thrown.

Answer 6

In my case the problem was with the service, as one of the object wil be undefined during tests running.

Service code sample was something like below access to dom,

  const elem = this.document.querySelector(element) as HTMLElement;
  elem.scrollIntoView({param1: ''});

The specs referring to this service were failing with the error '[object ErrorEvent] thrown'.

I mocked my service object inside all the specs which were referring to this and the issue got resolved.

Mock service

class MockService {
serviceMethod(div) : void {
  testElement = document.querySelector('div') as HTMLElement;
  return testElement;
  } 
}

And use this mock service object in providers as below,

beforeEach(async(() => {

TestBed.configureTestingModule({
  declarations: [Component],
  providers: [
     { provide: Service, useClass: MockService },
    ],
})
  .compileComponents();
}));