React Redux Unit Testing with Jest part 2: Reducers

React-Redux-Unit-Testing-Part-2.md

React Redux Unit Testing: Part 2

Example for Reducers using jest

Thanks to Max Stoiber for his blog

reducer.js

// @flow

import { SET_H1, SET_TITLE } from '../actions/types';

type DomActionType = {
  type: string,
  payload: string
};

type DomStateType = {
  h1: string,
  title: string
};

// always heve a default state oresle reducers return undefined, which is a pain to decode
const INITIAL_STATE = {
  h1: '',
  title: ''
};

// dont  mutate the state. create new state and return it.. rule of reducer
export default function Dom_Reducer(
  state: DomStateType = INITIAL_STATE,
  action: DomActionType
): DomStateType {
  switch (action.type) {
    case SET_H1:
      // change H1
      return { ...state, h1: action.payload };
    case SET_TITLE:
      //change title
      return { ...state, title: action.payload };
    default:
      return state;
  }
}

reducer.test.js

import Dom_Reducer from './dom_reducer';

//test suite for all reducers
describe('Reducers', () => {
  //test suite fro dom reduecer
  describe('dom_reduecer', () => {
    //checking for case: default
    it('case: default', () => {
      expect(Dom_Reducer(undefined, {})).toEqual({
        h1: '',
        title: ''
      });
    });
    //checking for case: SET_H1
    it('case: SET_H1', () => {
      let h1 = 'some random header';
      expect(
        Dom_Reducer(undefined, {
          type: 'SET_H1',
          payload: h1
        })
      ).toEqual({
        h1: h1,
        title: ''
      });
    });
    //checking for case: SET_TITLE
    it('case: SET_TITLE', () => {
      let title = 'some random title';
      expect(
        Dom_Reducer(undefined, {
          type: 'SET_TITLE',
          payload: title
        })
      ).toEqual({
        h1: '',
        title: title
      });
    });
  });
});