I have a mock service

```
export class DataServiceStub {

  numbers$ = of([1,2,3,4,5,6]).pipe(
    switchMap((data: number[]) => {
      if (this._error) {
        return throwError(this._error);
      }
      return of(data);
    });

  private _error: string;

  setError(msg: string) {
    this._error = msg;
  }

}

```

And I am going to test an error case in a component which uses the service

```
it('should show an error message', async(() => {
    const errorMessage = `Fetch data error`;
    testDataService.setError(errorMessage);
    // spyOnProperty(dataStub, 'numbers$').and.returnValue(throwError(errorMessage));
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('.error').textContent).toContain(errorMessage);
}));

```

The component looks like this 

```
@Component({
  selector: 'app-root',
  template: `
    <div *ngFor="let num of numbers$ | async">...</div>
    <div *ngIf="error$ | async as error" class="error">{{error}}</div>
  `
})
export class AppComponent {
  numbers$ = this._dataService.numbers$;
  error$ = this._dataService.numbers$.pipe(
    filter(() => false),
    catchError((error: string) => of(error))
  );
}

```

But the error effects the whole test process.
[![enter image description here](https://i.stack.imgur.com/znHCp.png)](https://i.stack.imgur.com/znHCp.png)

How can I avoid such a result?