Iniciando com testes unitários no Create React App

Introdução

Se você chegou aqui, não tenho dúvidas que você sabe o que são testes unitários e sua importância, sendo assim, vou te deixar com dois parágrafos muito bons sobre testes automatizados para aplicações em React e logo em seguida vamos pro código.

Quando escrevemos testes automatizados para aplicações em React, provavelmente uma grande parte dos nossos testes será sobre algum componente de UI e não apenas funções de regras de negócio. Por isso, precisamos de uma biblioteca que nos auxilie a interagir com o DOM, renderizando e encontrando os elementos que precisamos verificar nos testes.

A React Testing Library surgiu com uma abordagem centrada no usuário e com padrões para enfatizar boas práticas de semântica e acessibilidade. E hoje já faz parte do pacote padrão de uma aplicação feita com o Create React App. - Eduarda Scharnhorst em React: Automatizando os testes em aplicações front-end.

Mão na massa

Imagine que você acabou de gerar uma aplicação com o CLI: Create React App.
Se você não sabe como fazer isso, visite a documentação clicando aqui.

A aplicação terá um arquivo src/App.js com a seguinte estrutura HTML(JSX):

<div className="App">
  <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <p>
      Edit <code>src/App.js</code> and save to reload.
    </p>
    <a
      className="App-link"
      href="https://reactjs.org"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn React
    </a>
  </header>
</div>

E já terá um teste dentro do arquivo src/App.test.js. É importante explicar aqui que o nome do componente + .test dentro do mesmo diretório é uma convenção/boa prática pois a localização do teste fica mais intuitiva e não temos problemas de paths enormes em nossos imports.

Exemplificando, se você tem uma pasta chamada UI e dentro dela o componente Header.js seu teste será Header.test.js.
Outro uso comum seria ter uma pasta chamada Header e dentro dela o arquivo index.js, nesse caso seu arquivo de teste continuaria sendo Header.test.js, só mudaria o caminho do import;

Analisando o código

Vamos dar uma olhada no código inicial dentro de src/App.test.js.

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

Passo a passo

Dificultando as coisas

Vamos realizar algumas alterações para podermos abordar outros métodos e discutir:

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

describe("Componente App", () => {
  it("renders learn react link", () => {
    render(<App />);
    const linkElement = screen.getByText(/learn react/i);
    expect(linkElement).toBeInTheDocument();
  });
  it("renders learn react link as anchor", () => {
    render(<App />);
    const linkElement = screen.getByText(/learn react/i);
    expect(linkElement).toHaveAttribute("href");
  });
});

describe é um método opcional que você pode utilizar para envelopar um conjunto de testes. Aqui estamos utilizando para delimitar os testes do nosso componente App e a resposta ao rodar os testes fica da seguinte maneira:

it, como falamos anteriormente está substituindo o test e pela minha experiência pessoal é o método mais utilizado no mercado.

E qual é o problema que temos aqui?

O teste vai passar com qualquer elemento que tenha um href, por exemplo, se for uma div o teste vai retornar com sucesso.
O correto seria:

it("renders learn react link as anchor", () => {
  render(<App />);
  // adicionando `.closest('a')`
  const linkElement = screen.getByText(/learn react/i).closest("a");
  expect(linkElement).toHaveAttribute("href");
});

Então esse último tópico foi gratuito só para chamar atenção em como você realiza seus testes e mostrar que 100% de cobertura não quer dizer uma aplicação sem bugs. :)

Referências

• Testing in React with Jest and Enzyme: An Introduction;
• JEST Expect;
• How to test anchor’s href with react-testing-library;
• Crie um novo React App.