Testing React components with React Testing Library

Testing is an essential part of the development process, and the React Testing Library (RTL) makes it easy to test your React components. In this post, we'll discuss the benefits of using RTL for testing, how to set up the testing environment, and how to create and test a simple button component.

Benefits of Testing with RTL

There are several benefits to using the React Testing Library for testing your components:

• RTL is designed to test the behavior of your components from the user's perspective, rather than the implementation details. This means that your tests will be less brittle and more resistant to changes in the implementation of your components.
• RTL encourages the use of best practices such as testing the full rendering of your components and avoiding the testing of implementation details.
• RTL provides a simple and intuitive API that makes it easy to write tests.

Setting up the Testing Environment

To get started with RTL, you'll need to install the library in your React project. You can do this by running the following command in your terminal:

Once the library is installed, you're ready to start writing tests!

Creating a Button Component and Writing Tests

Let's start by creating a simple button component:

Next, we'll write a test for this component using RTL. First, we'll need to import the render and screen functions from RTL:

Depending on how we are testing the component, we need to import queries as well. More about queries can be found in documentation. Then, we'll write a test function that checks if the button component is rendered:

For this example, we used getByRole query but we could achieve the same result with other queries (e.g. getByText) as well. And for the roles, RTL is compatible with HTML roles which can be found in W3C documentation. Next up, let's test the component when user clicks on the button:

This test actually checks the implementation detail (e.g. testing if the onClick event is called). What would be more beneficial for us in the long term is to test the component according to how user interacts with it. For our button component, we can bind the click to an event (interacting with another element maybe) and test that click makes the interaction work. To demonstrate, I will open open/close a modal when button is clicked and test that this behaviour is working as expected. First, let's refactor our code to add Button inside a component with the desired behaviour;

Then, let's test App to see if clicking on Button opens the modal;

After running the test above, you will see that the tests are passing, congratulations! 🥳

Summary

In this post, we've covered the basics of testing a React component with the React Testing Library. We've discussed the benefits of using RTL for testing, how to set up the testing environment, and how to create and test a simple button component. We've also looked at how to test the component without testing implementation details.