Although React has exerted its influence over the entire stack of front end development since its initial release in 2013,  I have found it particularly beneficial in the implementation of the presentational logic within a user interface .

React’s component-based architecture has simplified the process of building dynamic user interfaces by offering an organized and syntactically pleasant framework to create pieces of reusable combinations of HTML (JSX) and JavaScript. 

These pieces of HTML (JSX) and JavaScript - when appropriately isolated from business logic like application state management and API calls - are commonly referred to as presentational components.

Unsurprisingly, these presentational components are only concerned with visual presentations within a user interface, and provide little to no opinionated  logic beyond what is  needed for rendering the UI element(s) they are responsible for. For example, a presentational component could render a button in JSX, as well as take in some basic props to help determine its button’s visual variation, disabled or enabled state, or its onClick behavior.

Straight forwarded enough. But can a component with no business logic be unit tested within the React framework? And if so, is there a benefit to doing so?

Unit testing involves isolating and testing individual units of code to ensure they behave as expected. In the context of presentational components, we can use unit testing to verify that a component renders the intended styling, event handlers, and JSX. 

Continuing with our button example, with the help of React Testing Library we can write  test to ensure that the Button renders on the document with the expected classes, another test to ensure that the Button’s onClick handler is working properly, and finally a third test to ensure that the component does in fact respect the value of it’s incoming disabled prop.

‍

‍

Now that we’ve exemplified that it is in fact possible - and relatively straightforward  - to test presentational components, it’s worth taking some time to discuss why I recommend it.

Presentational components are responsible for rendering the visual aspects of your application's user interface. Unit tests for these components help ensure visual consistency across different devices, browsers, and screen sizes. By verifying that components render as expected under various conditions, unit tests help catch visual discrepancies early in the development process, preventing issues from reaching production. 

Unit tests can also provide assurance that your presentational components can be reused without unexpected side effects. By testing each component in isolation, you can identify any dependencies or assumptions that may hinder reusability and address them accordingly.  In other words, unit testing a presentational component is a great way to test that it truly is a presentational component.

And finally, it’s worth mentioning the advantage of a regression tested user interface - something that is a natural byproduct of unit testing presentational components. User interfaces are complex - and as they evolve and new features are added, there's a risk of introducing regression errors that inadvertently break the presentational logic of an application. And while unit tests will never be a substitute for proper smoke testing and manual QA of a user interface, they do provide a very useful complementary safety net - especially for smaller changes that might be committed between more comprehensive testing methods.

‍