Unit Testing Angular HttpInterceptor: toHaveBeenCalledWith apears never called

Question

I am unit testing a little error-handling interceptor and I want to test that a certain function has been called with arguments. The toHaveBeenCalledWith function gives a "but it was never called" in the console. Does anyone have an idea why this is the case? The other tests seem to work.

Error.interceptor.ts:

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  constructor() {}

  handleError(error: HttpErrorResponse): Observable<any> {
    let errorMsg = '';
    if (error.status === HTTP_STATUS_ABORTED) {
      errorMsg = 'An client-side or network error occurred';
    } else if (error.status === HttpStatusCode.InternalServerError) {
      errorMsg = 'An internal server error occurred';
    } else {
      errorMsg = `Backend returned code ${error.status}`;
    }

    console.error(errorMsg, ', body was: ', error.error);

    // Return an observable with a user-facing error message.
    return throwError(() => {
      return new Error(errorMsg);
      // return error;
    });
  }

  intercept(
    request: HttpRequest<unknown>,
    next: HttpHandler
  ): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(catchError(this.handleError));
  }
}

Error.interceptor.spec.ts:

describe('ErrorInterceptor', () => {
  let client: HttpClient;
  let httpController: HttpTestingController;
  let interceptor: ErrorInterceptor;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [
        ErrorInterceptor,
        {
          provide: HTTP_INTERCEPTORS,
          useClass: ErrorInterceptor,
          multi: true,
        },
      ],
    });

    client = TestBed.inject(HttpClient);
    httpController = TestBed.inject(HttpTestingController);
    interceptor = TestBed.inject(ErrorInterceptor);
    spyOn(console, 'error');
  });

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

  it('should call handleError with the correct errorObject on code 400', () => {
    spyOn(interceptor, 'handleError').and.callThrough();

    const expectedErrorResponse = new HttpErrorResponse({
      url: '/target',
      status: HttpStatusCode.BadRequest,
      statusText: 'Bad Request',
      error: new ProgressEvent('ERROR', {}),
    });

    client.get('/target').subscribe({
      error: (error: Error) => {
        expect(error).toBeTruthy();
        expect(error).toEqual(new Error('Backend returned code 400'));

        expect(console.error).toHaveBeenCalledWith(
          'Backend returned code 400',
          ', body was: ',
          expectedErrorResponse.error
        );

        expect(interceptor.handleError).toHaveBeenCalledWith(
          expectedErrorResponse
        );
      },
    });

    const httpRequest: HttpRequest<any> = new HttpRequest('GET', '/target');
    const err = new ProgressEvent('ERROR', {});

    httpController.expectOne(httpRequest).error(err, {
      status: HttpStatusCode.BadRequest,
      statusText: 'Bad Request',
    });
  });

  afterEach(() => {
    httpController.verify();
  });
});

I tried to test whether the interceptor calls the handleError function. I expected the expect(interceptor.handleError).toHaveBeenCalledWith(expectedErrorResponse); to test that it calls the function and return a truthy expect.

EDIT: The fix found by Jonas Ruth:

-> Call done in the subscribe block of the test

  it('should call handleError with the correct errorObject on code 400', (done: DoneFn) => {
    const spyOnHandleError = spyOn(
      interceptor,
      'handleError'
    ).and.callThrough();

    const expectedErrorResponse = new HttpErrorResponse({
      url: '/target',
      status: HttpStatusCode.BadRequest,
      statusText: 'Bad Request',
      error: new ProgressEvent('ERROR', {}),
    });

    client.get('/target').subscribe({
      next: (returnValue) => {
        fail(`Expected error but got "${returnValue}"`);
      },

      error: (error: Error) => {
        expect(error).toBeTruthy();
        expect(error).toEqual(new Error('Backend returned code 400'));

        expect(interceptor.handleError).toHaveBeenCalledWith(
          expectedErrorResponse
        );

        done();
      },

      complete: () => fail('Complete must not be called'),
    });

    const httpRequest: HttpRequest<any> = new HttpRequest('GET', '/target');
    const err = new ProgressEvent('ERROR', {});

    httpController.expectOne(httpRequest).error(err, {
      status: HttpStatusCode.BadRequest,
      statusText: 'Bad Request',
    });
  });

Providers: make sure the instance is the same

  ErrorInterceptor, // instance A
  {
    provide: HTTP_INTERCEPTORS,
    useExisting: ErrorInterceptor, // instance A (will use the same instance)
    multi: true,
  },
],

-> error.interceptor.ts.

.pipe(catchError((err) => this.handleError(err)));```

Answer 1

After investigating considerably I came up with a solution to your problem.

The interceptor instance being spied is not the same instance that Angular is using.

// error.interceptor.ts

providers: [
  ErrorInterceptor, // instance A (the instance spied)
  {
    provide: HTTP_INTERCEPTORS,
    useClass: ErrorInterceptor, // instance B (another instance used by Angular)
    multi: true,
  },
],

So you need to change useClass to useExisting in the providers config:

// error.interceptor.ts

providers: [
  ErrorInterceptor, // instance A
  {
    provide: HTTP_INTERCEPTORS,
    useExisting: ErrorInterceptor, // instance A (will use the same instance)
    multi: true,
  },
],

Now the error response expectation will be called, but the spied handleError method will receive two values from catchError that corresponds to error and caught because handleError was declared the following way in the intercept method. So the expectation will not match and fail.

// error.interceptor.ts

.pipe(catchError(this.handleError))

Output (with comment):

Expected spy handleError to have been called with:
          [ HttpErrorResponse({ headers: HttpHeaders({ normalizedNames: Map(  ), lazyUpdate: null, headers: Map(  ) }), status: 400, statusText: 'Bad Request', url: '/target', ok: false, name: 'HttpErrorResponse', message: 'Http failure response for /target: 400 Bad Request', error: [object ProgressEvent] }) ]
        but actual calls were:
          [ 
            HttpErrorResponse({ headers: HttpHeaders({ normalizedNames: Map(  ), lazyUpdate: null, headers: Map(  ) }), status: 400, statusText: 'Bad Request', url: '/target', ok: false, name: 'HttpErrorResponse', message: 'Http failure response for /target: 400 Bad Request', error: [object ProgressEvent] }), 
            // below observable was not expected
            Observable({ source: Observable({ _subscribe: Function }), operator: Function }) 
         ].

I suggest two options as a solution to match the error response expectation:

(1) you can change the way you are passing the handleError method to something like the following code:

// error.interceptor.ts

.pipe(catchError((err) => this.handleError(err)));

(2) Or change how the spy and expectation is declared but keeping its equivalence:

// error.interceptor.spec.ts

// add spy into a variable to further use
const spyOnHandleError = spyOn(interceptor, 'handleError').and.callThrough();

// error.interceptor.spec.ts

// break the error response expectation into two expectations
// that use spyOnHandleError to get some useful information

// expect to be called
expect(spyOnHandleError.calls.count()).toBeGreaterThan(0);

// expect the most recent call first argument to match the `expectedErrorResponse`  
expect(spyOnHandleError.calls.mostRecent().args[0]).toEqual(expectedErrorResponse);

With these changes your test will run successfully!

Final output:

✔ Browser application bundle generation complete.
Chrome 113.0.0.0 (Linux x86_64): Executed 2 of 2 SUCCESS (0.033 secs / 0.021 secs)
TOTAL: 2 SUCCESS

Completely updated answer