Why is [object ErrorEvent] thrown only when the tests are all running?

Question

I'm still trying to figure out the angular tests, and I'm struggling with what a failing test. When I'm running the tests with ng-test, the Chrome output shows this error:

CustomerComponent should create
[object ErrorEvent] thrown

And here is the console content:

zone.js:192 Uncaught TypeError: _this.handler.handle is not a function
    at MergeMapSubscriber.project (:9876/_karma_webpack_/webpack:/node_modules/@angular/common/fesm5/http.js:974)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/operators/mergeMap.js:60)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/operators/mergeMap.js:50)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Subscriber.js:54)
    at Observable._subscribe (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/observable/scalar.js:5)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Observable.js:42)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Observable.js:28)
    at MergeMapOperator.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/operators/mergeMap.js:28)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Observable.js:23)
    at FilterOperator.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterOperator.call (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/operators/filter.js:15)
    at ____________________Elapsed_12_ms__At__Mon_Oct_22_2018_15_18_53_GMT_0200__heure_d__t__d_Europe_centrale_ ()
    at Object.onScheduleTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:108)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:401)
    at Object.onScheduleTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:297)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:401)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:232)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:255)
    at scheduleMacroTaskWithCurrentZone (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:1114)
    at :9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:2090

The test file is... Well, the most basic you could find, I suppose.

class MockCustomerService {
  public addUserInformations(): Observable<Customer> {
    return of(new Customer());
  }
  public updateCustomerInformations(): Observable<Customer> {
    return of(new Customer());
  }
}

export class PartialTranslateServiceStub {
  addLangs(langs: Array<string>): void { }
  instant (key: string): any { }
}

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [CustomerComponent, ModalComponent, SecondComponent],
      providers: [FormBuilder, ConfigurationService,
            { provide: TranslateService, useClass: PartialTranslateServiceStub },
            { provide: CustomerService, useClass: MockCustomerService }
      ],
      imports: [FormsModule, ReactiveFormsModule, RouterTestingModule, TranslateModule.forRoot()]
    })
      .compileComponents();
  }));

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

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

I saw that most of the answers were to add an error handler to the subscribers but that's already done.

In addition, I tried to remake the component from scratch and... When I create a new component, the failing test works successfully. Removing the component make the test fail again.

Update

A remark: if I comment the tests that failed, then the problem is moved to the next test. Strange.

Answer 1

Answer

Problem solved. The test running before the one that failed was not correctly done, thus impacting the following. Seems like the problem came from the providers that were not properly mocked: for example, instead of a MockPreviousService, it was more like PreviousService, DependencyOne, DependencyTwo. It was useless in the test case, so getting rid of the declarations and mocking the service did the trick.