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.
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.
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.