16 - Projeto RTL (React Testing Library)

Contexto

Esse projeto foi feito como validação do bloco de Testes automatizados com React Testing Library no modulo de Front-End da Trybe.

Foi-nos dado uma aplicação pronta onde devíamos implementar os testes para validar a experiência do usuário ao utilizar a aplicação.

Os testes implementados cobrem mais de 90% da aplicação, abaixo alguns dos componentes que foram testados.

Todos os testes se encontram na pasta tests que se localizam dentro da pasta src:

/src/tests/...

APP (Home)

Os testes do componente APP (Home) contém as validações para o menu de navegação, testando se contém um grupo de links específicos e se funcionam conforme o que foi proposto.

Verifica a funcionalidade do link "Home".

Verifica a funcionalidade do link "About".

Verifica a funcionalidade do link "Favorite Pokémons".

Verifica a funcionalidade da pagina "notfound" caso uma URL invalida seja passada.

About

Os testes do componente About contem as validações para a página About, verificando se a pagina contem todos os elementos necessários.

Verifica se a pagina contem um titulo especifico.

Verifica se a pagina contem dois parágrafos descrevendo uma Pokedéx.

Verifica se a pagina contem a imagem de uma Pokedéx.

Pokémons Favoritos

Os testes do componente FavoritePokemons contem as validações para a página Pokémons Favoritos, verificando se a pagina renderiza os Pokémons que foram favoritados.

Verifica se caso não tenha nenhum Pokémon favorito a mensagem correta é renderizada.

Verifica se a página contém os Pokémons que foram favoritados.

Técnologias usadas

Testes:

Desenvolvido usando: React, RTL (React Testing Library), Jets, JavaScript ES6, Teste E2E.

Instalando Dependências

npm install

Executando aplicação

npm start

Execução de testes unitários

Você pode executar todos os testes unitários localmente, basta executar:

npm test

ou

Caso queira executar apenas um componente de teste basta passar o caminho do componente após o comando npm test, no exemplo abaixo executamos apenas o componente About:

npm test tests/About.test.js

Dica: desativando testes

Para rodar apenas um teste, basta a utilização da função .only após o describe. Com isso, será possível que apenas um requisito rode localmente e seja avaliado.

ou

Caso queira avaliar apenas um tópico do requisito, você também pode usar o .only após o it.