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.

Nesse projeto nos foi 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 algumas dos componentes que foram testados.

Para verificar todos os testes va ate a pasta tests que se encontra dentro da pasta src:

/src/tests/...

APP (Home)

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

Verificando a existência do menu de navegação contendo todos os links na ordem especificada.

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 pagina 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 pagina 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 pagina contem os Poé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 apos 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.