It is painfully easy to get away with writing frontend code sans formal tests. Unlike backend programming, you are naturally “testing” your frontend application continuously throughout development just by interacting with the user interface. If you add an onClick handler, you intuitively head to the browser to click on that component. When you create a new route, most likely the first thing you do afterwards is navigate to that route.
This is a form of testing, and it is both necessary and helpful. However, it servers a very specific purpose. This testing-by-doing strategy provides confirmation that the exact set of steps within that exact version of the codebase will yield the desired result. It is quick, efficient and effective in this sense, and is an obvious necessity in spite of its limitations.
Writing formal tests for your interface can help to fill the holes left behind, a few of which are:
- Ensuring that the code continues to yield the desired result, and does not break with further development.
- Testing for various use cases, rather than just the one that you performed.
- Reminding you why code is written a certain way (to handle the finicky third-party package rendering, or ensure that functions come to completion in the proper order, etc.)
We have all been there — that place where you finally find a solve for that unique functionality you are adding in, only to realize that handling it in that way breaks something else. This is where formal testing comes in. It ensures that your app is _continuing _to function as expected, and can save you a massive headache down the road.
Types of Testing in React
As the React documentation states, there are essentially two types of testing for React components — rendering component trees, and end-to-end testing for an app. The former is specific to React, the latter is not. However both are important in the production of a stable application, so we will cover both here.
Rendering component trees tests the output of a given component. The test is written to simulate the event or rendering, and the expected output is “asserted”. The actual output (within the test environment) is then compared to the asserted output, and the test passes or fails.
In contrast, end-to-end testing is done in a browser environment, and tests the entire workflow of a we application, from start to finish.
#react #javascript #software-development #testing #programming
