Learn

In this lesson, you will learn how to test your React components with the React Testing Library (RTL). Remember, we need to test our code so that we can be sure that the application we are building is working as expected. If we are building our UI using React, we can use RTL as a way to ensure that our React components are working correctly.

The main advantage of RTL over other testing frameworks is that it allows us to test our components in a way that mimics real user interactions. The logic behind this is that a user will not care about the implementation details of a React component e.g. the component’s state, the props passed to it, etc. The user will only care about whether or not they are able to use the app.

Before we jump into the lesson, let’s take a quick look at an example that shows off the power and elegance of the React Testing Library.

Note: this lesson assumes that you have a basic understanding of the Jest testing framework.

Take a moment to observe the code sample below. It shows a GroceryList component with a few items. You can click on the checkboxes to mark that you’ve added one of these items to your cart. You can see the code for this component in the file GroceryList.js.

const GroceryList = () => { return ( <div> <h1>Grocery List</h1> <ul> <li> <label htmlFor="item1">Apples</label> <input type="checkbox" id="item1"/> </li> <li> <label htmlFor="item2">Milk</label> <input type="checkbox" id="item2"/> </li> <li> <label htmlFor="item3">Cereal</label> <input type="checkbox" id="item3"/> </li> </ul> </div> ) }; export default GroceryList;

Go to the test.js file. It contains a unit test using RTL. Observe how it mimics a user clicking the first checkbox.

import { render, screen, cleanup } from '@testing-library/react'; import GroceryList from './components/GroceryList'; import userEvent from '@testing-library/user-event'; test('should mark the first checkbox as checked', () => { // render the grocery list render(<GroceryList />); // grab the apple item const appleItem = screen.getByLabelText('Apples'); // simulate a "click" on the apple checkbox userEvent.click(appleItem); // assert that the apple checkbox was checked expect(appleItem).toBeChecked(); });

Can you see how we are able to test the GroceryList component without knowing any of its implementation details? This is what makes RTL so powerful. We can test our React components as if we are a real user and not worry about the specific logic that went behind coding them.

Don’t worry if you cannot understand every single line of the code snippet above. In the upcoming exercises, we will cover RTL so that you can understand everything that’s going on.

Instructions

For this lesson, we will be using the project called Passing Thoughts from the Learn React course for all our exercises. This is a React app that allows you to fill out a simple input form and post a “thought”. Once the thought is posted, it will disappear after 15 seconds.

Before jumping into the lesson, play around with the App in your browser and explore its components in your code editor. In this lesson, we will explore how we can test the features of this application from the users perspective including

  • verifying that components are present at the start of the program
  • mimicking user interactions
  • verifying that components have changed after the user interacts with the program
  • verifying the presence of components that render asynchronously
  • verifying the behavior of components that make API calls

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?