Redux Containers Unit Testing in React with TypeScript Projects

Purpose:

The objective of this document is to describe guidance, recommendations, and practices for applying developer test for Redux containers used in React Project and Typescript.

Prerequisites:

This article mainly targets people with the knowledge of the followings:
-        React
-        Redux
-        TypeScript
-        NodeJS
-        Unit testing with Jest

Redux Containers unit test:

Container mainly responsible for connecting and updating the props values with the new changes in the state by implementing “mapStateToProps” also responsible for connecting the dispatches to the page functions by “mapDispatchToProps”.

Check the following container Example:

import { connect, Dispatch } from 'react-redux'
import { NetLibrariesPage } from '../components/pages/NetLibraries'
import { LoadNetLibrariesAction } from '../actions/networkLibrary'
import { StoreState } from '../types'

export const mapStateToProps = (state: StoreState) => {
  return { networkLibraries: state.networkLibrary.items }
}

export const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
    loadNetLibraries: () => dispatch(LoadNetLibrariesAction())
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(
  NetLibrariesPage
)


Our aim from the container unit test is to make sure that props are updated in correct way and the right actions are dispatched with the right data.

Let’s start implementing unit test for the example above.

We will mainly implement test for the two main methods in container “mapStateToProps”
And “mapDispatchToProps”

Testing “mapStateToProps” method:

  describe('mapStateToProps', () => {
    const testData = {
      networkLibrary: {
        items: []
      }
    }
    const data = mapStateToProps(testData)
    it('returns correct NetworkLibrary items', () => {
      expect(data.networkLibraries).toEqual(
        testData.networkLibrary.items
      )
    })
  })

First, we define data object that mocking the new data updated in store.
Then we call “mapStateToProps” Method with the mocked data and after calling it we expect the return from the method is typically equals the same values we sent in request.

This is verified by applying the following check:

      expect(data.networkLibraries).toEqual(
        testData.networkLibrary.items
      )

Testing “mapDispatchToProps” method:

First, we define jest function to mock the dispatch delegate ..
    const dispatch = jest.fn()

Then we call “mapDispatchToProps” Method with the mocked dispatch function.

    const data = mapDispatchToProps(dispatch)

   
after calling it we expect that calling the methods returned is dispatching the correct actions and correct data by doing the
  describe('mapDispatchToProps', () => {
    const dispatch = jest.fn()
    const data = mapDispatchToProps(dispatch)

    describe('loadNetLibraries', () => {
      it('calls dispatch with correct args', () => {
        data.loadNetLibraries()
        expect(dispatch.mock.calls[0][0].type).toEqual(
          NetworkLibrariesActions.LOAD_ALL
        )
      })
    })
  })

Full Example:
import { mapStateToProps, mapDispatchToProps } from './networkLibraries'
import { NetworkLibrariesActions } from '../constants/index'

describe('NetworkLibrary container', () => {
  describe('mapStateToProps', () => {
    const testData = {
      networkLibrary: {
        items: []
      }
    }
    const data = mapStateToProps(testData)
    it('returns correct NetworkLibrary items', () => {
      expect(data.networkLibraries).toEqual(
        testData.networkLibrary.items
      )
    })
  })

  describe('mapDispatchToProps', () => {
    const dispatch = jest.fn()
    const data = mapDispatchToProps(dispatch)

    describe('loadNetLibraries', () => {
      it('calls dispatch with correct args', () => {
        data.loadNetLibraries()
        expect(dispatch.mock.calls[0][0].type).toEqual(
          NetworkLibrariesActions.LOAD_ALL
        )
      })
    })
  })
})



Comments

Post a Comment

Popular posts from this blog

Applying unit test for Redux-Saga with React and Typescript

Purpose: The objective of this document is to describe guidance, recommendations, and practices for applying developer test for Redux Saga using React and Typescript. Prerequisites: This article mainly targets people with the knowledge of the followings: -         React -         Redux -         TypeScript -         NodeJS -         Unit testing with Jest -         Using Redux-Saga Library to manage async calls in web App Redux Saga test using “redux-saga-test-plan”: During this article we will mainly use Redux Saga Test Plan to test exact effects and their ordering or to test your saga put's a specific action at some point. Redux Saga Test Plan aims to embrace both unit testing and integration testing approaches to make testing your sag...
Read more

Logging w/ MetroLog in (UWP) Application

Image
Introduction As many of you developers out there are aware, sometimes you have to build or bring with you a number of application infrastructure items before you can even get started with the core application logic.  For example, you might need some helpers, services and base classes that make your job easier or allow you to start with your base patterns, such as, MVC, MVVM, etc. Today, we are going to discuss how we can add logging support to our application so that we can get better information from a user to help find and fix any issues that they are experiencing. How To Add MetroLog We could roll our own logging system, but why when you can use another third party system?  Okay, I know why you might want to roll your own so that you have complete control over the code.  You can add features, etc.  Correct?  Usually. However, for this post, I am going to use a NuGet package called MetroLog to implement some very basic logging.  If you want ...
Read more