Dicas para deixar seu relatório de code coverage do Jest mais completo
Tags: braziliandevs, testing, jest, javascript
Published: 2022-06-02 21:38:21

Fazendo o excelente [curso de testes](https://javascript.tv.br/) do Fabio Vedovelli, aprendi algumas dicas que achei muito úteis para deixar o relatório de `code coverage` do Jest mais completo. Compartilho aqui:
## 1. Mostrando diferentes arquivos do seu projeto no `code-coverage`

Por padrão, quando criamos um relatório de cobertura com o comando `
npm jest -- --coverage`, apenas os arquivos que já testamos são analisados para gerar o resultado.

![Relatório de code coverage com apenas os arquivos que tem testes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhm6j7xc5mi5ymve29h7.png)

Porém, também é possível criar o relatório considerando pastas que ainda estão sem testes, o que pode ser útil para analisar quais linhas e arquivos precisam serem testadas.

Para fazer isso, é só ir ao seu arquivo `jest.config.js` e inserir a chave `collectCoverageFrom` com o valor sendo um array com os diretórios e arquivos que você quer que sejam analisados. Assim:
```
...
collectCoverageFrom: [
    '<rootDir>/components/**/*.js',
    '<rootDir>/pages/**/*.js',
    '<rootDir>/hooks/**/*.js',
    '<rootDir>/store/**/*.js',
  ],
...
```
Em uma tradução bem informal, é o mesmo de a gente dizer ao Jest "pega e faz o relatório a partir desses lugares aqui". O resultado é um _coverage report_ com todos os arquivos `.js` das pastas _components_, _pages_, _hooks_ e _store_. 


![Relatório de code coverage com todos os diretórios definidos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nbftxj83bhrs8p1czvhv.png)

## 2. Mostrando seu relatório no navegador

Outra dica legal que o Vedovelli compartilhou é sobre como exibir seu relatório de `code coverage` no navegador, deixando ele bem mais visual e informativo.

![Relatório de Code Coverage sendo exibido no navegador](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kuoue0fo347fsibbejxo.png)

Como dá pra ver, ele mostra de forma mais intuitiva os arquivos analisados, o percentual deles que está coberto e quais linhas ainda faltam serem testadas. Dá até pra entrar no relatório de cada arquivo e ver em destaque quais são as partes do código que não estão cobertas.

![Relatório de Code Coverage exibindo quais linhas não foram cobertas por testes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vjvpavp6kxjgyws47uja.png)

Para exibir o _report_ desta forma, basta abrir o arquivo `index.html` que foi criado pelo comando`npm -- --coverage` e está dentro do diretório `./coverage/lcov-report/`. Você pode fazer isto de duas formas: 

### Utilizando a extensão do VS Code `Live Server`
Um jeito rápido de visualizar o relatório é utilizando a extensão [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer), que cria um server de desenvolvimento local e te permite abrir qualquer arquivo `.html` clicando no botão que a extensão adiciona ao VS Code. 

### Utilizando a dependência `http-server`
Caso não queira ou possa utilizar o `Live Server`, você pode instalar a dependência `http-server`e chegar ao mesmo resultado. 

Para isso, instale o pacote globalmente:
```npm install --global http-server```

E execute o comando que inicia seu servidor passando o caminho para o diretório do arquivo `index.html`:

```http-server ./coverage/lcov-report/```

## Concluindo
Essas são duas maneiras que aprendi de deixar nossos relatórios de `code coverage`mais completos que aprendi e gostaria de compartilhar aqui. Como já apontei, aprendi tudo no [curso de testes em JavaScript](https://javascript.tv.br/) do Fabio Vedovelli.

E você, tem outras dicas de como deixar esses relatórios melhores?