**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

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />
    <style>
      /* Custom Player Styles */
      .custom-player .plyr--video .plyr__controls {
        background-color: #1e2635;
        padding-bottom: 15px;
        padding-top: 15px;
      }

      .custom-player .plyr__control {
        color: #ff8a00;
      }

      .custom-player .plyr__control:hover,
      .custom-player .plyr--video .plyr__control[aria-expanded="true"] {
        color: white;
      }

      .custom-player .plyr__progress--played {
        background-color: #4f5e77;
      }

      .custom-player .plyr__progress--buffer {
        background-color: #36445c;
      }

      .custom-player .plyr__volume--display {
        color: #ff8a00;
      }

      .custom-player .plyr__control.plyr__tab-focus,
      .custom-player .plyr__control[aria-expanded="true"] {
        background-color: #ff8a00;
        color: #323232;
      }

      .custom-player .plyr__menu__value[data-value="0.5"] {
        color: #ff8a00;
      }

      .custom-player .plyr__controls .plyr__controls__item.plyr__time {
        font-size: 16px;
        font-family: "Hind Siliguri", sans-serif;
      }

      .custom-player .plyr__menu__container .plyr__control > span {
        font-family: "Hind Siliguri", sans-serif;
        align-items: inherit;
        display: flex;
        width: 100%;
        color: #36445c;
        font-size: 16px;
      }

      .custom-player .plyr__control--overlaid svg {
        left: 5px;
        position: relative;
        fill: white;
        width: 40px;
        height: 40px;
        margin: 10px;
      }

      .custom-player .plyr__progress .plyr__tooltip {
        font-size: 16px;
        font-family: "Hind Siliguri", sans-serif;
      }

      .custom-player .plyr__progress input[type="range"] {
        cursor: pointer;
      }

      .custom-player .plyr__control {
        color: white;
      }

      .plyr__control.plyr__control--overlaid {
        background-color: #ff8a00;
      }

      .custom-player .plyr__progress input[type="range"] {
        color: #ff8a00;
      }

      .custom-player .plyr__volume input[type="range"] {
        color: #ff8a00;
        cursor: pointer;
      }

      .custom-player .plyr__control:hover {
        background-color: #ff8a00;
        color: white !important;
      }

      .custom-player
        .plyr__menu__container
        .plyr__control[role="menuitemradio"][aria-checked="true"]:before {
        background-color: #ff8a00;
      }

      .custom-player .plyr__control:hover span {
        color: white;
      }

      .plyr--video {
        border: 3px solid #4f5e77;
        border-radius: 10px;
      }

      /* Custom Transcript Styles */
      .transcript {
        margin-top: 20px;
        padding: 10px;
        line-height: 1.5;
        height: 200px;
        overflow-y: auto;
        border: 3px solid #4f5e77;
        border-radius: 10px;
        background-color: white;
      }

      .highlight {
        background-color: #ff8a00;
        color: white;
        font-weight: 600;
        padding: 5px;
        transition: 0.2s ease-in;
      }

      .my-hidden {
        display: none;
      }

      .show-transcript-btn {
        margin-top: 30px;
        background-color: #ff8a00;
        font-family: inherit;
        font-size: 18px;
        font-weight: 600;
        color: white;
        border-radius: 20px;
        padding: 7px 14px;
        cursor: pointer;
        border: none;
        transition: 0.5s ease-in-out;
      }

      .show-transcript-btn:hover {
        background-color: #d27204;
      }
    </style>
  </head>
  <body>
    <div class="custom-player">
      <video
        width="100%"
        controls
        poster="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react-pro/jest/get-started-with-jest-video-poster-v1.png"
      >
        
        <source
          src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react-pro/jest/get-started-recording.mp4"
          type="video/mp4"
          data-plyr-config='{
          "quality": {
            "default": "720",
            "options": ["144", "240", "360", "480", "720", "1080"]
          }
        }'
        />
      </video>
    </div>
    <button class="show-transcript-btn js-show-transcript-btn">
      Show Transcript
    </button>
    <div class="transcript my-hidden"></div>

    <script src="https://cdn.plyr.io/3.6.8/plyr.js"></script>
    <script>
      const showTranscriptBtn = document.querySelector(
        ".js-show-transcript-btn"
      );

      showTranscriptBtn.addEventListener("click", handleClick);

      function handleClick() {
        const transcriptElement = document.querySelector(".transcript");
        transcriptElement.classList.toggle("my-hidden");

        if (transcriptElement.classList.contains("my-hidden")) {
          showTranscriptBtn.textContent = "Show Transcript";
        } else {
          showTranscriptBtn.textContent = "Hide Transcript";
        }
      }

      const player = new Plyr(".custom-player video", {
        controls: [
          "play-large",
          "play",
          "progress",
          "current-time",
          "mute",
          "volume",
          "captions",
          "settings",
          "fullscreen",
        ],
        volume: 0.5,
        muted: false,
        settings: ["captions", "quality", "speed"],
        captions: {
          active: true,
          language: "en",
        },
        fullscreen: {
          enabled: true,
          fallback: true,
          iosNative: true,
        },
        speed: {
          selected: 1,
          options: [0.5, 1, 1.5, 2],
        },
        quality: {
          default: "720",
          options: ["144", "240", "360", "480", "720", "1080"],
        },
      });

      player.on("qualitychange", (event) => {
        console.log(`Quality changed to ${event.quality}`);
      });

      player.on("ratechange", (event) => {
        console.log(`Speed changed to ${event.detail.plyr.speed}`);
      });

      /*
              Change the transcript data:
                - "start" is the time in seconds indicating from what time the text must be shown.
                - "end" is the time in seconds indicating when the text must be hidden.
                - "text" is the text to be shown.
              NOTE: We can specify any time segments (any start/end). It doesn't have to be exactly 10s.
            */
      const transcriptData = [
        {
          start: 0,
          end: 17,
          text: "Let's focus on setting up a new React project with Jest. I have created a new project with the help of npx create-react-app. Also in the source folder I have created an App component that represents the counter app.",
        },
        {
          start: 17,
          end: 29,
          text: "It has so easy logic of incrementing or decrementing the value. Alright, in the future we will write tests for this app.",
        },
        {
          start: 30,
          end: 44,
          text: "But before we start writing the tests we need to ensure that we have all dependencies installed. In the package.json we have already some predefined libraries for testing, but we also need to add the Jest library.",
        },
        {
          start: 44,
          end: 66,
          text: "npm install jest. And now we are ready to create our first test.",
        },
      ];

      const transcriptElement = document.querySelector(".transcript");

      function updateTranscript(currentTime) {
        // Clear previous transcript highlighting
        transcriptElement.querySelectorAll("p").forEach((p) => {
          p.classList.remove("highlight");
        });

        // Find the current segment based on the current time
        const currentSegment = transcriptData.find(
          (segment) =>
            currentTime >= segment.start && currentTime <= segment.end
        );

        // Highlight the current segment's text
        if (currentSegment) {
          const currentSegmentElement = transcriptElement.querySelector(
            `p[data-start="${currentSegment.start}"][data-end="${currentSegment.end}"]`
          );
          if (currentSegmentElement) {
            currentSegmentElement.classList.add("highlight");
          }
        }
      }

      function scrollToCurrentSegment() {
        const currentSegment = transcriptElement.querySelector(".highlight");
        if (currentSegment) {
          const transcriptElementHeight = transcriptElement.offsetHeight;
          const segmentOffsetTop = currentSegment.offsetTop;
          const segmentOffsetHeight = currentSegment.offsetHeight;

          // Calculate the top and bottom positions of the current segment
          const segmentTop = segmentOffsetTop - transcriptElement.offsetTop;
          const segmentBottom = segmentTop + segmentOffsetHeight;

          // Calculate the center position of the transcript div
          const transcriptCenter = transcriptElementHeight / 2;

          // Calculate the scroll offset to center the current segment
          const scrollOffset =
            segmentOffsetTop -
            transcriptElement.offsetTop +
            segmentOffsetHeight / 2 -
            transcriptCenter;

          transcriptElement.scrollTo({
            top: scrollOffset,
            behavior: "smooth",
          });
        }
      }

      player.on("timeupdate", (event) => {
        const currentTime = event.detail.plyr.currentTime;
        updateTranscript(currentTime);
        scrollToCurrentSegment();
      });

      const transcriptHTML = transcriptData
        .map(
          (segment) =>
            `<p data-start="${segment.start}" data-end="${segment.end}">${segment.text}</p>`
        )
        .join("");

      transcriptElement.innerHTML = transcriptHTML;
    </script>
  </body>
