Setting up Jest is pretty straightforward and painless. You can access the entire code used in this chapter in the GitHub repository, inside of the CH02 folder. However, we suggest that you get started with an empty folder and walk through the hands-on tutorial, in order to get familiar with the process.

1. Create the project and initialize it with YARN.

Create an empty folder and initialize it with YARN or npm. In this book, we will use YARN, but feel free to explore. To initialize the project, open a Terminal of your choice and run the following commands:

mkdir CHO2
cd CHO2
yarn init
Galaxy-A7-2017:CH02 sureshkumarmukhiyahvl$ yarn init
yarn init v1.12.1
question name (CH02): testing-redux-application
question version (1.0.0):
question description: Testing React and Redux applications
question entry point (index.js):
question repository url:
question author: Suresh Kumar Mukhiya
question license (MIT):
question private:
success Saved package.json

2. Install the required dependencies.

Let's install react, Jest, babel-jest, and other required dependencies, in order to start testing our application. Just adding jest is sufficient to start testing using Jest, but our aim is to test the Redux application, including React. In order to do that, we need to include ES6 and React in our repository:

yarn add --dev jest
yarn add react react-router-dom --exact
yarn add babel-jest babel-preset-env babel-preset-react react-test-renderer regenerator-runtime --dev

3. Initialize Babel.

More information about Babel can be found at the official documentation site (https://babeljs.io). We will start to use the Babel preset by initializing it with a .babelrc file. Create the file and add the following lines of code:

{
 presets: ["env", "react"]
}

4. Add the test script to the package.json file:

{
 "scripts": {
   "test": "jest"
 }
}

Following the standard folder structure will make the testing process easier. In our code base, we will include all of our tests inside of the __tests__ folder, and the test file will append -test at the end of the filename being tested. For example, in order to test the Button.js file, we will create a Button-test.js file inside of the __tests__ folder. We recommend following this structure throughout the entire project.