ng 测试抛出：TypeError：this.navMenuService.displayAllTabs.subscribe 不是函数答案

【问题标题】：ng Test throws: TypeError: this.navMenuService.displayAllTabs.subscribe is not a functionng 测试抛出：TypeError：this.navMenuService.displayAllTabs.subscribe 不是函数
【发布时间】：2020-07-06 06:54:00
【问题描述】：

当我运行 ng test 我得到这个错误： TypeError: this.navMenuService.displayAllTabs.subscribe 不是函数

navMenuService.displayAllTabs 是一个公开的 get Observable 属性

它返回一个 BehaviorSubject

navMenuService.displayAllTabs.subscribe 从 NavMenuComponent 的 ngOnInit() 调用

我试过了：

a fakeNavMenuService，//同样的错误
也 spyOnProperty // 说没有'get'
Object.defineProperty // 我认为不能与 Observable 一起使用

我的代码：

//On the nav-menu.component.spec.ts
fdescribe('NavMenuComponent', () => {
  let component: NavMenuComponent;
  let fixture: ComponentFixture<NavMenuComponent>;

  let mockNavMenuService: jasmine.SpyObj<NavMenuService>;
  
  beforeEach(() => {
    // set up dependencies methods called directly or indirectly from ngOnInit
    mockNavMenuService = jasmine.createSpyObj<NavMenuService>('NavMenuService', ['displayAllTabs']);    
  });
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      providers: [
        { provide: NavMenuService, useValue: mockNavMenuService }
  
      ],
      declarations: [NavMenuComponent]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(NavMenuComponent);
    component = fixture.componentInstance;

    (mockNavMenuService.displayAllTabs as unknown as jasmine.Spy).and.returnValue(false);
    fixture.detectChanges();
  });

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


//On the nav-menu.component.ts
export class NavMenuComponent implements OnInit {
    private _displayAllTabs = false;
    get displayAllTabs(): boolean {
        return this._displayAllTabs;
    }
    constructor(private navMenuService: NavMenuService) { }

    ngOnInit(): void {    
        this.navMenuService.displayAllTabs.subscribe((value) => {
            this._displayAllTabs = value;
        });
    }
}


//On the nav-menu.service.ts

export class NavMenuService {
  private _displayAllTabs: BehaviorSubject<boolean>;  

  public get displayAllTabs(): Observable<boolean> {
    return this._displayAllTabs;
  }
  public get showAllTabs(): boolean {
    return this._displayAllTabs.getValue();
  }
  public set showAllTabs(value: boolean) {
    if (value === false) {
      this._displayClaimTab.next(value);
    }
    this._displayAllTabs.next(value);
  }
}

【问题讨论】：

标签： observable angular-test

【解决方案1】：

解决了这个问题：

首先我从规范文件中删除了这些行：

beforeEach(() => {
    // set up dependencies methods called directly or indirectly from ngOnInit
    mockNavMenuService = jasmine.createSpyObj<NavMenuService>('NavMenuService', ['displayAllTabs']);    
  });

与

 (mockNavMenuService.displayAllTabs as unknown as jasmine.Spy).and.returnValue(false);

然后我添加了这个：

 beforeEach(() => {
    mockNavMenuService = {
      ...jasmine.createSpyObj('mockNavMenuService', ['']),
      displayAllTabs: of()
    } as jasmine.SpyObj<NavMenuService>;
});

干杯

【讨论】：