Simple React Unit Test with Jest and Babel

4 min readMar 27, 2022

In this section, we will look at how to configure Jest and Testing library to test a simple React app.

Let us create the below React component called Comment.jsx. Our objective is to write a test case for this component.

This component accepts two props: name and description and renders the data. We have some styling in this component from bootstrap.js.

When we write a test case, we do not want to test the CSS. We only want to test if the component renders the name and the description correctly.

The component when rendered, looks like below.

Comment.jsx

import React from "react";
const Comment = (props) => {
   return (
         <>
           <div className="container">
               <div className="row justify-content-center">
                   <div 
                      className="col col-xl-11 col-lg-11 col-md-10 col-sm-8 col-xs-8">
                      <div 
                         className="card" 
                         style={{ 'width': '80%' }}>
                            
                        <div 
                           className="card-body" 
                           style={{ 'backgroundColor': '#edf0ed' }}>
                                
                                <b>{props.name} says</b>
                                <p>{props.description}</p>
                            
                          </div>
                      </div>
                    </div>                </div>
            </div>
            <br />
        </>)}export default Comment;

Installing dependencies and packages for testing

Jest is one of the main testing libraries of React.

More information about getting started with Jest can be found at their official page.

First, let us install Jest into our project. Navigate to the root project folder and run the below command

npm install --save-dev jest

Babel is a Javascript complier that converts ES2015+ into backward compatible Javascript.

More information about Babel can be found at their official page.

Next, we install babel/preset-react and @babel/preset-env package. This will convert our JSX syntax into Javascript.

npm install --save-dev @babel/preset-react
npm install --save-dev @babel/preset-env

Then, we add the @testing-library/jest-dom package.

This library provides a list of custom jest matchers that we can use in our test cases.

npm install --save-dev @testing-library/jest-dom

You should see the below dependencies added in your package.json file (The versions might be different based on the latest version available at the time).

Configuring Babel and Jest

We create two new files in our project root folder.

jest.config.json

In this file, we configure files extensions that will be tested Here, we configure extensions of type .js and .jsx to be tested.

We also mock static files like images, audio and video files in a file called fileMock.js

Similarly, we mock any styling in our project with CSS or less in a file called styleMock.js

This will prevent testing static assets and CSS when we run our test cases.

{
   "testEnvironment": "jsdom",
      "moduleFileExtensions": [ "js", "jsx"],
   "roots": [
   "src"
   ],
   "moduleNameMapper": {
   "src/(.*)": "<rootDir>/src/$1",
         "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
         "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
},
   "setupFilesAfterEnv": [
   "<rootDir>/src/setupTests.js"
     ]
}

Next, create a folder in the root project called __mocks__ and add the files fileMock.js and styleMock.js

Inside both the files add the below line.

module.exports = {};

babel.config.js

The Babel config file exports the two dependencies that we had installed earlier. These dependencies will auto-convert our files into the latest browser readable Javascript.

module.exports = {
   presets:[
       ["@babel/preset-react", {
         "runtime": "automatic"
        }],
   "@babel/preset-env",  
   ]
}

Writing test cases for Comment.jsx

Create a new file called Comment.test.jsx

This file tests that the name and description is rendered correctly.

We define a simple test where we render the component with props name=Jake and description=My blog comment

We then test that these values are rendered correctly.

We use the screen.getByText() to check if our data is available in any element in the DOM.

Our test expects “Jake says” and “My blog comment” to be present in the DOM.

Comment.test.jsx

import React from 'react';
import { render, screen } from '@testing-library/react';
import Comment from './Comment';

   test('Comment component is rendered correctly', () => {
      render(<Comment 
               name={'Jake'} 
                description={'My blog comment'}/>);

      expect( 
             screen.getByText('Jake says')
             ).toBeInTheDocument();      expect(
             screen.getByText('My blog comment')
             ).toBeInTheDocument();   });