ReactFoo 2017

A conference on React

Deepak Pai


Unit Testing React Applications

Submitted Jun 4, 2017

Testing is like working out. Everyone knows it’s good for you but very few of us do it.

Testing frontend applications is very different from testing their backend counterparts. Hence, we consider it to be difficult and shy away from it.

The most common dilemmas we face when it comes to frontend testing are: a) where to start and b) how to test. This talk aims to instil a testing mindset while providing a deep insight into frontend testing and how to go about it the right way.

I will be talking about the AAA pattern which makes it easy to write tests for anything. AAA stands for Arrange, Act, Assert. All unit tests consist of these 3 stages. Writing tests becomes easy when you are able to break the test down into these stages.

Maintaining tests is another important aspect often ignored while testing. We need to set up processes, such as pre merge test runs,that ensure that the corresponding tests are always updated after every code change.

When you have a good grasp of writing tests for frontend applications, testing applications built using React and Redux can be easy because of the declarative style in which they’re written.


The talk will be focused on how to test applications built with React and Redux and will cover the following areas
- Need for testing
- Testing framework setup
- AAA pattern to write tests - Arrange, Act, Assert
- Testing components
- Testing action creators
- Testing reducers
- Maintaining tests
- When testing is an overkill


The talk is aimed at people who already have some experience building applications in React.

Speaker bio

I am a UI engineer at Flipkart and as a part of the team that rebuilt the desktop website from the ground up, I have set up the testing framework and processes for the Flipkart desktop website, as well as for other projects within the company. I am a great believer in good and thorough testing and think that better testing always leads to better software.



{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}