Implementing React Tests with Jest

We are going to turn our attention to creating automated tests for the frontend with Jest. Jest is the de facto testing tool in the React community and is maintained by Facebook. Jest is included in Create React App (CRA) projects, which means that it has already been installed and configured in our project.

We are going to start by testing a simple function so that we can get familiar with Jest before moving on to testing a React component.

Getting started with Jest

We'll start to get familiar with Jest by adding some unit tests to the mapQuestionFromServer function in QuestionsData.ts. So, let's open our frontend project in Visual Studio Code and carry out the following steps:

1. Remove the example test that was installed when the project was created with Create React App by removing the App.test.tsx file in the src folder.

2. Create a new file called QuestionsData.test.ts in the src folder that contains the following content: