Angular Jest unit test failed TypeError: Cannot read properties of undefined (reading 'subscribe')

Question

I'm new to Jest testing in Angular, and I'm facing an issue with one of my component tests. The test is failing with the following error message:

Type Error: Cannot read properties of undefined (reading 'subscribe')

I have an EhiExportPendingComponent that uses the Store class from @ngrx/store and the EhiExportCommunicationService. The component subscribes to data changes from the store and the EhiExportCommunicationService. The component code is as follows:

@Component({
    selector: 'tw-ehi-export-pending',
    templateUrl: './ehi-export-pending.component.html'
})
export class EhiExportPendingComponent implements OnInit, OnDestroy {
    subs = new SubSink();
    gridData: any[] = [];
    orgName = '';

    constructor(
        private ehiexportstore: Store < ehiexportreducer.EHIExportState > ,
        private ehiExportCommService: EhiExportCommunicationService,
        private hostComm: HostCommunicationService,
        private ehiExportService: EhiExportService,
        private cdr: ChangeDetectorRef
    ) {}

    ngOnInit(): void {
        this.orgName = this.hostComm.getUser().organization;

        this.subs.sink = this.ehiexportstore.pipe(select(ehiexportreducer.getPendingRequests)).subscribe((data) => {
            this.gridData = data ? [...data] : [];
            this.cdr.detectChanges();
        });

        this.subs.sink = this.ehiExportCommService.selectedSideMenuOption$.subscribe((selectedMenu: string) => {
            if (selectedMenu.toLocaleLowerCase() === 'pending') {
                this.ehiexportstore.dispatch(EHIExportActions.LoadPendingRequests());
            }
        });

        this.subs.sink = this.ehiExportCommService.pendingDataRefresh$.subscribe(() => {
            this.ehiexportstore.dispatch(EHIExportActions.LoadPendingRequests());
        });
        this.ehiexportstore.dispatch(EHIExportActions.LoadPendingRequests());
    }

    cancelRequest(requestId: number): void {
        this.hostComm.cancelExportDialog().then((choice) => {
            if (choice === 'continue') {
                this.ehiExportService.cancelRequest(requestId).subscribe({
                    next: (): void => this.ehiExportCommService.triggerPendingDataRefresh(),
                    error: (): void => {
                        console.log(`Something went wrong while canceling the request with request ID ${requestId}.`);
                        this.ehiExportCommService.triggerPendingDataRefresh();
                    }
                });
            }
        });
    }

    ngOnDestroy(): void {
        this.subs.unsubscribe();
    }
}

I've written a test for the EhiExportPendingComponent, and I'm using Jest as the testing framework along with @ngrx/store/testing. I've also provided mocks for the EhiExportCommunicationService and HostCommunicationService. The test code is as follows:

describe('EhiExportPendingComponent', () => {
    let component: EhiExportPendingComponent;
    let fixture: ComponentFixture < EhiExportPendingComponent > ;
    let mockStore: MockStore < ehiexportreducer.EHIExportState > ;

    beforeEach(async () => {
        await TestBed.configureTestingModule({
            providers: [
                provideMockStore(),
                {
                    provide: EhiExportCommunicationService,
                    useValue: new MockEhiExportCommunicationService()
                },
                {
                    provide: HostCommunicationService,
                    useValue: new MockHostCommunicationService()
                },
                {
                    provide: EhiExportService,
                    useValue: EhiExportService
                }
            ],
            declarations: [EhiExportPendingComponent]
        }).compileComponents();

        fixture = TestBed.createComponent(EhiExportPendingComponent);
        mockStore = TestBed.get(Store);

        component = fixture.componentInstance;

        mockStore.overrideSelector(ehiexportreducer.getPendingRequests, pendingRequests);
        fixture.detectChanges();
    });

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