Este guia cobre desde a instalação inicial até integrações avançadas com ferramentas populares como VSCode, ESLint e Prettier.
• 16 de mai. de 2025
• 10 min de leitura
Antes de tudo, vamos instalar Jest no seu projeto React ou Next.js. Para isso, rode no terminal:
npm install --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom
Crie um arquivo jest.config.js na raiz do projeto com a seguinte configuração básica:
module.exports = { testEnvironment: 'jsdom', setupFilesAfterEnv: ['<rootDir>/jest.setup.js'], moduleNameMapper: { '^@/(.*)$': '<rootDir>/src/$1', // se estiver usando aliases }, };
Crie o arquivo jest.setup.js também na raiz do projeto:
import '@testing-library/jest-dom';
Isto garante que todos os testes tenham acesso aos matchers adicionais fornecidos pelo Jest-DOM.
É 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:
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
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.
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.
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:
{ "jest.autoRun": "off", "jest.showCoverageOnLoad": true, "editor.codeLens": true }
ESLint garante a qualidade e padronização do seu código, incluindo testes.
Instale as dependências necessárias:
npm install --save-dev eslint eslint-plugin-jest
Configure o ESLint em .eslintrc.json:
{ "plugins": ["jest"], "extends": ["plugin:jest/recommended"], "env": { "jest/globals": true } }
Agora, seu ESLint entende Jest e sugere boas práticas automaticamente.
Prettier mantém seu código formatado consistentemente. Para integrá-lo ao Jest:
npm install --save-dev prettier eslint-config-prettier
.prettierrc:{ "semi": true, "singleQuote": true, "printWidth": 80, "trailingComma": "es5" }
Configure ESLint para trabalhar junto com Prettier em .eslintrc.json:
{ "extends": ["plugin:jest/recommended", "prettier"] }
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:
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.
Test Driven Development, mais conhecido como TDD, é uma abordagem de desenvolvimento de software onde os testes são escritos antes do código de produção. O objetivo principal do TDD é garantir que cada parte do sistema seja testada de forma automatizada, tornando o processo de desenvolvimento mais seguro, previsível e de alta qualidade.
Testes falhando são comuns durante o desenvolvimento de software, e depurá-los rapidamente é essencial para produtividade. Neste guia, você vai aprender como utilizar o Chrome DevTools para depurar testes Jest e descobrirá as melhores práticas para resolver problemas comuns de forma eficiente.
A cobertura de testes, ou coverage, é uma métrica que mede o quanto do seu código está sendo testado por testes automatizados. Quando você executa testes com Jest utilizando a flag --coverage, ele gera um relatório detalhado que mostra quais partes do seu código estão ou não sendo testadas. Entender esse relatório é fundamental para garantir a qualidade e a segurança da sua aplicação.
É comum em JavaScript executar código de forma assíncrona. Quando você tiver código assíncrono, o Jest precisa saber quando ele foi concluído para então seguir com os testes seguintes. Felizmente, o Jest oferece várias formas de lidar com isso.