Jest is a testing framework widely used in React projects. It provides a bunch of useful utilities. Jest is easy to configure, supports code coverage, and is a powerful tool for testing React components and applications.

Setting up a new React project with Jest

Step 1: Create a new React project

Let's create a new React project using create-react-app in the terminal:

python
npx create-react-app .

Step 2: Install Jest library

Since Jest is not pre-installed with create-react-app, we must install it separately to enable testing for the React project. To install Jest, open the terminal and run the following command:

python
npm install jest

This will download and install Jest. Additionally, it will update the package.json file to include Jest in the dependencies section. The package.json should now include Jest similar to the following:

js
99
1
2
3
4
5
6
7
8
9
10
"dependencies": {
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^13.4.0",
  "@testing-library/user-event": "^13.5.0",
  "jest": "^27.5.1",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-scripts": "5.0.1",
  "web-vitals": "^2.1.4"
},

Project overview

The Jest learning will consist of theoretical and practical parts. In the following chapters, we will learn how to write tests for the Counter App. This approach will help us understand the theory better and apply our knowledge immediately through practical examples.

Note

The app has been entirely built but still lacks tests. Please take the time to inspect the app and ensure that everything is clear. As in the following chapters, we will dive into testing.