Adding React Testing Library to existing projects

To get started with React Testing Library, the first thing we need to do is install the tool into our React project. We can either install it manually or use create-react-app, a specific React tool that automatically has React Testing Library installed for you.

Manual installation

Add React Testing Library to your project using the following command:

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

Once the tool is installed into your project, you can import the available API methods to use inside your test files.

Next, we will see how to start a React project with React Testing Library when it is already installed for you.

Automatic installation with create-react-app

The create-react-app tool allows you to create a one-page React application quickly. The create-react-app tool provides a sample application and an associated test to get you started. React Testing Library has become so popular that as of version 3.3.0, the create-react-app team added React Testing Library as the default testing tool. The create-react-app tool also includes the user-event and jest-dom utilities. We previously went over jest-dom in Chapter 1, Exploring React Testing Library. We will cover the user-event utility in Chapter 3, Testing Complex Components with React Testing Library.

So, if you are using at least version 3.3.0 of create-react-app, you get a React application with React Testing Library, user-event, and jest-dom automatically installed and configured.

There are two ways you can run the create-react-app tool to create a new React application. By default, both ways of running the create-react-app tool will automatically install the latest version of create-react-app. The first way is with npx, which allows you to create a React project without needing to have the create-react-app tool globally installed on your local machine:

npx create-react-app your-project-title-here --use-npm

When using the preceding command, be sure to replace your-project-title-here with a title to describe your unique project. Also, notice the --use-npm flag at the end of the command. By default, when you create a project using create-react-app, it uses Yarn as the package manager for the project. We will use npm as the package manager throughout this book. We can tell create-react-app we want to use npm as the package manager instead of Yarn using the --use-npm flag.

The second way to create a React application with create-react-app is by installing the tool globally to run on your local machine. Use the following command to install the tool globally:

npm install -g create-react-app

In the previous command, we used the -g command to globally install the tool on our machine. Once the tool is installed on your machine, run the following command to create a project:

create-react-app your-project-title-here --use-npm

Like the command we ran in the previous example to create a project using npx, we create a new project titled your-project-title-here using npm as the package manager.

Now you know how to manually install React Testing Library or have it automatically installed using create-react-app. Next, we will learn about common React Testing Library API methods used to structure tests.