Como Instalar e Configurar Jest em Projetos React ou Next.js

Instalação Inicial do Jest

Antes de tudo, vamos instalar Jest no seu projeto React ou Next.js. Para isso, rode no terminal:

Copiar
npm install --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

• Jest: Framework principal de testes.
• Testing Library React: Biblioteca para testar componentes React com foco na experiência do usuário.
• Jest-DOM: Oferece matchers adicionais que facilitam testes de DOM.
• JSDOM: Ambiente simulado de navegador.

Configuração do Jest

Crie um arquivo jest.config.js na raiz do projeto com a seguinte configuração básica:

Copiar
module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1', // se estiver usando aliases
  },
};

Criar Arquivo de Setup

Crie o arquivo jest.setup.js também na raiz do projeto:

Copiar
import '@testing-library/jest-dom';

Isto garante que todos os testes tenham acesso aos matchers adicionais fornecidos pelo Jest-DOM.

Estrutura Recomendada para Testes

É importante manter uma organização clara dos seus testes. Uma boa prática é manter arquivos de testes próximos dos componentes ou funções que serão testados.

Exemplo de estrutura recomendada:

Copiar
src
├── components
│   ├── Button
│   │   ├── Button.jsx
│   │   └── Button.test.jsx
│   └── Header
│       ├── Header.jsx
│       └── Header.test.jsx
├── pages
│   ├── index.jsx
│   └── index.test.jsx
├── utils
│   ├── formatDate.js
│   └── formatDate.test.js

Convenções para arquivos de testes:

Use .test.jsx ou .test.js para indicar claramente que é um arquivo de testes. Isso facilita a identificação e execução automática dos testes por ferramentas como Jest. Mantenha os arquivos de testes próximos aos componentes ou funções que estão sendo testados. Isso reduz o esforço de navegação e melhora a clareza sobre quais testes estão relacionados a quais partes do código. Crie testes focados e específicos para cada componente ou função. Evite testes muito genéricos que possam cobrir funcionalidades irrelevantes ou não relacionadas diretamente ao componente testado. Nomeie os testes de forma descritiva e clara. Por exemplo, um arquivo de testes para um componente "Login" poderia se chamar LoginForm.test.jsx, facilitando a identificação rápida.

Integração com VSCode

Para proporcionar uma experiência de desenvolvimento mais eficiente e produtiva ao escrever testes com Jest, o Visual Studio Code pode ser personalizado com extensões poderosas que facilitam tanto a execução quanto a escrita dos testes. Uma das extensões mais úteis é a Jest (Orta), que permite executar seus testes em tempo real diretamente no editor. À medida que você edita o código, ela executa os testes automaticamente, exibe os resultados ao lado de cada teste e destaca rapidamente quais estão passando ou falhando. Isso elimina a necessidade de alternar constantemente entre o terminal e o editor, agilizando o processo de desenvolvimento e depuração.

Outra ferramenta indispensável é a extensão Testing Library Snippets, que oferece uma coleção de trechos de código prontos para uso com a Testing Library. Ela ajuda a manter consistência e rapidez na hora de escrever testes, além de garantir que você utilize as melhores práticas de acessibilidade e testes baseados no comportamento do usuário.

Ao combinar essas extensões com configurações personalizadas no VSCode — como ativar CodeLens para visualizar os testes acima das funções e configurar a exibição de cobertura de testes automaticamente — você cria um ambiente de testes fluido, intuitivo e altamente produtivo.

Como configurar:

Após instalar as extensões recomendadas (como a Jest e a Testing Library Snippets) diretamente pelo marketplace do VSCode, é importante ajustar algumas configurações para garantir uma melhor integração com o seu ambiente de testes.

Essas configurações podem ser feitas no arquivo settings.json, que fica dentro da pasta .vscode na raiz do seu projeto. Se essa pasta não existir, você pode criá-la manualmente.

Aqui está um exemplo básico de configuração:

Copiar
{
  "jest.autoRun": "off",
  "jest.showCoverageOnLoad": true,
  "editor.codeLens": true
}

Integração com ESLint

ESLint garante a qualidade e padronização do seu código, incluindo testes.

Instale as dependências necessárias:

Copiar
npm install --save-dev eslint eslint-plugin-jest

Configure o ESLint em .eslintrc.json:

Copiar
{
  "plugins": ["jest"],
  "extends": ["plugin:jest/recommended"],
  "env": {
    "jest/globals": true
  }
}

Agora, seu ESLint entende Jest e sugere boas práticas automaticamente.

Integração com Prettier

Prettier mantém seu código formatado consistentemente. Para integrá-lo ao Jest:

Instalação:

Copiar
npm install --save-dev prettier eslint-config-prettier

Configuração em .prettierrc:

Copiar
{
  "semi": true,
  "singleQuote": true,
  "printWidth": 80,
  "trailingComma": "es5"
}

Configure ESLint para trabalhar junto com Prettier em .eslintrc.json:

Copiar
{
  "extends": ["plugin:jest/recommended", "prettier"]
}

Dicas adicionais para testes eficazes:

Para tornar sua suíte de testes ainda mais robusta e confiável, vale adotar algumas práticas que ajudam a manter o código bem testado, limpo e fácil de manter. Uma das estratégias mais importantes é o uso de mocks e stubs para isolar unidades de código. Quando seu componente ou função depende de serviços externos — como APIs, bancos de dados ou até mesmo outros módulos internos — é essencial simular esses comportamentos com mocks, garantindo que os testes foquem apenas na unidade que está sendo validada, sem influências externas ou efeitos colaterais inesperados.

Além disso, é fundamental escrever testes que sejam claros, objetivos e fáceis de entender. Um bom teste deve funcionar como uma forma de documentação: ao lê-lo, outro desenvolvedor (ou você mesmo no futuro) deve compreender rapidamente o comportamento esperado do código, sem necessidade de investigações adicionais. Utilize nomes descritivos para os testes e divida-os logicamente por cenários e funcionalidades.

Outra prática altamente recomendada é a execução periódica de relatórios de cobertura de testes. O Jest facilita isso com um simples comando, permitindo identificar quais partes do código estão sendo testadas e quais ainda precisam de atenção. Manter uma boa cobertura não significa testar tudo, mas sim garantir que as partes mais críticas do seu código estão validadas contra possíveis falhas.

Você pode executar a cobertura com o seguinte comando no terminal:

Copiar
npm test -- --coverage

Esse comando gera um relatório completo, tanto no terminal quanto em arquivos HTML, exibindo visualmente a cobertura de cada arquivo e função do projeto.