Testing with Karma Angular NgRX effects with applied timer

Question

Having the following NgRX effect

loadData$: Observable<any> = createEffect((): Observable<Action> => {
        return this.actions$.pipe(
            ofType(loadDataStarted),
            switchMap(() => {
                return timer(0, 10000).pipe(
                    switchMap(() => this.dataService.loadNewData().pipe(
           
                    )),
                );
            }),
        );
    });

after all the requirements are mocked try to test if dataService.loadNewData() is getting called, but the test will fail

beforeEach(() => {
     service.loadNewData.and.returnValue(of(data));
});

it('should call service', fakeAsync(() => {
    tick(10000)
    expect(service.loadNewData).toHaveBeenCalledOnceWith();
}));

How do I mock correctly this case

https://timdeschryver.dev/blog/testing-an-ngrx-project#effects — timdeschryver, Oct 09 '22 at 08:24
@timdeschryver thanks for your feedback, the linked documentation seems to cover cases in jest — fefe, Oct 09 '22 at 17:33

daniel-sc · Accepted Answer · 2022-10-19T08:55:21.207

It seems you perform the subscription to the effect outside of the actual test (the it block). This means the subscription lives outside of the fakeAsync timer and because of this, the tick(..) has no effect.

To solve this, make sure to setup everything inside your fakeAsync test block.

A general recommendation would be to use marble testing for this: https://ngrx.io/guide/effects/testing#marble-diagrams

Edit: A concrete solution is found in https://stackoverflow.com/a/65857864/2544163

Testing with Karma Angular NgRX effects with applied timer

1 Answers1