Artigo original: React Testing Library – Tutorial with JavaScript Code Examples

Este artigo ajudará você a aprender o que é a React Testing Library e como você pode usá-la para testar sua aplicação em React.

Este tutorial assumirá que você já conhece um pouco de JavaScript básico e que entende os fundamentos de como o React funciona.

A React Testing Library é uma ferramenta utilitária de teste, construída para testar a árvore real do DOM renderizada pelo React no navegador. O objetivo da biblioteca é ajudá-lo a escrever testes que se assemelhem ao modo como um usuário utilizaria a aplicação. Ela pode dar a você mais confiança de que sua aplicação funciona como esperado quando um usuário real a utiliza.

A biblioteca faz isso fornecendo métodos utilitários que consultarão o DOM da mesma maneira que um usuário faria. Por exemplo, se um usuário encontrasse um botão para 'Salvar' seu trabalho em texto, a biblioteca forneceria a você o método getByText(). Você vai aprender mais sobre os métodos da biblioteca para testar mais tarde.

Primeiramente, porém, vamos ver um exemplo da React Testing Library em ação.

Como usar a React Testing Library

Uma aplicação React criada com Create React App (ou CRA) já inclui tanto a React Testing Library quanto o Jest por padrão. Então, tudo o que você precisa fazer é escrever seu código de teste.

Se você quiser usar a React Testing Library fora de uma aplicação do CRA, precisa instalar tanto a React Testing Library quanto o Jest manualmente com o NPM:

npm install --save-dev @testing-library/react jest

Instalando a React Testing Library e o Jest

Você precisa instalar o Jest porque a React Testing Library apenas fornece métodos para ajudar você a escrever os scripts de teste. Desse modo, você ainda precisa de um framework de teste do JavaScript para executar o código de teste.

Você também pode usar outros frameworks de teste, como o Mocha ou o Jasmine, mas eu vou usar o Jest porque ele funciona bem com o React e com a React Testing Library.

Para este tutorial, eu vou criar uma aplicação em React com o CRA usando o modelo padrão:

npx create-react-app react-test-example

Criando uma aplicação em React com o CRA

Depois que a aplicação for criada, você deve ter um arquivo App.test.js já gerado dentro da pasta src/. O conteúdo do arquivo seria o seguinte:

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

Código de teste CRA padrão

O código de teste acima usou o método render da React Testing Library para renderizar virtualmente o componente App importado do arquivo App.js e anexá-lo ao nó document.body. Você pode acessar o HTML renderizado através do objeto screen.

Para ver o resultado da chamada de render(), você pode usar o método screen.debug():

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  screen.debug();
});

Depurando os elementos renderizados pela React Testing Library

Abra seu terminal e execute o comando npm run test. Você verá toda a árvore document.body renderizada no seu console:

<body>
  <div>
    <div class="App">
      <header class="App-header">
        <img alt="logo" class="App-logo" src="logo.svg" />
        <p>
          Edite <code>src/App.js</code> e salve para recarregar.
        </p>
        <a
          class="App-link"
          href="https://reactjs.org"
          rel="noopener noreferrer"
          target="_blank"
        >
          Aprenda React
        </a>
      </header>
    </div>
  </div>
</body>

Corpo do documento renderizado pela React Testing Library

O objeto screen também possui os métodos de teste do DOM já vinculados a ele. É por isso que o código de teste acima poderia usar screen.getByText() para consultar o elemento de âncora <a> para ver o seu valor de textContent.

Finalmente, o código de teste confirmará se o elemento de link está disponível no objeto document ou não com o método expect do Jest:

expect(linkElement).toBeInTheDocument();

Quando o elemento de link não for encontrado, o Jest marcará o teste como falhado (em inglês, fail).

Métodos da React Testing Library para encontrar elementos

