Angular 6 Unit Tests: An error was thrown in afterAll\nReferenceError: Can't find variable: $ thrown

Question

When running my unit tests, from time to time, even if they pass, at the end of all the tests running, I will get the following error.

On my Jenkins CI build running PhantomJS:

.PhantomJS 2.1.1 (Linux 0.0.0) ERROR   {     "message": "An error was thrown in afterAll\nReferenceError: Can't find variable: $ thrown",     "str": "An error was thrown in afterAll\nReferenceError: Can't find variable: $ thrown"   } 

Or on Chrome:

Chrome 67.0.3396 (Windows 7 0.0.0) ERROR   {     "message": "An error was thrown in afterAll\n[object ErrorEvent] thrown",     "str": "An error was thrown in afterAll\n[object ErrorEvent] thrown"   } 

I also have really unreliable tests, without changing anything some times they would succeed and other times the same tests would fail, so I knew something weird was going on.

Answer 1

My issue was that I had a race condition in my tests due to a very stupid way of setting up my tests, but I wanted to document it here anyways because I struggled to find the answer to my issue on the internet.

What I had somehow done was to declare two beforeEach functions to setup my test, and one of the two was asynchronous, so I had a race condition where sometimes they ran out of order and failed.

Here is how my test looked:

beforeEach(async(() => {     TestBed.configureTestingModule({       declarations: [ HomeComponent ]     })     .compileComponents();   }));    beforeEach(() => {     fixture = TestBed.createComponent(HomeComponent);     component = fixture.componentInstance;     fixture.detectChanges();   }); 

So to resolve this I put all the setup into one, synchronous beforeEach.

  beforeEach(() => {     TestBed.configureTestingModule({       declarations: [HomeComponent]     }).compileComponents();     fixture = TestBed.createComponent(HomeComponent);     component = fixture.componentInstance;     fixture.detectChanges();   }); 

I wasted too much time trying to figure this out, so I'm putting it here to save someone else.

Answer 2

I had a similar problem, it seems that since Angular v6 & Karma v3 this vague afterAll error has started to appear (https://github.com/jasmine/jasmine/issues/1523). For myself this error doesn't fail the test but fails the suite.

After looking at many answers to this problem, it seems that the cause is nearly always different which makes it hard to find help online. One can hope that a patch update will be added at some point to bubble up a better error.

My Error

[INFO] HeadlessChrome 71.0.3542 (Linux 0.0.0) DialogComponent #apply should save. FAILED [INFO]  Uncaught TypeError: Cannot read property 'nativeElement' of undefined thrown [INFO]       [31m✗ [39m[31mshould save.[39m [INFO]  Uncaught TypeError: Cannot read property 'nativeElement' of undefined thrown [INFO]  [INFO] HeadlessChrome 71.0.3542 (Linux 0.0.0) DialogComponent #apply should save. FAILED [INFO]  Uncaught TypeError: Cannot read property 'nativeElement' of undefined thrown [INFO] HeadlessChrome 71.0.3542 (Linux 0.0.0) DialogComponent #apply should save. FAILED [INFO]  Uncaught TypeError: Cannot read property 'nativeElement' of undefined thrown [INFO] HeadlessChrome 71.0.3542 (Linux 0.0.0) ERROR [INFO]   { [INFO]     "message": "An error was thrown in afterAll\nUncaught TypeError: Cannot read property 'nativeElement' of undefined thrown\nUncaught TypeError: Cannot read property 'nativeElement' of undefined thrown", [INFO]     "str": "An error was thrown in afterAll\nUncaught TypeError: Cannot read property 'nativeElement' of undefined thrown\nUncaught TypeError: Cannot read property 'nativeElement' of undefined thrown" [INFO]   } 

Finding the problematic test

I got this afterAll error message and had no idea what was causing it, or what test triggered it. The first thing I did was install the karma-spec-reporter: npm install karma-spec-reporter --save-dev

Add this to the plugins array in the karma.conf.js file: require('karma-spec-reporter') This gives you the spec reporter, and add spec into the reporters array: reporters: ['spec'],

Next time you run the test you will see the afterAll error in the console after the problematic test.

My Issue / Solution

I found that the test was calling htmlElement.click(). I changed this to: htmlElement.dispatchEvent(new Event('click)) And voila the tests started to pass.

Summary

As a general rule I avoid using .click() on HTMLElement's now. Also when users interact with the UI it's done via events, so it mimics the users actions more correctly which is always a good thing when testing.