Unit Testing For NgRx Store

Unit testing for an NgRx Store involves testing Actions, Reducers, Effects, and the Selectors. The goal is to ensure that each part of your NgRx state management logic works as expected.

Below is an example showing how you can implement unit testing with NgRx Store.

1. Setup

We'll assume we are testing a simple counter feature with NgRx:

Actions: increment, decrement
Reducer: Handle state changes for the counter
Effects: Simulate side effects (e.g., logging or async calls)
Selectors: Get state slices from the store

2. Example NgRx Setup

2.1 Define Actions

// counter.actions.ts
import { createAction } from '@ngrx/store';

export const increment = createAction('[Counter] Increment');
export const decrement = createAction('[Counter] Decrement');
export const reset = createAction('[Counter] Reset');

2.2 Define the Reducer

// counter.reducer.ts
import { createReducer, on } from '@ngrx/store';
import { increment, decrement, reset } from './counter.actions';

export interface CounterState {
  count: number;
}

export const initialState: CounterState = {
  count: 0,
};

export const counterReducer = createReducer(
  initialState,
  on(increment, (state) => ({ ...state, count: state.count + 1 })),
  on(decrement, (state) => ({ ...state, count: state.count - 1 })),
  on(reset, (state) => ({ ...state, count: 0 }))
);

2.3 Define Selectors

// counter.selectors.ts
import { createSelector, createFeatureSelector } from '@ngrx/store';
import { CounterState } from './counter.reducer';

export const selectCounterState = createFeatureSelector<CounterState>('counter');

export const selectCounterValue = createSelector(
  selectCounterState,
  (state) => state.count
);

2.4 Define Effects

// counter.effects.ts
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { increment, decrement } from './counter.actions';
import { tap } from 'rxjs/operators';

@Injectable()
export class CounterEffects {
  logIncrement$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(increment),
        tap(() => console.log('Increment action triggered'))
      ),
    { dispatch: false }
  );

  constructor(private actions$: Actions) {}
}

3. Unit Testing

3.1 Test Reducers

Test if the reducer properly handles the defined actions.

// counter.reducer.spec.ts
import { counterReducer, initialState } from './counter.reducer';
import { increment, decrement, reset } from './counter.actions';

describe('Counter Reducer', () => {
  it('should return the initial state', () => {
    const action = { type: 'Unknown' };
    const result = counterReducer(initialState, action);
    expect(result).toEqual(initialState);
  });

  it('should handle increment action', () => {
    const action = increment();
    const result = counterReducer(initialState, action);
    expect(result).toEqual({ count: 1 });
  });

  it('should handle decrement action', () => {
    const action = decrement();
    const result = counterReducer({ count: 5 }, action);
    expect(result).toEqual({ count: 4 });
  });

  it('should reset the counter on reset action', () => {
    const action = reset();
    const result = counterReducer({ count: 10 }, action);
    expect(result).toEqual({ count: 0 });
  });
});

3.2 Test Selectors

Verify that selectors return the expected state slices.

// counter.selectors.spec.ts
import { selectCounterValue } from './counter.selectors';
import { CounterState } from './counter.reducer';

describe('Counter Selectors', () => {
  it('should return counter value', () => {
    const state: CounterState = { count: 10 };
    const result = selectCounterValue.projector(state);
    expect(result).toBe(10);
  });
});

3.3 Test Effects

Mock dependencies and test the effects logic.

// counter.effects.spec.ts
import { TestBed } from '@angular/core/testing';
import { provideMockActions } from '@ngrx/effects/testing';
import { Actions } from '@ngrx/effects';
import { CounterEffects } from './counter.effects';
import { of } from 'rxjs';
import { increment } from './counter.actions';

describe('CounterEffects', () => {
  let effects: CounterEffects;
  let actions$ = of(increment());

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        CounterEffects,
        provideMockActions(() => actions$),
      ]
    });

    effects = TestBed.inject(CounterEffects);
  });

  it('should log on increment action', (done) => {
    effects.logIncrement$.subscribe(() => {
      expect(console.log).toHaveBeenCalledWith('Increment action triggered');
      done();
    });
  });
});

3.4 Mock Console.log with Jest or Jasmine:

For console.log, ensure you mock it to avoid unwanted logs during test execution.

spyOn(console, 'log');

4. Summary

Actions: Tested simple action dispatch behavior.
Reducers: Ensure state transitions occur as expected.
Selectors: Confirm the computed slice of store state is correct.
Effects: Test side effects (e.g., logging) using mocked streams.

Software Development