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

Answer 1

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: This gives you the spec reporter, 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.