How to unit test rxjs distinctUntilChanged?

Question

I have this method that I need to raise coverage for, but I'm out of luck. I found some examples on other pages, but nothing seems to help.

    this.activeList$ = concat(
      of(list), // default items
      this.listInput$.pipe(
        debounceTime(500),
        distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)),
        tap((term: string) => {
          this.selectLoading = true;
          if (term === null || term === '' || term === undefined || term.length <= 3) {
            this.selectLoading = false;
            return EMPTY;
          }
        }),
        switchMap((term) => {
          if (term !== null && term !== '' && term !== undefined && term.length >= 3) {
            return this.searchService
              .searchRoot({
                name: '',
                page: 0,
                size: 20,
      
              })
              .pipe(
                map((result: any) => {
                  return result.content;
                }),
                catchError(() => of([])),
                tap(() => {
                  this.selectLoading = false;
                }),
              );
          }
          return EMPTY;
        }),
      ),
    );
  }

This was my first attempt:

it('loads list', () => {
    const mock = {
      distinctUntilChanged: jest.fn((a, b) => JSON.stringify(a) === JSON.stringify(b)),
      tap: jest.fn(() => {
        spyOn(component.oInput$, 'pipe');
        selectLoading = false;
      }),
      switchMap: jest.fn(),
    };
    spyOn(component, 'activeOidList$').and.returnValue(of(mock));
  });

I thought this would cover what's inside the pipe. The problem is I can't enter the distinctUntilChanged method at all. Also, there are no errors after I run the test. Any ideas?

Answer 1

You don't unit test it.

The purpose of unit testing is to check for side effects on your OWN code. This means you should assume the RxJS operators have been tested by their writers.

And instead of testing everything in your code, you should only test what you expect, from what you have. This means that RxJS operators are implementation details, so you should just ignore it.

this means you should mock those properties:

this.activeList$ = concat(
      of(list), // mock this variable
      this.listInput$.pipe(...) // Mock this observable
);

Once those two are mocked, you can test it like this:

const test = jasmine.spy(); // I don't recall the exact syntax, juste create a spy

this.activeList$.subscribe(() => test());

myComponent.myFunctionThatTriggersThisObservable(myData);
myComponent.myFunctionThatTriggersThisObservable(someDifferentData);
expect(test).toHaveBeenCalledTimes(2);
myComponent.myFunctionThatTriggersThisObservable(myData);
expect(test).toHaveBeenCalledTimes(2);