Angular 6 update specs [object ErrorEvent] thrown

Question

I am upgrading an Angular app to version 6 from version 4. Everything is running correctly with ng serve. The problem now is that a bunch of our spec files fail with [object ErrorEvent] thrown. I've seen this before and usually can run the test with --sourceMap=false flag to see a more detailed report, but now I still get this ambiguous error. I've checked that none of the components have any inputs that are undefined. After some research I found some people were having trouble with jasmine-core 3.0.0 and received this error until they went back to 2.99.0, but that did nothing for me either.

The oddest part about all of this is that I can xdescribe a spec (or all of the specs) that fail with this error and then different ones fail that weren't failing before.

Here is the package.json

{
  "name": "enterprise-frontend",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test --browsers=Chrome --code-coverage",
    "lint": "ng lint --type-check",
    "e2e": "ng e2e",
    "compodoc": "./node_modules/.bin/compodoc -p tsconfig.json -s"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.2",
    "@angular/cdk": "^6.0.2",
    "@angular/common": "^6.0.2",
    "@angular/compiler": "^6.0.2",
    "@angular/core": "^6.0.2",
    "@angular/forms": "^6.0.2",
    "@angular/http": "^6.0.2",
    "@angular/material": "^6.0.2",
    "@angular/platform-browser": "^6.0.2",
    "@angular/platform-browser-dynamic": "^6.0.2",
    "@angular/router": "^6.0.2",
    "@auth0/angular-jwt": "^2.0.0",
    "@ngrx/effects": "^6.0.1",
    "@ngrx/router-store": "^6.0.1",
    "@ngrx/store": "^6.0.1",
    "@ngrx/store-devtools": "^6.0.1",
    "auth0-js": "^9.5.1",
    "chart.js": "^2.7.2",
    "core-js": "^2.5.6",
    "lodash": "^4.17.10",
    "ng2-charts": "^1.6.0",
    "ng2-dnd": "^5.0.2",
    "ngx-clipboard": "^11.1.0",
    "rxjs": "^6.1.0",
    "rxjs-compat": "^6.1.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.3",
    "@angular/cli": "^6.0.3",
    "@angular/compiler-cli": "^6.0.2",
    "@angular/language-service": "^6.0.2",
    "@compodoc/compodoc": "^1.1.3",
    "@types/jasmine": "^2.8.7",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "^6.0.111",
    "codelyzer": "^4.3.0",
    "file-saver": "^1.3.8",
    "jasmine-core": "^2.99.1",
    "karma": "~2.0.2",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.4.3",
    "karma-jasmine": "^1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.1.2",
        "ts-node": "~3.2.0",
        "tslint": "^5.10.0",
        "typescript": "^2.7.2"
      }
    }

And here is one of the specs that is currently failing (most of them are much more complicated than this, but that makes me think it's not an issue with the tests themselves):

import { HttpClientModule } from '@angular/common/http';
import { MaterialModule } from '../../modules/material.module';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { NumberPerPageComponent } from './number-per-page.component';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ NumberPerPageComponent ],
      imports: [
        HttpClientModule,
        MaterialModule,
        NoopAnimationsModule
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(NumberPerPageComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should be created', () => {
    expect(component).toBeTruthy();
  });
});

Here's the component itself:

import { Component } from '@angular/core';

@Component({
  selector: 'app-number-per-page',
  templateUrl: './number-per-page.component.html',
  styleUrls: ['./number-per-page.component.scss']
})
export class NumberPerPageComponent {

  resultNumber = 10;

  constructor() { }

}

Answer 1

The issue I was having was importing HttpClientModule into my specs instead of HttpClientTestingModule.

The tests were trying to make the api calls and failing when they were receiving 401 responses from our backend.