A maioria dos seus casos de teste para o React deve usar métodos para encontrar elementos. A React Testing Library fornece vários métodos para encontrar um elemento por atributos específicos além do método getByText() acima:

  • getByText(): encontre o elemento pelo valor do atributo textContent
  • getByRole(): encontre o elemento pelo valor do atributo role
  • getByLabelText(): encontre o elemento pelo valor do atributo label
  • getByPlaceholderText(): encontre o elemento pelo valor do atributo placeholder
  • getByAltText(): encontre o elemento pelo valor do atributo alt
  • getByDisplayValue(): encontre o elemento pelo valor do atributo value, geralmente para elementos <input>
  • getByTitle(): encontre o elemento pelo valor do atributo title

Quando esses métodos não forem suficientes, você pode usar o método getByTestId(), que permite encontrar um elemento pelo atributo data-testid:

import { render, screen } from '@testing-library/react';

render(<div data-testid="custom-element" />);
const element = screen.getByTestId('custom-element');

Obter elemento pelo valor de data-testid

Como selecionar elementos usando atributos data-testid não se assemelha à maneira como um usuário real usaria sua aplicação, a documentação recomenda que você o use apenas como último recurso quando todos os outros métodos falharem em encontrar seu elemento. Geralmente, encontrar por Text, Role ou Label deverá cobrir a maioria dos casos.

Como testar eventos gerados pelo usuário com a React Testing Library

Além de descobrir se os elementos estão presentes no corpo do seu documento, a React Testing Library também ajudará você a testar eventos gerados pelo usuário, como clicar em um botão e digitar valores em uma caixa de texto.

A biblioteca user-event é uma biblioteca complementar para simular a interação do usuário com o navegador. Suponha que você tenha um componente de botão para alternar entre os temas Claro (light) e Escuro (dark), da seguinte maneira:

import React, { useState } from "react";

function App() {
  const [theme, setTheme] = useState("light");

  const toggleTheme = () => {
    const nextTheme = theme === "light" ? "dark" : "light";
    setTheme(nextTheme);
  };

  return <button onClick={toggleTheme}>
      Current theme: {theme}
    </button>;
}

export default App;

Em seguida, você cria um teste que encontra o botão e simula um evento de clique usando o método userEvent.click(). Depois que o botão for clicado, você pode afirmar que o teste é um sucesso inspecionando se o texto do elemento do botão contém "dark" ou não:

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import App from "./App";

test("Test theme button toggle", () => {
  render(<App />);
  const buttonEl = screen.getByText(/Current theme/i);

  userEvent.click(buttonEl);
  expect(buttonEl).toHaveTextContent(/dark/i);
});

Testando o clique do usuário em um botão e afirmar o conteúdo

É assim que você pode simular eventos do usuário com a React Testing Library. A biblioteca user-event também possui vários outros métodos, como dblClick, para clicar duas vezes em um elemento, e type, para digitar em uma caixa de texto. Você pode verificar a documentação da biblioteca user-event (documentação em inglês) para mais informações.

Conclusão

Quanto mais seus testes se assemelharem ao modo como seu software é usado, mais confiança eles poderão dar a você.
(Fonte: Kent C.Dodds, autor da React Testing Library)

Um usuário real não verá os detalhes de implementação como qual estado (em inglês, state) ou props estão atualmente em seus componentes do React. Eles só veem os elementos HTML renderizados no navegador. A React Testing Library o incentiva a testar o comportamento de sua aplicação em vez de detalhes de implementação.

Ao testar sua aplicação da maneira como um usuário a utilizaria, você pode ter certeza de que sua aplicação se comportará como esperado quando todos os casos de teste forem aprovados. Para mais informações, você pode visitar a documentação da React Testing Library (documentação em inglês).

Se você gostou deste artigo e deseja melhorar em suas habilidades em JavaScript, recomendo que confira meu novo livro Beginning Modern JavaScript aqui (e-book em inglês).

beginning-js-cover

O livro foi projetado para ser fácil de entender e acessível a qualquer pessoa que queira aprender JavaScript. Ele fornece um guia passo a passo que ajudará você a entender como usar o JavaScript para criar uma aplicação dinâmica.

Posso prometer que você realmente sentirá que entende o que está fazendo com JavaScript.

Até a próxima!