How to Unit Test a React/Redux application - HashedIn Technologies

How to Unit Test a React/Redux application

Technology - 30 Apr 2018
Kousick S

While designing and working on a bunch of React applications I always wanted myself and my team to write unit tests. I was able to learn, write and improve on how we have been writing test cases as a team. Well, there isn’t any standard way or a rule book on how to and what to unit test with React and Redux, therefore this blog is going to talk about a few patterns that I have started using to unit test my applications. My examples in this document will cover the breadth on how to write unit tests.

What we’ll cover by the end of this series

  • Important libraries that we’d use to Unit Test
  • Testing Do’s and Don’t’s in a react component
  • Identifying the “Component Contract” to test with an example
  • Testing redux asynchronous action creators
  • Testing redux reducers
  • Configuring Jest code coverage report

Important libraries with React for Unit Tests

Jest

Jest is the official Facebook written library for testing react apps, though there are other libraries that help us unit test react, this stands for the following reasons.

  • Easy setup, comes built-in with react-create-app
  • Code Coverage in the box – no additional libraries required
  • Assertion module uses jasmine, making it familiar for most javascript developers

There are many more to it, and you may read about it here.

Enzyme

The enzyme is a jQuery type framework on top of the react written by Airbnb. The enzyme helps you traverse, assert, and manipulate react components. The most important is that it helps you render components at either a shallow level or a deep level while running tests. Again, you may spend time reading about it here.

More about setting up your project with Jest and Enzyme can be learned from the Setting up a section of this article.

Most of how I have described on how to write Unit Tests in this series has been inspired by reading this article.

On how to write unit test cases for a react/redux component, action creators, and reducers, read Part 1 and Part 2 of this series.

Configuring code coverage

Jest carries code coverage as a part of its huge list of utilities. We only have to configure Jest to generate code review like the way we want it to perform. I have a basic setup for getting the code coverage setup, while a documentation on how to setup in detail can be read here.

Summary

  • Unit Testing react components is essential as it is a building block to your application
  • Perform only dumb component tests as a part of Unit Testing
  • Know what to test and what not to from your components
  • For any component, first, identify all of its “Component Contract” to help you understand what to test
  • Testing Redux action creators and reducers are crucial
  • Setup code coverage easily and monitor your test results

You can read on how to write unit test cases for a react/redux component, action creators, and reducers, here:  Part 1 and Part 2 of this series

E-book on Digital Business Transformation

Share
Tweet
+1
Share