Angular单元测试报错：this.docService.fileType$.pipe is not a function

错误原因 #

你用jasmine.createSpyObj('DocService', ['fileType$'])创建服务Spy时，第二个参数传入的是方法名数组，但fileType$是服务的Observable属性而非方法。这种写法会把fileType$变成一个Spy函数，而非Observable对象，所以调用.pipe时会抛出"is not a function"错误。

解决方案 #

需要正确模拟服务的fileType$属性，让它成为一个Observable，以下是两种常用实现方式：

方式1：手动构建带Observable属性的Spy对象 #

let docService: any;
let fixture: ComponentFixture<FileComponent>;
let component: FileComponent;

beforeEach(waitForAsync(() => {
  // 手动创建包含fileType$属性的Spy对象
  const docServiceSpy = {
    fileType$: of('main') // 直接返回初始值的Observable
  };
  // 若服务还有其他方法，可结合createSpyObj扩展：
  // const docServiceSpy = jasmine.createSpyObj('DocService', ['其他方法名']);
  // docServiceSpy.fileType$ = of('main');

  TestBed.configureTestingModule({
    declarations: [FileComponent],
    providers: [{ provide: DocService, useValue: docServiceSpy }]
  })
    .compileComponent()
    .then(() => {
      fixture = TestBed.createComponent(FileComponent);
      component = fixture.componentInstance;
      docService = TestBed.inject(DocService);
    });
}));

it('should set initial properties', fakeAsync(() => {
  fixture.detectChanges(); // 触发ngOnInit
  tick(); // 驱动Observable管道执行

  // 验证属性逻辑正确性
  let isInMainView: boolean;
  component.isInMainView$.subscribe(v => isInMainView = v);
  expect(isInMainView).toBe(true);
}));

方式2：用Jasmine SpyObj的属性定义参数 #

Jasmine 3.4+版本支持通过第三个参数传入属性键值对，直接定义Spy对象的属性：

let docService: any;
let fixture: ComponentFixture<FileComponent>;
let component: FileComponent;

beforeEach(waitForAsync(() => {
  // 第三个参数传入属性定义，将fileType$设为Observable
  const docServiceSpy = jasmine.createSpyObj('DocService', [], {
    fileType$: of('main')
  });

  TestBed.configureTestingModule({
    declarations: [FileComponent],
    providers: [{ provide: DocService, useValue: docServiceSpy }]
  })
    .compileComponent()
    .then(() => {
      fixture = TestBed.createComponent(FileComponent);
      component = fixture.componentInstance;
      docService = TestBed.inject(DocService);
    });
}));

it('should set initial properties', fakeAsync(() => {
  fixture.detectChanges();
  tick();

  let isInSearchView: boolean;
  component.isInSearchView$.subscribe(v => isInSearchView = v);
  expect(isInSearchView).toBe(false);
}));

关键注意事项 #

• 必须在调用fixture.detectChanges()之前，确保docService.fileType$已被设置为有效的Observable，因为detectChanges()会触发组件的ngOnInit钩子。
• 若需要动态修改fileType$的值，建议用Subject替代of()，通过next()方法发送新值，方便测试不同场景下的组件行为。

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