DEV Community

Cover image for Testes no Front-end: Escrevendo seu primeiro teste
Neilton Seguins
Neilton Seguins

Posted on

1

Testes no Front-end: Escrevendo seu primeiro teste

No último artigo eu falei um pouco sobre testes no front-end, os motivos de testar suas aplicações, tipos de testes e principais ferramentas para isso.

Neste artigo iremos escrever nosso primeiro teste para um componente de uma aplicação React. Vamos lá!

Criando o componente

Suponha que precisamos testar o seguinte componente React chamado "Counter", que exibe um contador que é incrementado sempre que um botão é clicado:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function incrementCount() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Contador: {count}</h1>
      <button onClick={incrementCount}>Incrementar</button>
    </div>
  );
}

export default Counter;
Enter fullscreen mode Exit fullscreen mode

Esse componente não recebe nenhuma prop, ele tem apenas um estado, o contador (count) que é incrementado sempre que o botão "Incrementar" é clicado.

Perfeito! Então vamos criar um teste para este componente.

Testando o componente <Counter />

Para testar componentes React eu vou usar o Jest e o Testing Library. O Jest é bem fácil de usar e servirá para fazermos asserções sobre nosso código, enquanto que o Testing Library serve para para facilitar a renderização dos componentes e a interação com eles.

Se você criou sua aplicação React com o Create React App (CRA) é provável quee já tenha tanto o jest como os recursos do React Testing Library no seu projeto. Se não, se você usou o Vite por exemplo, pode ser que precise instalar essas dependências. Para instalar é bem simples, é só digitar no seu terminal

npm install --save-dev jest @testing-library/react @testing-library/jest-dom
Enter fullscreen mode Exit fullscreen mode

Ambiente preparado, então vamos ao teste.

Vamos criar um arquivo de teste para o componente Counter, com o nome Counter.test.js:

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom/extend-expect';
import Counter from './Counter';

describe('Counter', () => {
  it('Deve renderizar o contador sem erros', () => {
    render(<Counter />);
    const textoContador = screen.getByText('Contador: 0');
    expect(textoContador).toBeInTheDocument();
  });

  it('Deve incrementar o contador quando o botão é clicado', () => {
    render(<Counter />);
    const botaoIncrementar = screen.getByText('Incrementar');
    const novoTextoContador = screen.getByText('Contador: 1');
    userEvent.click(botaoIncrementar);
    expect(novoTextoContador).toBeInTheDocument();
  });
});
Enter fullscreen mode Exit fullscreen mode

Tá, mas o que significa cada linha deste teste? Vou explicar.

Primeiro precisamos fazer as importações dos utilitários que iremos precisar. Para renderizar nosso componente importamos o render, para observar o que foi renderizado utilizamos screen e para fazer consultas aos elementos desse componente utilizamos o getByText(). Não se preocupe com essas funções e utilitários agora, irei trazer explicações mais detalhadas sobre cada um em outros artigos.

Para agrupar e organizar melhor os testes deste componente, eu utilizo o describe e dou uma descrição que nada mais é que o nome do componente, mas você pode fazer descrições mais detalhadas.

O teste em si mesmo, só começa quando declaramos ele, com o it(). O it recebe dois parâmetros, que é a descrição do cenário de teste e uma função que executará o teste.

Como boa prática, eu gosto de seguir uma ordem ao escrever um cenário de teste.

  1. Renderizo o componente que estou testando com o render;
  2. Faço uma consulta a um elemento usando o screen e uma query de consulta, neste caso o getByText();
  3. Faço uma asserção, que é a comparação entre o que eu espero e o que eu recebo no meu teste;

Neste primeiro teste eu tenho dois cenários:

  • O primeiro verifica se o componente <Counter /> é renderizado sem erros e se o contador é iniciado com o valor 0.
  • O segundo simula um clique no botão "Incrementar" e verifica se o contador é incrementado corretamente.

O clique no botão é realizado utilzando o utilitário userEvent, que possui uma grande quantidade de eventos que simulam interações com a página, como digitar em campos de texto, selecionar opções em um select, etc.

Como outra boa prática eu gosto de salvar o que é retornado das consultas em variáveis e dar nome à elas que sejam significativos. Por exemplo, eu usei o textoContador para receber o que foi retornado de resultado da minha consulta a este elemento. E chamei de botaoIncrementar o botão que obtemos ao fazer a consulta pelo seu texto também.

Você pode perceber que ao fazer isso, fica bem mais simples de ler o teste, por exemplo, nesta asserção:

expect(textoContador).toBeInTheDocument();
Enter fullscreen mode Exit fullscreen mode

Ao ler eu claramente sei o que esse teste faz, que é: "Espero que o texto do contador esteja no documento".

Executando os testes

Para executar os testes de sua aplicação é bem simples, é só digitar em um terminal

npm test
Enter fullscreen mode Exit fullscreen mode

Este script vem como padrão ao iniciar a aplicação com o CRA.


E prontinho! Em menos de cinco minutos você escreveu o que chamamos de testes de unidade para um componente React. Este tipo de teste é simples, onde estamos testando uma unidade, no caso um componente, que é uma função, e como esse componente tem sua própria responsabilidade, que é renderizar o contador e incrementá-lo ao clicar em um botão, ele pode ser facilmente testado com testes esse.

Dependendo do projeto, pode ser necessário escrever testes mais complexos e abrangentes para garantir a qualidade do código.

Maneiro né? Se está gostando dessa série de artigos sobre testes no Front-end comenta aí o que tem achado e se esse conteúdo tem te ajudade de alguma forma!

Até a próxima!

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