</html>

## Step 1: Create a new React project
Let's create a new React project using `create-react-app` in the terminal:
```
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:
```
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
"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.

Unlock the full potential of React and become a proficient Frontend developer with this course. Whether you're a beginner or an experienced developer looking to level up your skills, this hands-on course will take you on an exciting journey through the core concepts of React and its ecosystem, considering such valuable topics as React Router, Redux Toolkit, Formik, and Jest.

Explore the significance of additional tools that amplify the efficiency and productivity of React applications. Optimize performance. Furthermore, this revision will guarantee a robust groundwork as you delve into more advanced topics.

Discover how to implement navigation and routing in React apps using React Router. Learn about the core concepts of routes and URLs and how React Router facilitates the creation of dynamic, multi-page applications with seamless transitions between different views.

Research the capabilities of Redux Toolkit, which streamlines state management in React-Redux applications. This library provides opinionated tools and best practices, empowering developers to craft cleaner and more efficient code.

Formik is a powerful library that empowers React developers to quickly manage forms with optimal efficiency and best practices. We will explore the high-level capabilities of Formik, guiding you through the best practices for building robust and user-friendly forms in your React apps.

Master testing React applications with Jest. Learn how to ensure code quality, prevent bugs, and confidently refactor your projects with Jest's powerful features tailored for React testing.

Uncover suitable actions to take next by aligning them with your goals and interests.

Get Started with Jest

Setting up a new React project with Jest

Step 1: Create a new React project

Step 2: Install Jest library

Project overview

Awesome!

Get Started with Jest

Setting up a new React project with Jest

Step 1: Create a new React project

Step 2: Install Jest library

Project overview