DEV Community

Eduardo Henrique Gris
Eduardo Henrique Gris

Posted on

3 1 1 1 1

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;
Enter fullscreen mode Exit fullscreen mode

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",
  ],
};
Enter fullscreen mode Exit fullscreen mode

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

Adicionar script para rodar testes no package.json:

"scripts": {
  "test": "jest",
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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();
  });
});
Enter fullscreen mode Exit fullscreen mode

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

Image description

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.

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up