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.