Member-only story
Testing React Components Explained for Beginners
Testing code can be intimidating if you don’t know how it works. We will go through the basics
Intro
Meet James. James is part of a large development team. He specializes in creating awesome React components, and together with many colleagues, he is building a large frontend.
Right now, he is building a brand new button.
This button has one important functional requirement: After a user clicks on it, it needs to become disabled. It’s no problem creating this, and James pushes his code into the repository so that it becomes available for all other developers when they pull in the latest changes.
But wait. That’s quite scary, isn’t it? What if another developer from the team changes the code? What if the button no longer becomes disabled after a user clicks on it?
This is where testing comes into play.
James can add a test for his new button component that asserts that the button becomes disabled after clicking on it (we will describe how a test actually does this a bit further down below). And whenever someone changes the code for the button component, and (accidentally or not) changes it in a way so that the button no longer is disabled after a user clicks on it, the test will fail.
With big red alerts. Systems and pipelines will stop, break, scream and cry. Emails are sent automatically, stating that the button no longer becomes disabled after a user clicks on it!
This is a bit of a childish example of course. But hopefully, it explains the concept of testing. As a matter of fact, this is exactly how large projects ensure that nothing “breaks.”
See for yourself: Examples of tests can be found over at React, lodash, date-fns, and pretty much every other project that respects itself. This is how many developers can work together on one project and make sure they don’t break each other's code and functionality.
