res.on() is not a function when trying to mock http request failure in Angular

Question

I'm working on the front-end of an Angular app where I have added an interceptor to handle errors when making http requests. I've tested the interceptor by making simple http requests to broken links and it works. I do not have access to the back-end of the app so we have many mocks in place for development. For our http service we have mocked responses for all the requests. I would like to trigger the interceptor with a mock in the http service but can not seem to make it work. For instance I created the following method in the service:

getAvailableAccounts = (): Observable<Response> => {
   const error = new HttpErrorResponse({ status: 422 });
   return of(error) as any;
};

But when I run the app and it calls this end point I get ERROR TypeError: res.on is not a function, the app stalls, and the interceptor is not properly triggered.

EDIT: Our project uses a generic class to handle responses from http calls. I removed this class from the call and it got rid of the ERROR TypeError: res.on is not a function but the interceptor is still not triggered.

How do I mock an HttpErrorResponse appropriately to trigger the interceptor?