Demystifying Frontend Testing

Testing in frontend has always been a topic of discussion among developers, with most of us following custom testing architecture that aligns easily with our development cycle. In my experience I have also seen testing taking a back seat when you have hard deadlines. The question here is why doesn’t frontend testing get the due importance and does it actually bring in value to the table.

Why doesn’t frontend testing get the due importance?

I believe testing requires a great team discipline which can minimise bugs count in production immensely. However, it is often neglected when you have deadlines to meet because of couple of reasons:

• Testing as a UI task is often overlooked while planning sprints or giving estimates to PMs.
• UI test cases are very different from those of backend and needs be thought through before coming up with a model. We tend to overlook this resulting in tightly coupled test cases. Even a small refactoring results in breaking of test cases leading to frustration among developers.
• Lack of test coverage metrics at the beginning of product development cycle.
• Lack of segregation in testing scenarios. Everything cannot fit in the same model. e.g: TDD can’t be followed in all cases.

What does frontend testing bring to the table?

With frontend development becoming more complex and with developers responsible for stability and consistency like never before, frontend testing must be embraced within your codebase. Front-end code changes more frequently than any other piece of code. You are probably going to introduce more bugs on the UI than anywhere else.

The problem with frontend testing is the way tests are wired to the actual design and implementation of the UI, and quickly become obsolete and whenever the design or code is changed, the tests needs to be updated.

Tests should be independent of implementation because it is supposed to test if the implementation follows the specs. It makes no sense at all for tests to be wired to implementation. It doesn’t even matter what front-end framework — Angular/React/VueJS you use.

What does specs mean for the front-end then? The user’s journey. That’s how your application delivers value to the consumers. Test cases should be similar to how your end user is going to use your application which eventually gives you more confidence before shipping code to production.

I strongly believe we need to start giving importance to UI testing the same way we give our code. With a lot of open source projects backed by top companies coming up in this space with similar mindset, the future of frontend testing looks bright to me.

If you liked reading this, don’t forget to clap. 👏👏

You can also follow me on twitter @Akash940 for JavaScript or React updates.

Thank-you!