Unit testing ionic react apps

Unit testing ionic react apps

This is the final Chapter, Chapter 9 of the series on migrating an ionic-v1 app to ionic-react. Chapter 1 was an introduction, Chapter 2 outlined the steps to run a v1 app using the latest ionic-cli, Chapter 3 described the typical challenges we had building the app, Chapter 4 talked about routing the app using react-router, Chapter 5 went into state management using redux and react-redux hooks, Chapter 6 was how to create mobile apps from the ionic-react app using capacitor, Chapter 7 was how to create PWA and notify users on app update and Chapter 8 was on using typescript features in ionic-react.

The write-up is not complete without a Chapter on unit testing. There is no need to make a case for unit testing. Everyone knows it is important, no one wants to bell the cat. We will write tests later, it is tough to write tests, we don’t have time, are the popular refrains.

We have found unit tests to be of tremendous help for our backends, when it came to refactoring the code and/or upgrading the framework libraries. The same reason applies for the frontend code as well.

Getting started

Similar to typing the app, the best place to start unit testing is the redux state management code. Redux documentation on this is very good and it was our starting point.

ionic starter app comes pre-installed with support for jest, the popular unit testing framework for react. The other library that it has is testing-library. This is a new kid on the block for testing javascript, but has become so popular that projects bootstrapped with create-react-app comes with this library, along with jest.

Nothing special needs to be done to unit test typescript code. What is required is for the testing framework to recognise and run the tests, and this is taken care in the starter projects of react as well as ionic.

There are different recommendations on where test files should be placed, most of them influenced by enzyme another popular react testing framework. Since we were focusing on unit testing, we stuck to the simple thumb-rule of placing our test file, alongside the code, in the same folder. So, we had auth.ts and auth.test.ts in the same folder.

Comments are closed.