Setup Jest, Babel e testing library para testes unitários em React

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:

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.