如何使用Jasmine Mock RxJS 5.5.6中的fromEvent函数？

我完全理解你遇到的困扰——RxJS升级后，fromEvent从Observable的静态方法变成了独立导出的函数，原来的spyOn(Observable, 'fromEvent')直接失效，而尝试spy模块对象的方式又因为ES模块的只读绑定行不通。下面给你两种优雅的解决方案：

方案一：直接修改模块导出的函数（无需改动业务代码） #

ES模块的导出绑定默认是只读的，但我们可以通过Object.defineProperty强制修改它的值，结合Jasmine的spy来实现mock：

import * as FromEventModule from 'rxjs/observable/fromEvent';
// 导入你的自定义mock函数
import { mockFromEventFunction } from './path-to-your-mocks';

describe('你的测试目标（组件/服务）', () => {
  beforeEach(() => {
    // 创建spy并关联你的mock逻辑
    const fromEventSpy = jasmine.createSpy('fromEvent')
      .and.callFake(mockFromEventFunction);
    
    // 替换模块中的fromEvent导出
    Object.defineProperty(FromEventModule, 'fromEvent', {
      value: fromEventSpy,
      writable: true // 允许后续根据测试场景调整
    });
  });

  it('应该调用mock的fromEvent函数', () => {
    // 执行触发fromEvent的业务逻辑
    // ...
    
    // 验证spy被正确调用
    expect(FromEventModule.fromEvent).toHaveBeenCalled();
  });
});

这种方法不需要修改业务代码，直接在测试层解决问题，适合快速适配现有代码结构。

方案二：封装RxJS工具为可注入服务（长期维护更优雅） #

如果你的项目是Angular这类依赖注入的框架，推荐把RxJS的工具函数封装成一个服务，这样测试时可以轻松mock，也符合依赖倒置原则：

// rxjs-utils.service.ts
import { Injectable } from '@angular/core';
import { fromEvent, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class RxjsUtilsService {
  fromEvent<T>(target: any, eventName: string): Observable<T> {
    return fromEvent(target, eventName);
  }
}

然后在你的业务代码里注入这个服务，替代直接导入fromEvent：

// your-component.ts
import { Component } from '@angular/core';
import { RxjsUtilsService } from './rxjs-utils.service';

@Component({ ... })
export class YourComponent {
  constructor(private rxjsUtils: RxjsUtilsService) {}

  someMethod() {
    // 使用服务封装的fromEvent
    this.rxjsUtils.fromEvent(document, 'click').subscribe(...);
  }
}

测试时就可以像mock普通服务一样操作：

import { RxjsUtilsService } from './rxjs-utils.service';

describe('YourComponent', () => {
  let rxjsUtilsSpy: jasmine.SpyObj<RxjsUtilsService>;

  beforeEach(() => {
    // 创建服务的spy对象
    rxjsUtilsSpy = jasmine.createSpyObj('RxjsUtilsService', ['fromEvent']);
    rxjsUtilsSpy.fromEvent.and.callFake(mockFromEventFunction);

    // 在TestBed中替换真实服务
    TestBed.configureTestingModule({
      providers: [
        { provide: RxjsUtilsService, useValue: rxjsUtilsSpy }
      ]
    });
  });

  it('应该使用mock的fromEvent', () => {
    const component = TestBed.inject(YourComponent);
    component.someMethod();
    
    expect(rxjsUtilsSpy.fromEvent).toHaveBeenCalledWith(document, 'click');
  });
});

这种方法虽然需要少量重构，但让代码的可测试性和维护性大幅提升，尤其适合大型项目长期迭代。

内容的提问来源于stack exchange，提问作者Llorenç Pujol Ferriol