Setup Jest, Babel and testing library for unit testing in React

Introduction

During code development, writing tests becomes important to bring more security and reliability to the process. Since March 2023, create-react-app ceased to be suggested as an option to start a React application in the official documentation. The purpose of this article is to provide a simple configuration using Jest, Babel and testing-library to enable unit testing in React, without using the included in create-react-app for this purpose.

Babel

It's a JavaScript compiler used to convert ECMAScript 2015+ code to an earlier version of JavaScript compatible with browsers and environments.

Jest

It's a testing framework created by Facebook, with simple configuration and usage, allowing tests to be run in isolation.

Testing library

It's a lightweight library that allows simulating tests in a way similar to how the user will interact with the application.

Setup

To add Babel:

yarn add @babel/core @babel/preset-env @babel/preset-react babel-jest --save-dev

• @babel/core: brings the base of Babel to application.
• babel-jest, @babel/preset-react: they enable the transformation of JavaScript code inside the testing environment, to enable test execution.
• @babel/preset-env: it allows you to use the latest version of JavaScript without needing to define which syntax transformation is necessary to be compatible with the environment to be used.

To add Jest:

yarn add jest jest-environment-jsdom --save-dev

• jest: enables the execution of unit tests.
• jest-environment-jsdom: provides the JSDOM testing environment, which simulates a DOM environment as if it were in the browser.

To add testing-library:

yarn add @testing-library/react @testing-library/jest-dom @testing-library/user-event --save-dev

• @testing-library/react: adds the testing-library for use in React applications.
• @testing-library/jest-dom: brings additional matchers for Jest tests, making them more declarative.
• @testing-library/user-event: allows simulating interactions that users will have with the application, such as clicks, typing.

Add Jest configuration file, jest.config.js , to the root of the project:

const config = {
  testEnvironment: "jsdom",
};

module.exports = config;

Where in testEnvironment will be set the test environment.

Add Babel configuration file, babel.config.js , to the root of the project:

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

Where in presets will be defined the presets to be used.

Add script to run tests in package.json:

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

The formats of the test files to be executed by default:

• .test.js
• .spec.js
• .js if inside __tests__ folder

Running yarn test will execute the tests.

Execution example

Now I will present an example of running a test after the configuration has been done, to demonstrate the result.

An example component will be defined in Example.js, which renders the text Example:

import React from "react";

const Example = () => (
  <h1>Example</h1>
)

export default Example;

And a test file for the component Example.test.js, which will validate if the text Example appears after its rendering:

import React from "react";
import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";

import Example from "./Example";

describe("<Example />", () => {
  it("should render component", () => {
    render(<Example />);

    const element = screen.getByText("Example");

    expect(element).toBeInTheDocument();
  });
});

Finally, yarn test was executed in the terminal, obtaining the following result:

Conclusion

The idea is to present a setup using Babel, Jest and testing-library for unit tests in React, without relying on what is included in create-react-app for this purpose. The example above was mainly to demonstrate that the test was successfully executed after the configuration. In the next article, I will focus more on how tests work and the different scenarios that can be tested using testing-library with Jest.