Angular test 'subscribe is not a function'

Question

In my component inside ngOnInit I have a subscribe() inside which I call a component function:

ngOnInit(): void {
    this.navigationService.itemReset$.subscribe(event => this.resetItem(event));
}

in the navigationService I have:

btnPressed$: Subject<Event> = new Subject();
itemReset$: Observable<Event> = this.btnPressed$.asObservable();

keyDown(event: Event): void {
  this.btnPressed$.next(event);
}

I searched a lot about this issue, and tried something like this in my component test:

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;
  let navigationServiceMock = {
    itemReset$: () => of({} as Event),
    // tried this: itemReset$: jasmine.createSpy('itemReset$').and.returnValue(of({})),
  };

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [MyComponent],
      providers: [{
        provide: navigationService,
        useValue: navigationServiceMock
      }]
    })
      .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

but still, get the error

TypeError: this.navigationService.itemReset$.subscribe is not a function

Any idea, why it doesn't work? I would be really grateful for any help!

Answer 1

Ensure that the type of itemReset$ in your fake object matches the type in the implementation.

You need to pass a Observable<Event> but you had a function returning such an observable instead.

let navigationServiceMock = {
    itemReset$: of({} as Event),
};