Angular单元测试：如何spy on Observable属性并控制其发射值

以下两种方案均可实现自主控制selectedTabAction$的返回值，适配Jasmine/Jest等常见Angular单元测试框架：

方案1：操作私有Subject直接推送值（推荐，无需修改原组件代码） #

组件中的selectedTabAction$是私有selectedTabSubject衍生的Observable，直接操作该Subject发射值即可，即使Subject声明为private，TS运行时无私有属性限制，可通过索引方式访问：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PostListComponent } from './post-list.component';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [PostListComponent]
    }).compileComponents();
    fixture = TestBed.createComponent(PostListComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should update content when selected tab changes', () => {
    // 向私有Subject推送tab下标为1的值
    (component as any)['selectedTabSubject'].next(1);
    // 触发变更检测
    fixture.detectChanges();
    // 此处添加你的断言逻辑，例如验证页面渲染内容是否匹配tab1对应的数据
  });
});

方案2：Spy替换Observable属性（符合不操作私有成员的规范） #

如果你不想访问组件私有属性，可以直接监听替换selectedTabAction$属性，绑定你自行控制的测试Subject：

it('should react to tab change with mock observable', () => {
  // 自定义测试用Subject，完全自主控制发射值
  const mockTabSubject = new BehaviorSubject<number>(0);
  // 替换组件的selectedTabAction$属性
  spyOnProperty(component, 'selectedTabAction$').and.returnValue(mockTabSubject.asObservable());

  // 需要触发ngOnInit的场景，注意要在fixture.detectChanges()之前完成替换，否则订阅会绑定到原始Observable
  // fixture.detectChanges();

  // 推送你需要的测试值
  mockTabSubject.next(2);
  fixture.detectChanges();
  // 执行断言
});

注意事项 #

• 如果组件在ngOnInit生命周期中就完成了对selectedTabAction$的订阅，必须在第一次调用fixture.detectChanges()（触发ngOnInit执行）之前完成方案2的属性替换，否则订阅不会收到mock的发射值
• 涉及多测试用例复用mock的场景，可以把替换逻辑放到beforeEach钩子中统一处理

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