What are all the React testing tools and how do you use them?

This chapter introduces you to the main types of testing tools we use to write tests: Test runners, and Renderers. Test runners run your tests, while Renderers make it possible for us to render components inside our tests.

For a long time, Jest was the main tool we would use to run our tests. However with the increasing popularity of TypeScript, more and more folks are starting to use Vitest instead (due to how easy it is to test TypeScript code with it).

Similarly, Enzyme used to be the main renderer we would use, though it made it easy to write brittle tests that would break every time you changed your React component's implementation details. These days, folks tend to start projects using React Testing Library instead, as it nudges us towards writing better tests.

Test Runners

Jest

Jest is a test runner that runs your tests in your terminal, with a number of useful options for how to run your tests.

Setting Jest up

If your project uses create-react-app (you can check by looking in your package.json for react-scripts as a dependency), you don't need to follow these steps.

You can add jest to your project by running:

npm install --save-dev jest
# OR
yarn add --dev jest

Then add the following script to your package.json's scripts section:

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

To get Jest to work with React, you'll want to also follow the steps here.

From here, you can run yarn test to have Jest run your tests once, or run yarn test --watch to enable watch mode, which runs tests only for files that you're actively editing. This gives you a nice feedback loop when you're writing code, and trying to avoid break things.

Jest by itself can't actually load React components, which is why Enzyme and React Testing Library exist.

Renderers

Enzyme

For a very long time, Enzyme was the library React developers used to test React components. It lets you mount your components, and manipulate them for your tests.

As a result of being around for so long, most legacy React projects likely still use Enzyme.

The issue with Enzyme is that it provides several APIs that encourage testing of implementation details (such as shallow(), find(), instance() and state()), rather than functionality (can the user click our UI, and does the UI change as a result?).

Eventually, a testing library that restricted developers to encourage the testing of functionality emerged, and it was called React Testing Library.

React Testing Library

React Testing Library is different to Enzyme, in that it avoids focusing on testing implementation details (such as a component's state, a component's methods, a class component's lifecycle methods, or child components).

Instead, React Testing Library's family of packages guides developers towards testing their UI in a more user-centric way (which is a fancy way of saying, instead of testing and checking a component's props/state, your tests click around your app, and try perform actions your users might perform).

Extra

Cypress

Cypress is an all-in-one end-to-end testing solution (we'll discuss what end-to-end testing is in a later chapter) - meaning it's both a test runner (like Jest), and a set of APIs for testing (like React Testing Library).

Cypress launches a web browser, and actually clicks through your app. It requires quite a bit more set-up to work properly than other test tools (such as special test users, test instances for your app), though it also gives you confidence that your app actually works.

On top of testing your entire web app from your computer, Cypress also supports testing from their cloud as part of your app's CI/CD.

These are the main tools we use for testing React. We'll cover which one to use in Chapter 3: Which testing framework to use (Enzyme or React Testing Library)?

I send a single email every two weeks with an article like this one, to help you be a better React developer.

Lots of developers like them, and I'd love to hear what you think as well. You can always unsubscribe.

I'll even send you a free PDF copy of the book you're reading, The Beginner's Guide to React Testing, to start with.

First Name

Email

I want more, sign me up!

Join 947 React developers that have signed up so far. See my privacy policy.