Gain insights into writing automated tests for React apps with Jest and React Testing Library. Learn about simulating user interactions and testing asynchronous parts to enhance app reliability.

Testing React Apps with Jest and React Testing Library_468 x 60 copy 3.png

file.tar.gz

Jest - lesson 2

Jest with run command

Jest verbose

Jest coverage

Jest snapshot update

Jest react

Jest react-npm start

Jest react-copy

Jest react-C4

Jest react-C6

Jest react start c6

Jest - lesson 2-copy

Jest sandbox

Jest coverage-copy

Jest react-C4-start

Jest react-C4-start-5000

Jest react-npm start-5000

Jest react start c6-5000

Jest react-C8

The skills acquired from this course will allow you to write automated tests on your React app using Jest and React Testing Library, which are the de-facto testing tools for React. These tests will allow you to ship new versions of your app with confidence. The tests will also allow you to increase your release frequency, allowing you to get features to your customers quicker.

You will learn how to write robust tests that are resilient to breaking when code is improved and refactored, reducing maintenance costs.
The course will teach you how to simulate a user interacting with the app. Beyond that, it will also teach you how to robustly test asynchronous parts of the app.

Regular quizzes and exercises will reinforce knowledge throughout the course.

Testing React Apps with Jest and React Testing Library

# Starter project

The project for this lesson is the completed project from the last lesson. In this lesson, we will add tests to verify the different paths can be navigated to and the pages rendered correctly.

# Testing the `/newperson` path

We'll write the tests on this `App` component, where the React Router routes are declared. Create a file called `App.test.js` adjacent to `App.js` with the following import statements:

```jsx
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { MemoryRouter } from "react-router-dom";
import { App } from "./App";
```

We will use React Router's `MemoryRouter` component in our tests, as we did in the last lesson.

The first test will verify the `NewPersonPage` is navigated to and rendered when the **“Add new person”** button is clicked. Create the `test` function in `App.test.js` as follows:

```jsx
test("When 'Add new person' clicked on HomePage, should go to NewPersonPage", async () => {});
```

Inside the test, render the `App` component wrapped inside a `MemoryRouter` component:

```jsx
const user = userEvent.setup();
render(
  <MemoryRouter>
    <App />
  </MemoryRouter>
);
```

Click on the **“Add new person”** button in the next step in the test:

```jsx
await user.click(screen.getByText("Add new person"));
```

To verify the `NewPersonPage` component is rendered, we can check it’s title is rendered as the last step in the test:

```jsx
expect(await screen.findByText(/New person/)).toBeInTheDocument();
```

A copy of the project is in the code widget below. Clicking the **“Run”** button executes the tests.

Learn to test routes in React Router in this lesson.

Testing Routes

Introduction

Getting Started with Jest

Using Matchers

Getting Started with React Testing Library

React Testing Library Queries

Firing Events

Mocking

Testing Different Types of Components

Appendix

Testing Routes

Starter project

Testing the `/newperson` path

Testing Routes

Starter project

Testing the /newperson path

Testing the `/newperson` path