RxJS 6下Angular 6拦截器tap与catchError操作符单元测试问题

你现在的问题是没法直接监听tap和catchError这两个操作符的调用，其实核心原因是它们是RxJS管道里的纯函数操作符，不是某个对象的实例方法，没法直接用spyOn来监听。正确的做法是模拟Observable的流，触发对应的场景（成功响应、401错误等），然后验证对应的业务逻辑是否执行。

我来给你一步步拆解可行的测试方案：

第一步：准备测试依赖的模拟对象 #

首先要正确模拟next.handle的返回值，让它返回可订阅的Observable，这样才能触发tap和catchError里的逻辑。同时要模拟你的AuthService，方便验证loginRedirect这类方法是否被调用。

// 在测试的beforeEach块中准备模拟对象
let interceptor: AuthInterceptor;
let authServiceSpy: jasmine.SpyObj<AuthService>;

beforeEach(() => {
  // 创建AuthService的间谍对象，包含我们需要验证的方法
  const authSpy = jasmine.createSpyObj('AuthService', ['loginRedirect', 'handleError']);

  TestBed.configureTestingModule({
    providers: [
      AuthInterceptor,
      { provide: AuthService, useValue: authSpy }
    ],
    imports: [HttpClientTestingModule]
  });

  interceptor = TestBed.inject(AuthInterceptor);
  authServiceSpy = TestBed.inject(AuthService) as jasmine.SpyObj<AuthService>;
});

第二步：测试tap操作符的逻辑 #

当请求成功返回HttpResponse时，tap里的代码会执行。我们可以让next.handle返回一个包含HttpResponse的Observable，然后订阅它，验证tap内的业务逻辑。

it('should execute tap logic when receiving a successful response', () => {
  const testResponse = new HttpResponse({ body: 'test content', status: 200 });
  const testReq = new HttpRequest('GET', '/api/test');
  
  // 模拟next.handle返回成功的Observable
  const next: any = {
    handle: jasmine.createSpy('handle').and.returnValue(of(testResponse))
  };

  // 订阅拦截器返回的Observable，触发整个流
  interceptor.intercept(testReq, next).subscribe();

  // 基础断言：next.handle确实被调用
  expect(next.handle).toHaveBeenCalledWith(testReq);
  // 如果你的tap里有具体业务逻辑（比如处理响应数据），这里可以添加对应断言
  // 比如：expect(someProcessedData).toEqual(expectedValue);
});

第三步：测试catchError的401错误逻辑 #

当返回401的HttpErrorResponse时，要验证authService.loginRedirect被调用，同时错误被正确传递或处理。

it('should trigger loginRedirect when 401 error occurs', () => {
  const testError = new HttpErrorResponse({
    error: 'Unauthorized access',
    status: 401,
    statusText: 'Unauthorized'
  });
  const testReq = new HttpRequest('GET', '/api/protected');
  
  // 模拟next.handle返回错误的Observable
  const next: any = {
    handle: jasmine.createSpy('handle').and.returnValue(throwError(() => testError))
  };

  // 订阅拦截器返回的Observable，捕获错误避免测试报错
  interceptor.intercept(testReq, next).subscribe({
    error: () => {}
  });

  // 验证next.handle被调用
  expect(next.handle).toHaveBeenCalledWith(testReq);
  // 验证登录重定向方法被触发
  expect(authServiceSpy.loginRedirect).toHaveBeenCalled();
  // 验证错误处理方法被调用
  expect(authServiceSpy.handleError).toHaveBeenCalledWith(testError);
});

补充说明：为什么不能直接spyOn tap/catchError？ #

因为tap和catchError是RxJS提供的纯函数，它们是作为参数传入pipe方法的，不属于任何类的实例方法，所以无法通过spyOn来监听它们的调用。我们只能通过触发对应的Observable流，来验证它们包裹的业务逻辑是否正确执行。

内容的提问来源于stack exchange，提问作者Pedro Tainha