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 similar issue as well. In my angular 10 project. Out of 10 times, 8 times it would fail with afterall error. Turns out, in spec.ts files, the imports should have HttpClientTestingModule instead of HttpClientModule. Try this. It might solve the random error in Afterall issue.

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: 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.

Answer 3

My specific issue with this error was caused by not mocking sub-components of the component I was testing. In this case I had a homepage component with two sub components, which required declarations for the sub components, which I failed to mock.

As a result the sub components had real dependencies which would intermittently cause the tests to fail in this non-obvious manner (it looks like different tests are randomly failing, but it is not the case).

Mocking as follows works pretty well in this case:

@Component({
    selector: 'app-exercise',
    template: '<p>Mock Exercise Component</p>'
})
class MockExerciseComponent {
}

@Component({
    selector: 'app-user',
    template: '<p>Mock User Component</p>'
})
class MockUserComponent {
}

describe('HomepageComponent', () => {
    let component: HomepageComponent;
    let fixture: ComponentFixture<HomepageComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            // note you need to mock sub components!
            declarations: [HomepageComponent, MockExerciseComponent, MockUserComponent],

Answer 4

When this error happens, check the browser opened by karma and check its console for errors. Typically there will be a stack trace there which will help you fix the issue. This also applies for other errors thrown by karma which are not informative.