React: testando um projeto com bibliotecas externas

Configurando o projeto - Apresentação

Boas vindas ao curso de React: testando um projeto com bibliotecas externas! Me chamo Luiz Fernando e serei o seu instrutor.

Luiz Fernando é um homem branco, de cabelos curtos na cor castanho-escuro. Tem o rosto, nariz e dentes longos, sobrancelhas grossas e olhos estreitos, também castanho-escuros. Seu rosto é contornado por bigodes e barba ralos. Usa uma camisa preta. Está sentado em uma cadeira gamer preta com faixas azuis na horizontal. Atrás dele, uma parede lisa, iluminada com um degradê nas cores turquesa e turquesa acinzentada.

Nesse curso, vamos juntar vários conhecimentos, como o testing library e jest (ferramentas para testes) e bibliotecas externas, como o jest, o React Router Dom e o Redux e Redux Saga.

Com esse conhecimento, conseguimos manipular essas ferramentas que já estão no projeto TratoTech e testar, por exemplo, se o botão "Quero anunciar" está redirecionando para a tela esperada. Ou se as categorias estão carregadas de forma correta e se essa tarefa de carregar categorias está sendo executada apenas uma vez. Tudo isso, vamos realizar com os conhecimentos mencionados.

Com essa informação, você vai conseguir manipular testes para além de ambientes isolados. Vamos aprender com um projeto real com complexidades e informações extras usadas no mercado de trabalho para testar como se fosse em uma empresa.

Te espero no próximo vídeo!

Configurando o projeto - Clonando o projeto

Para iniciarmos o curso, precisamos de um projeto. Para isso, vamos pegar o nosso Trato Tech no momento do Redux Saga que foi onde paramos no último curso.

Repositório no GitHub

Para clocar, clicamos no botão verde <> Code para expandir, e na aba "HTTPS" selecionamos o ícone de dois quadrados sobrepostos "❑" do lado direito da URL.

https://github.com/lfrprazeres/trato-tech-saga.git

Em seguida abrimos o terminal e rodamos o código git clone com a URL que acabamos de copiar:

git clone https://github.com/alura-cursos/trato-tech-testes/

Após clonar, será bem rápido, executamos o cd trato-tech-testes para carregar a pasta que acabamos de clonar.

cd trato-tech-testes

Na sequência, podemos rodar o yarn para rodar as dependências do nosso projeto.

yarn

Vamos precisar rodar o servidor que usamos o JSON Server para isso. E também o yarn start para inicializar o projeto React. Enquanto ele instala os pacotes, podemos abrir outra aba do terminal clicando na aba de mais "+" no canto superior esquerdo.

Rodamos novamente o cd trato-tech-testes para conseguirmos abrir a pasta que acabamos de gerar. Depois digitamos code . para que possamos visualizar o nosso projeto no VS Code.

Com o VS Code aberto, temos a estrutura de arquivos do lado esquerdo. Expandindo a pasta src, temos diversas pastas dentro, como a de assets que são as nossas fotos e svg, e temos a pasta common onde está localizada a configuração da API, que usamos para fazer a comunicação com o JSON Server.

Nas pastas seguintes, temos os nossos componentes, as nossas páginas e serviços, estes são onde usamos o axios para realizarmos as chamadas. O store, sendo onde temos o store do redux; e os estilos que estão na pasta styles.

Por fim, temos três arquivos: index.css, index.js e routes.js. O primeiro é um arquivo global, já o index.js é onde temos o nosso ReactDOM.createRoot() e o routes.js é onde estão localizadas as nossas rotas do React Router Dom.

Voltando para a primeira aba no terminal, já foram instaladas as nossas dependências. Escrevemos yarn server para abrirmos o servidor.

yarn server

No outro terminal (que abrimos o VS Code), rodamos o comando yarn start para rodarmos o front-end.

yarn start

Na primeira aba do terminal, já temos o back-end rodando na porta 3001.

Home

https://localhost:3001

Na segunda aba do terminal, perceba que a aplicação está sendo inicializada. O Google Chrome será aberto de forma automática devido create reac app, e ele será inicializado.

Após aguardarmos o carregamento, estamos na página do Trato Tech. Perceba que as categorias já foram renderizadas e conseguimos visualizar a tela completa.

Estamos com o nosso projeto clonado, as nossas dependências e o nosso projeto está rodando na porta 3001. A partir disso, podemos começar alguns testes para visualizarmos esse ambiente de testes dentro do nosso projeto.

Até mais!

Configurando o projeto - Primeiro arquivo de testes

Vamos abrir o terminal integrado ao VS Code usando o atalho "Ctrl + aspas simples". Como vamos testar o nosso projeto, a primeira coisa que vamos fazer é rodar o comando yarn test para verificarmos o que acontece.

Como retorn, obtemos:

No tests found related to files changed since last commit

Press a to run all tests, or run Jest with --watchAll

Isso significa que não foram encontrados arquivos de testes, e nos informa para teclarmos "a" para rodar todos os testes ou "Jest--watchAll". Contudo, vamos conseguir visualizar que assim que criarmos um arquivo de testes ele estará observando.

Expandindo a pasta pages, selecionamos Home (a primeira página que testaremos) e clicamos com o botão direito para criarmos um novo arquivo chamado de Home.test.js. Observe que ele já capturou essa página de primeira no terminal e está tentando rodá-la, porém, ela não contém nenhum teste. Logo, ele retorna um erro informando que falhou.

Your test suite must contain at least one test

Ele nos informa que o arquivo deve conter, pelo menos, um teste. Vamos criá-lo então!

Dentro do arquivo Home.test.js, para não gerarmos um teste avulso no meio do arquivo, escrevemos describe(''Testando página Home').

O describe() vem do Jest (que possui várias funções globais que podemos usar em qualquer arquivo de teste), e serve para conseguirmos criar um título para um conjunto de testes.

Essa função possui dois argumentos, sendo a primeira a string que desejamos atribuir a esse describe(), e o segundo é uma função que vamos escrever como uma arrow function, () => {}.

Home.test.js

describe('Testando página Home', () => {

})

Dentro da arrow function escrevemos os nossos testes. Colocamos test(), que possui uma string e depois uma arrow function. O primeiro argumento da string é para inserirmos um título para esse teste, que colocamos somente testando por enquanto.

Dentro da arrow function precisamos escrever o que esperamos do teste. Outra função que vamos usar do Jest é uma chamada de expect(), isso para rodarmos com sucesso, pois esperamos que true seja igual a true. Para isso, escrevemos expect(true).toBeTruthy();.

Home.test.js

describe('Testando página Home', () => {
    test('testando', () => {
        expect(true).toBeTruthy();
    })
})

Observe que no terminal integrado ao VS Code já foi atualizado e os testes passaram.

Conseguimos analisar que desta forma já temos o Jest configurado e no próximo vídeo vamos verificar se o nosso testing library também está configurado.

Como mencionado, vou mostrar como utilizar, mas não entrarei nas particularidades. Então no próximo vídeo, vamos visualizar esses testes na prática com o testing library.

Sobre o curso React: testando um projeto com bibliotecas externas

O curso React: testando um projeto com bibliotecas externas possui 98 minutos de vídeos, em um total de 41 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Configurando o projeto
• Configurando o Testing Library
• Testando categorias
• Testando rotas
• Testando Redux