Effortless React Testing with Jest and React Testing Library

Testing your React components doesn’t have to be intimidating. By using Jest and React Testing Library, you can ensure your components behave as expected, improving the quality of your applications. In this article, let’s walk through how to test a button that triggers a modal.

Why Testing Matters

Have you ever shipped a feature only to realize later it broke something else? Tests help you catch these issues before they make it into production. Writing tests for components ensures they behave correctly and consistently, even as your codebase evolves.

Setting Up Jest and React Testing Library

If you’re new to testing in React, start by installing Jest and React Testing Library:

npm install --save-dev jest @testing-library/react @testing-library/jest-dom        

Make sure your package.json has a test script:

"scripts": {
  "test": "jest"
}        

The Example Component

We’ll create a simple button that opens a modal when clicked. Here’s the component:

Writing the Tests

Let’s test this component step by step. Create a file named App.test.js in the same directory as the component.

Test Setup

Start by importing the necessary modules:

Test Rendering the Button

Check that the button to open the modal is rendered:

Test Opening the Modal

Simulate a click event and verify the modal appears:

Test Closing the Modal

Simulate clicking the close button and ensure the modal disappears:

What Did You Notice?

Testing isn’t just about finding bugs—it’s about gaining confidence in your code. Can you think of other scenarios to test here? For example, what happens if the modal is already closed and the close button is clicked?

Testing might feel like an extra step at first, but it’s an investment in your code’s stability. By writing simple, focused tests, you’ll be able to catch bugs early and move forward with confidence. So, what will you test next?