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

We were facing similar issues, both with the same intermittent error and the intermittent failing tests. This came up when, after upgrading to Angular 6 we also upgraded to Jasmine 3 wherein running tests in random order is now the default.

As noted by @marsraits below, that such a change was the source of these errors means that our tests were improperly sharing dependencies, and thus the true source of the error is in our own code. That being said, rather than rewriting numerous legacy tests, by turning random off for the test runner we were able to quickly resolve the issue.

We did this by adding this setting in the karma.conf.js:

  config.set({
    client: {
      jasmine: {
        random: false
      }
    }
  })

Answer 2

Another thing which has helped me as well and solved a few of my problems was to add the statement to destroy the fixture after each test

  afterEach(() => {
    fixture.destroy();
  });

Answer 3

One possible problem is that one of your components runs a third-party script that makes a CORS request that fails. (My problem was solved by https://github.com/karma-runner/karma/issues/1268#issuecomment-70422477) This can make tests appear to work on Chrome and fail intermittently on your CI.

When in doubt, follow the advice of Rui (https://stackoverflow.com/a/56662721/3370010) and open up your console, even if all the tests are passing.

Answer 4

In my case

I am using karma-parallel and when I updated the executors number it worked (don't know why)

 parallelOptions: {
      executors: 4, // Earlier it was 5 I have updated it to 4 and it worked
      shardStrategy: 'round-robin',
      ......
 }

Answer 5

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 6

In my case changing the import from Observable to Rx Library has fixed the issue

before:

import { Observable } from 'rxjs/Observable';

After:

import { Observable } from 'rxjs/Rx';