Setup Jest, Babel and testing library for unit testing in React
Tags: react, jest, babel, testinglibrary
Published: 2024-03-26 20:48:40

## 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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fd1e98j5dk7kz5btjxex.png)

## 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.