Setup Jest, Babel e testing library para testes unitários em React
Tags: react, jest, babel, testinglibrary
Published: 2024-03-26 20:48:28

## Introdução

Durante o desenvolvimento de código torna-se importante a escrita de testes para trazer mais segurança e confiabilidade durante o processo.
Desde março de 2023, o create-react-app deixou de ser sugerido como opção para iniciar uma aplicação React na doc oficial. A ideia desse artigo é abordar uma configuração simples utilizando Jest, Babel e testing-library, para permitir realizar testes unitários em React, sem utilizar o incluído no create-react-app para esse fim. 

## Babel

É um compilador javascript que é usado principalmente para converter código ECMAScript 2015+ para versão anterior de javascript, compatível com navegadores e ambientes.   

## Jest

É um framework de testes criado pelo Facebook, de simples configuração e uso, que permite rodar testes de forma isolada.

## Testing library

É uma lib leve que permite simular testes de forma semelhante ao que o usuário vai interagir com a aplicação.

## Setup

Para adicionar o Babel:

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

- `@babel/core`: traz a base do Babel para a aplicação.
- `babel-jest`, `@babel/preset-react`: possibilitam a transformação do código javascript dentro do ambiente de teste, para permitir a execução dos testes.
- `@babel/preset-env`: permite usar a última versão de javascript, sem precisar definir que transformação de sintaxe é necessária para ser compatível com o ambiente que vai ser utilizado.

Para adicionar o Jest:

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

- `jest`: possibilita a realização dos testes unitários.
- `jest-environment-jsdom`: fornece o ambiente de teste do JSDOM, que simula um ambiente DOM como se estivesse no navegador.

Para adicionar a testing-library:

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

- `@testing-library/react`: adiciona a testing-library para uso em aplicações React.
- `@testing-library/jest-dom`: traz uma maior quantidade de matchers para os testes de Jest, fazendo eles mais declarativos.
- `@testing-library/user-event`: permite simular interações que os usuários terão com a aplicação, como por exemplo cliques, escrita.

Adicionar arquivo de configuração do Jest, `jest.config.js` , na raiz do projeto:

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

module.exports = config;
```

Onde o `testEnvironment` vai definir o ambiente de teste.

Adicionar arquivo de configuração do Babel, `babel.config.js` , na raiz do projeto:

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

Onde dentro de `presets` será colocado os presets que serão utilizados.

Adicionar script para rodar testes no `package.json`:

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

Os formatos dos arquivos de teste que vão ser rodados por default: 

- `.test.js`
- `.spec.js`
- `.js` se dentro da pasta `__tests__`

Rodando `yarn test` os testes serão executados.

## Exemplo de execução

Agora vou apresentar um exemplo de execução de um teste após a configuração realizada, para mostrar o resultado.

Será definido um componente de exemplo em `Example.js`, que traz um texto `Example`:

```
import React from "react";

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

export default Example;
```

E um arquivo de teste do componente `Example.test.js`, que vai validar se após a renderização dele aparecerá o texto `Example`:

```
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();
  });
});
```

Por fim foi executado no terminal `yarn test`, obtendo o seguinte resultado:

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

## Conclusão

A ideia é apresentar um setup utilizando Babel, Jest e testing-library para a realização de testes unitários em React, sem utilizar o que está incluído no create-react-app para esse fim. O intuito do exemplo acima foi mais mostrar que o teste foi executado com sucesso após a configuração, no próximo artigo focarei mais em como funciona os testes e os diferentes cenários que podem ser realizados a partir da testing-library com o Jest.