Angular单元测试：使用ng-mocks模拟Subject报错排查

在为依赖SomeService的Angular组件编写单元测试时，使用ng-mocks的MockProvider模拟服务遇到两个核心问题：

1. 在test.ts中设置默认模拟行为时出现类型错误：

"The last overload gave the following error. Argument of type 'typeof SomeService' is not assignable to parameter of type 'AnyDeclaration<{ flags: Observable; flagChange: Observable; }>[]'"

2. 若不将flagChange初始化为EMPTY，会出现：

"Cannot read properties of undefined (reading 'subscribe')"

一、修复类型错误与基础模拟问题 #

问题根源 #

• flags在原服务中是LDClient.LDFlagSet类型（普通对象），但你用了EMPTY（Observable类型）赋值，类型完全不匹配。
• flagChange是Subject<Object>类型，EMPTY是Observable，虽能订阅但类型不兼容，触发ng-mocks的类型校验失败。

修正test.ts中的默认模拟 #

import { Subject } from 'rxjs';
import { ngMocks } from 'ng-mocks';
import { SomeService } from './path-to-your-service';
import { LDClient } from 'launchdarkly-js-client-sdk';

ngMocks.defaultMock(SomeService, () => ({
  // 匹配原服务的flags类型：普通对象
  flags: { 'allow_edit': false } as LDClient.LDFlagSet,
  // 用Subject模拟，完全符合原服务的类型定义
  flagChange: new Subject<Object>(),
}));

二、组件测试中模拟Subject并控制数据流 #

在组件的spec.ts中，可直接模拟flagChange的Subject，手动发送值来测试组件的响应逻辑，以下是两种可行方案：

方案1：在TestBed中自定义MockProvider #

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SomeComponent } from './some.component';
import { SomeService } from './some.service';
import { MockProvider } from 'ng-mocks';
import { Subject } from 'rxjs';
import { LDClient } from 'launchdarkly-js-client-sdk';

fdescribe('SomeComponent', () => {
  let component: SomeComponent;
  let fixture: ComponentFixture<SomeComponent>;
  let flagChangeSubject: Subject<Object>;

  beforeEach(async () => {
    flagChangeSubject = new Subject<Object>();
    
    await TestBed.configureTestingModule({
      declarations: [SomeComponent],
      providers: [
        MockProvider(SomeService, {
          flags: { 'allow_edit': false } as LDClient.LDFlagSet,
          flagChange: flagChangeSubject,
        }),
      ],
    }).compileComponents();

    fixture = TestBed.createComponent(SomeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should update allow_edit when flagChange emits new value', () => {
    // 发送新的flags状态
    flagChangeSubject.next({ 'allow_edit': true });
    fixture.detectChanges();
    // 断言组件值已更新
    expect(component.allow_edit).toBe(true);
  });
});

方案2：通过ng-mocks获取模拟服务实例并替换Subject #

如果已在test.ts中设置了默认模拟，可在spec.ts中获取服务实例，替换flagChange为可控制的Subject：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SomeComponent } from './some.component';
import { SomeService } from './some.service';
import { MockProvider, ngMocks } from 'ng-mocks';
import { Subject } from 'rxjs';

fdescribe('SomeComponent', () => {
  let component: SomeComponent;
  let fixture: ComponentFixture<SomeComponent>;
  let someService: SomeService;
  let flagChangeSubject: Subject<Object>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [SomeComponent],
      providers: [MockProvider(SomeService)],
    }).compileComponents();

    fixture = TestBed.createComponent(SomeComponent);
    component = fixture.componentInstance;
    // 获取模拟的服务实例
    someService = ngMocks.get(SomeService);
    // 替换为可控制的Subject
    flagChangeSubject = new Subject<Object>();
    someService.flagChange = flagChangeSubject;
    
    fixture.detectChanges();
  });

  it('should respond to flag change events', () => {
    flagChangeSubject.next({ 'allow_edit': true });
    fixture.detectChanges();
    expect(component.allow_edit).toBe(true);
  });
});

额外优化建议 #

组件构造函数中存在变量覆盖问题：this.allow_edit先被赋值为布尔值，后又被赋值为Subscription对象，导致类型混乱。建议修改组件代码：

import { Subscription } from 'rxjs';

// 组件类中分开声明变量
allow_edit: boolean;
private flagSubscription: Subscription;

constructor(private featureFlag: SomeService) {
  this.allow_edit = featureFlag.flags['allow_edit'];
  this.flagSubscription = featureFlag.flagChange.subscribe((flags: any) => {
    this.allow_edit = flags['allow_edit'];
  });
}

ngOnDestroy() {
  // 取消订阅避免内存泄漏
  this.flagSubscription?.unsubscribe();
}

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