In my ponent inside ngOnInit I have a subscribe() inside which I call a ponent 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 ponent test:

describe('MyComponent', () => {
  let ponent: 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
      }]
    })
      pileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    ponent = fixtureponentInstance;
    fixture.detectChanges();
  });

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

In my ponent inside ngOnInit I have a subscribe() inside which I call a ponent 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 ponent test:

describe('MyComponent', () => {
  let ponent: 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
      }]
    })
      .pileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    ponent = fixture.ponentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(ponent).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!

• javascript
• angular
• rxjs
• jasmine

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

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