Sincronizando seu projeto frontend (Angular) com testes unitários (Jest) no SonarQube

Em ambientes corporativos, a análise de qualidade de código e cobertura de testes é essencial para garantir a confiabilidade das aplicações. O SonarQube é uma das ferramentas mais usadas para isso, e pode ser facilmente integrado a projetos Angular com Jest.

No presente artigo, vamos ver o passo a passo para configurar essa integração, incluindo o uso do SonarQube em container Docker, a execução dos testes unitários e a geração de relatórios de cobertura.

A premissa é ter o Docker e Docker-Compose instalados, caso ainda não tenha, verifique Instalando Docker e Docker Compose no Linux (qualquer distro) ou Instalando Docker no Windows 10

1. Subindo o SonarQube com Docker

Primeiro, vamos utilizar a imagem oficial do SonarQube. Execute o comando abaixo:

docker run -d --name sonarqube-frontend -p 9000:9000 sonarqube:latest

O SonarQube estará acessível em http://localhost:9000.

No primeiro acesso, o login padrão é admin / admin.

Após logar, altere a senha e gere um token de autenticação no menu:

My Account → Security → Generate Tokens

Guarde esse token, pois ele será utilizado no arquivo de configuração do scanner.

2. Instalando o Jest e o Sonar Scanner

No seu projeto Angular, instale o Jest e o Sonar Scanner globalmente e localmente para garantir compatibilidade:

Instalar o sonar-scanner globalmente

npm install -g sonar-scanner

Instalar o sonar-scanner como dependência de desenvolvimento

npm install --save-dev sonar-scanner

Se o Jest ainda não estiver configurado no projeto Angular:

npm install --save-dev jest @types/jest jest-preset-angular

Em seguida, adicione o script de testes no package.json:

"scripts": {
  "test": "jest --silent",
  "test:coverage": "jest --coverage",
  "sonar": "sonar-scanner"
}

3. Configurando o arquivo sonar-project.properties

   Crie o arquivo sonar-project.properties na raiz do projeto Angular com o seguinte conteúdo:

   
   sonar.projectKey=Nome-Projeto-Frontend
   sonar.projectName=Nome-Projeto-Frontend
   sonar.projectVersion=1.0
   sonar.sources=src
   sonar.language=ts
   sonar.sourceEncoding=UTF-8
   sonar.host.url=http://localhost:9000
   sonar.login=TOKEN_AQUI
   sonar.branch.name=develop
   
   # Diretório de relatórios do Jest
   sonar.javascript.lcov.reportPaths=coverage/lcov.info
   
   

   O campo sonar.javascript.lcov.reportPaths é essencial para que o SonarQube consiga ler a cobertura de testes gerada pelo Jest.

4. Executando os testes e enviando o relatório

Antes de executar o SonarQube, é necessário garantir que os testes unitários estão passando e que o relatório de cobertura foi gerado corretamente.

Execute os testes normalmente:

npx jest --silent

Se todos os testes passarem, gere o relatório de cobertura:

Isso criará uma pasta coverage na raiz do projeto com o arquivo lcov.info dentro de coverage/lcov-report.

5. Enviando os resultados ao SonarQube

Com os testes e cobertura prontos, execute o comando abaixo:

npm run sonar

O sonar-scanner lerá as configurações do arquivo sonar-project.properties e enviará o relatório para o servidor do SonarQube.

Ao finalizar, acesse o painel do SonarQube e verifique as métricas do seu projeto, incluindo:

Qualidade do código TypeScript

Cobertura de testes Jest

Bugs, vulnerabilidades e code smells

Dica: executando no Git Bash (Windows)

Se você estiver no Windows, use o Git Bash para simular um ambiente Linux.

O comando sonar-scanner funciona normalmente nesse terminal, o que facilita a integração em ambientes de desenvolvimento heterogêneos.

Considerações finais

Integrar o Jest com o SonarQube é uma prática que eleva o nível de qualidade do seu projeto Angular.

Essa integração permite visualizar métricas detalhadas, acompanhar a evolução da cobertura de testes e identificar pontos críticos no código.

Com essa configuração, seu pipeline local ou CI/CD estará preparado para medir qualidade de forma contínua, garantindo um código mais limpo, seguro e sustentável.

Feito!