Testes Unitários com Jest

Vamos explorar o Módulo 15: Testes Unitários com Jest detalhadamente. O foco desse módulo é ensinar como realizar testes unitários usando o Jest, um framework de testes popular para aplicações JavaScript, especialmente em projetos React. Vamos abordar a introdução aos testes unitários, a instalação e uso do Jest, e como escrever e executar testes em React.

1. Introdução aos Testes Unitários

O que são testes unitários?

Testes unitários são uma forma de testar componentes ou funções de maneira isolada para garantir que cada parte do seu código funcione como esperado. Eles são escritos para verificar se uma "unidade" específica de código (uma função, método ou componente) se comporta corretamente de acordo com as especificações.

No contexto de aplicações React, os testes unitários podem verificar se componentes, funções e hooks estão funcionando corretamente e gerenciando seu estado, eventos e renderizações de maneira esperada.

Benefícios dos Testes Unitários

• Facilidade de manutenção: Testes ajudam a identificar rapidamente problemas no código e evitam regressões (erros que aparecem depois de mudanças).
• Maior confiança: Ao garantir que cada unidade de código funcione isoladamente, você pode modificar o código com mais confiança.
• Documentação: Testes ajudam a entender como o código é esperado funcionar e servem como uma forma de documentação.

2. Instalação e Uso do Jest

Instalando o Jest

O Jest é um framework de testes que oferece uma API simples e poderosa para criar e rodar testes. Se você estiver usando um projeto React, o Jest já pode estar instalado se você tiver criado seu projeto com Create React App.

Se você precisar instalar o Jest manualmente, siga as etapas abaixo:

1. Instalar o Jest: Abra o terminal e rode o seguinte comando para instalar o Jest como dependência de desenvolvimento:

   npm install --save-dev jest

1. Instalar Babel (se necessário): Se você está usando o Babel para transpilar código JavaScript moderno, pode ser necessário instalar o pacote de presets para o Jest:

   npm install --save-dev @babel/preset-env @babel/preset-react

Em seguida, crie um arquivo de configuração do Babel (babel.config.js) no seu projeto com o seguinte conteúdo:

   module.exports = {
     presets: ['@babel/preset-env', '@babel/preset-react'],
   };

1. Adicionar um Script de Teste: No package.json, adicione um script para rodar os testes com o Jest. Aqui está um exemplo de configuração:

   "scripts": {
     "test": "jest"
   }

Agora você pode rodar os testes com:

   npm test

Configuração Inicial

Se você tiver configurado o Create React App, o Jest estará instalado e pronto para uso automaticamente. Se não, siga as etapas descritas para garantir que a instalação do Jest seja realizada corretamente.

3. Escrevendo e Executando Testes com Jest em React

Estrutura de um Teste com Jest

Os testes em Jest geralmente seguem uma estrutura simples composta por três partes principais:

• describe: Agrupa os testes relacionados.
• it ou test: Define um caso de teste específico.
• expect: Faz uma afirmação sobre o que o código deve retornar ou como deve se comportar.

Exemplo Básico de Teste:

describe('Testando a função soma', () => {
  it('Deve somar dois números corretamente', () => {
    const resultado = soma(1, 2);
    expect(resultado).toBe(3); // A expectativa é que o resultado seja 3
  });
});

Neste exemplo:

• describe é usado para agrupar o teste de uma função específica (soma).
• it descreve um caso de teste que verifica se a soma de 1 e 2 resulta em 3.
• expect(resultado).toBe(3) verifica se o valor de resultado é igual a 3.

Testando Funções Simples

Vamos considerar que temos uma função simples soma que soma dois números:

function soma(a, b) {
  return a + b;
}

Para testar essa função com Jest, você escreveria um teste unitário simples como este:

Arquivo de teste soma.test.js:

const soma = require('./soma');

describe('Função soma', () => {
  it('Deve retornar a soma correta de dois números', () => {
    expect(soma(1, 2)).toBe(3);
    expect(soma(-1, 1)).toBe(0);
    expect(soma(-1, -1)).toBe(-2);
  });
});

• describe: Agrupa os testes da função soma.
• it: Testa se a função retorna os valores esperados para diferentes entradas.
• expect: A afirmação toBe verifica se o valor retornado pela função é igual ao valor esperado.

Testando Componentes React

Quando você escreve testes para componentes React, pode usar o React Testing Library junto com o Jest. A biblioteca de testes do React permite simular interações do usuário e verificar a renderização e comportamento dos componentes.

Aqui está um exemplo de como você pode testar um componente React simples:

Componente Button.js:

import React, { useState } from 'react';

function Button() {
  const [clicked, setClicked] = useState(false);

  const handleClick = () => {
    setClicked(!clicked);
  };

  return (
    <button onClick={handleClick}>
      {clicked ? 'Clicked!' : 'Click me'}
    </button>
  );
}

export default Button;

Testando o Componente com Jest e React Testing Library:

import { render, fireEvent } from '@testing-library/react';
import Button from './Button';

describe('Button component', () => {
  it('Deve alternar o texto ao ser clicado', () => {
    const { getByText } = render(<Button />);

    // Verifica se o texto inicial é "Click me"
    expect(getByText('Click me')).toBeInTheDocument();

    // Simula o clique no botão
    fireEvent.click(getByText('Click me'));

    // Verifica se o texto foi alterado para "Clicked!"
    expect(getByText('Clicked!')).toBeInTheDocument();
  });
});

Explicação do Teste:

1. render(<Button />): Renderiza o componente Button.
2. getByText: Localiza um elemento com o texto "Click me".
3. fireEvent.click: Simula o clique no botão.
4. expect(getByText('Clicked!')).toBeInTheDocument(): Verifica se, após o clique, o texto mudou para "Clicked!".

Tipos de Expectativas (Matchers)

O Jest oferece diversos matchers (métodos de comparação) para fazer afirmações sobre o estado do seu código. Aqui estão alguns dos mais usados:

• toBe: Verifica igualdade (para valores primitivos).
• toEqual: Verifica igualdade profunda (para objetos e arrays).
• toBeTruthy / toBeFalsy: Verifica se o valor é true ou false.
• toBeInTheDocument: Verifica se um elemento está presente no DOM (útil com React Testing Library).
• toHaveBeenCalled: Verifica se uma função foi chamada.

4. Executando os Testes

Após escrever os testes, você pode executá-los com o comando:

npm test

O Jest irá procurar automaticamente por arquivos com o sufixo .test.js ou .spec.js e rodará os testes neles contidos.

Rodando os Testes em Modo Interativo

O Jest oferece uma interface interativa que permite escolher quais testes executar. Para usar, basta rodar:

npm test -- --watch

Isso fará com que o Jest escute mudanças no código e re-execute os testes automaticamente.

Conclusão

Neste módulo, você aprendeu como:

• Instalar o Jest e configurar o ambiente de testes.
• Escrever testes unitários para funções e componentes em React.
• Usar assertivas do Jest para verificar o comportamento esperado do código.
• Escrever testes automatizados para componentes React usando a React Testing Library.

Os testes unitários são uma parte importante do desenvolvimento de software, pois ajudam a garantir que seu código funcione corretamente e que futuras alterações não quebrem funcionalidades existentes.