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

# The function we want to test

Here is the function we want to test:

```javascript
function isEmail(email) {
  const regex = new RegExp(/^[^@\s]+@[^@\s.]+\.[^@.\s]+$/);
  return regex.test(email);
}
```

The function validates whether an email address is formatted correctly. The function has no dependencies and doesn't mutate the `email` parameter passed into it, which means it is a pure function. Pure functions are simple to test because all their logic is isolated.

We want to write the following two tests:

- The function should return `true` when a valid email is passed into it.
- The function should return `false` when an invalid email is passed into it.

# Writing a happy path test

The first test we’ll write is to verify that the function correctly identifies a valid email address.

The test is available to execute further down the page. Before we run the test, we'll look at the test code in the following paragraphs.

We'll write the test in a function. The name of the function will describe the test:

```javascript
function should_return_true_when_valid_email() {}
```

In the function implementation, we will create a variable containing the valid email address:

```javascript
function should_return_true_when_valid_email() {
  const email = "bill@somewhere.com";
}
```

Next, we will invoke the function we are testing with our test email address:

```javascript
function should_return_true_when_valid_email() {
  const email = "bill@somewhere.com";
  const result = isEmail(email);
}
```

We’ll put the result of the function test in a `result` variable.

Now we can check the return value of the function we are testing is as we expect:

```javascript
function should_return_true_when_valid_email() {
  const email = "bill@somewhere.com";
  const result = isEmail(email);
  const pass = result === true;
}
```

We have put whether the test meets our expectations in a `pass` variable.

Next, we need to fill in the output about whether the test passed:

```javascript
function should_return_true_when_valid_email() {
  const email = "bill@somewhere.com";
  const result = isEmail(email);
  const pass = result === true;
  console.log(
    pass ? "✅ PASS:" : "❌ FAIL:",
    "The function should return true when a valid email is passed into it"
  );
}
```

Once we have output the result of the test to the console, we’ll learn whether the test has passed or not:

```javascript
function should_return_true_when_valid_email() {
  const email = "bill@somewhere.com";
  const result = isEmail(email);
  const pass = result === true;
  console.log(
    pass ? "✅ PASS:" : "❌ FAIL:",
    "The function should return true when a valid email is passed into it"
  );
  return pass;
}
```

The `isEmail` function and the test are in the code widget below. Run the widget to see whether the test passes.

Write two automated tests without any tools to learn how difficult the practice can be. This will enable you to understand the benefits of these tools in the future.

Writing a Test Without Tools

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

Writing a Test Without Tools

The function we want to test

Writing a happy path test