Component Testing in React

We already understand that the frontend is the client-side section of an application. When we wrote tests for our Django applications, we mostly tested whether the database stored the right data passed to the viewsets, serializers, and models. We didn’t test the user interface.

As a React developer, we might be wondering what we test in frontend applications. Let's go over why frontend testing is needed and what needs to be tested.

The necessity of testing the frontend

When developing an application, it’s important to ensure that our application works as expected in a production environment.

The frontend also represents the interface the user will use to interact with our backend. For a good user experience, it’s crucial to write tests that ensure that our components are behaving as expected.

What to test in our React application

If you are primarily a backend developer, you might be a little bit confused about what to test in a frontend application. From a basic aspect, it’s not different from testing the backend. If we have classes or methods in our application, we can write tests. Frontend testing includes testing different aspects of the UI, such as formatting, visible text, graphics, and the functional parts of the applications (such as buttons, forms, or clickable links).

Now, the difference is that our React frontend is made of UI components, which are taking props for displaying data to the user. The React ecosystem provides testing tools that easily help us write tests for our components.