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),
};

Answer 2

You are close but remember you are mocking:

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

You have a mocked a function called itemReset$ which returns an observable.

In reality, you want itemReset$ to be the observable.

So change your mock to:

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