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 importance of learning to use Jest locally

The majority of the lessons in this course have code widgets that allow you to take exercises directly in the browser without installing anything locally. This is great for learning many topics in this course.

However, you will likely use Jest on your machine in a real-world project and interact with its command-line interface. 

If you don’t have a code editor or Node.js installed on your machine, visit the [appendix](https://www.educative.io/courses/testing-react-apps-jest-react-testing-library/technical-requirements-for-working-locally) to help you do so.

# Installing Jest

Open the [starter project](https://github.com/carlrip/testing-react-apps-with-jest-and-rtl-code/tree/master/Chapter-02/Lesson-02/start) in the code editor of your choice. The `isEmail` function with its tests in the `src` folder should be visible. There is also an `isUrl` function with some tests.

If you are unsure of how to begin from the starter project, visit the [appendix](https://www.educative.io/collection/page/4619705736232960/5754652954460160/5994455156391936).

To install Jest into the project, execute the following command in a terminal window:

```shell
npm install --save-dev jest
```

This will install Jest into the project as a development dependency.

# Allowing Jest to work with ESM

By default, Jest works with code written with CommonJS modules. However, we are used to working with ECMAScript modules (ESM) when building React apps. We can install and configure [Babel](https://babeljs.io/) to use ESM in our Jest tests.

Let’s install Babel and a couple of other plugins by running the following command in a terminal:

```shell
npm install --save-dev babel-jest @babel/core @babel/preset-env
```

Here’s an explanation of the packages we have just installed:

- `babel-jest`: This allows Jest to transpile our code using Babel.

- `@babel/core`: This is the core Babel library.

- `@babel/preset-env`: This is a collection of plugins that allow us to use the latest JavaScript features while still targeting browsers that don’t support them.

We can configure Babel in a file called `babel.config.js` in the root directory. Add the following content to this file:

```javascript
module.exports = {
  presets: [["@babel/preset-env"]],
};
```

This sets Babel up to use the preset configuration we installed.

# Running all tests

Before running the tests, we are going to add a command in our `package.json`. Add a `test` command in a `scripts` field:

```json
{
  ...,
  "scripts": {
    "test": "jest"
  }
}
```

Let's run the npm script we just created in a terminal to execute the tests:

```shell
npm run test
```

The 4 tests in both test files execute successfully:

Learn to use Jest in the local code editor in this lesson. 

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

Installing and Running Jest

The importance of learning to use Jest locally

Installing Jest

Allowing Jest to work with ESM