Alura > Cursos de Front-end > Cursos de React > Conteúdos de React > Primeiras aulas do curso React: avançando em testes e2e com Cypress

React: avançando em testes e2e com Cypress

Visão geral da aplicação - Apresentação

Oi, tudo bem? Eu sou o Neilton e vou te acompanhar em mais um mergulho nessa ferramenta incrível: o Cypress.

Vamos conversar sobre os testes de ponta a ponta feitos no React.

Autodescrição: Neilton Seguins é um homem negro cisgênero, com cabelos curtos, escuros e encaracolados e olhos castanho-escuros. Possui um óculos com lentes retangulares e bordas metálicas, além de uma camiseta amarela sem estampa. Ao fundo, há uma parede lisa que recebe iluminação em degradê, do rosa para o azul.

Testes de ponta a ponta em React

Recebemos a aplicação do Bytebank, uma startup de banco digital. Sabemos que sempre que ela recebe uma nova funcionalidade, precisamos cobrir os novos cenários com testes, inclusive os de ponta a ponta.

Estamos com o aplicativo Bytebank aberto no navegador. Vamos visualizar a nova funcionalidade adicionada: a página "Minha conta", acessando o explorador lateral e clicando em "Minha conta".

Nela, podemos atualizar informações da pessoa usuária que possui uma conta no Bytebank, preenchendo e alterando dados como o seu nome e a sua senha. Essas informações são importantes para realizar o login, por exemplo.

O que aprenderemos?

Coisas legais, como:

Cada tópico nos ensinará coisas novas, o que expandirá nossa mente em relação à escrita de testes ponta a ponta no Cypress.

Pré-requisitos

Para fazer este curso, é recomendado concluir previamente o Curso de React: escreva testes end to end com Cypress, pois aqui, daremos continuidade a ele.

Pegue o seu café, suco ou água, sente-se confortavelmente, abra o bloco de anotações e vamos começar. Nos vemos no próximo vídeo.

Visão geral da aplicação - Conhecendo a aplicação

Nosso foco será a startup Bytebank. Conforme ela avança nas funcionalidades, precisamos cobrir os novos cenários com testes.

Neste caso, serão testes de ponta a ponta.

Conhecendo a aplicação

Instalaremos as dependências do projeto. Para baixar os arquivos necessários, devemos acessar as Atividades desta aula.

Após o download, extrairemos os arquivos da aplicação para uma pasta chamada "bytebank-app" e os arquivos da API para uma pasta chamada "api-bytebank-v2", ambas na área de trabalho.

Faremos um clique duplo na pasta da API para abri-la no explorador. Nesta janela, clicaremos com o botão direito e selecionaremos "Abrir no terminal".

Dica: Caso não haja a opção "Abrir no terminal" em seu sistema, basta clicar na barra de pesquisa do explorador, digitar "cmd" no lugar do caminho de pastas exibido e pressionar "Enter".

Com isso, o terminal será aberto na pasta da API. Nele, faremos a instalação das dependências com o comando abaixo.

npm install

Após a instalação, rodaremos a API com o comando abaixo.

npm run dev

O terminal retornará uma mensagem informando que o servidor está rodando em "http://localhost:8000".

Minimizaremos o terminal, fecharemos a janela do explorador e faremos o mesmo processo para a pasta "bytebank-app".

Após rodarmos o npm install, pediremos para que a pasta seja aberta no VS Code, ambiente que utilizaremos para desenvolvimento. Para isso, rodaremos o comando abaixo.

code .

Após pressionarmos "Enter", a tela do VS Code será aberta para nós.

Como visto anteriormente, a aplicação do Bytebank evoluiu. Por isso, encontraremos coisas novas.

Por meio do explorador, acessaremos o caminho "src > paginas" e dentro desta encontraremos uma nova pasta denominada "Minha Conta". Ela foi criada para editar informações como, por exemplo, o nome e a senha da pessoa usuária.

Vamos rodar a aplicação e abri-la no navegador. Com o atalho "Ctrl+J", abriremos o terminal do VS Code e nele rodaremos o comando abaixo para subir a aplicação no navegador.

npm start

Após a execução, o navegador será aberto na URL "http://localhost:8000", onde será exibida a página inicial da nossa aplicação. Já podemos interagir com ela.

Clicaremos no botão "Já tenho conta", localizado à direita, na barra superior. Isso abrirá o modal de login.

Realizaremos o login para visualizarmos a nova página, inserindo informações nos campos "E-mail" e "Senha" e clicando em "Acessar".

Com isso, a página principal será aberta. No explorador lateral, temos seis menus alinhados na vertical: "Início", "Minha conta", "Cartões", "Serviços" e "Investimentos".

Clicaremos em "Minha conta", o que abrirá a página "Minha conta". Nela, veremos os campos "Nome", "Senha" e o botão "Salvar alterações", alinhados na vertical. Neste formulário, podemos alterar nossos dados de nome e de senha.

Esta é uma nova funcionalidade adicionada ao Bytebank — um novo cenário que cobriremos com testes.

Além disso, precisaremos verificar pontos em nossa API, por isso, também adicionaremos a ela testes de ponta a ponta.

É possível que surja a dúvida: testar APIs não é uma tarefa de pessoas desenvolvedoras back-end? De fato, é mais comum que devs do back-end e QAs (pessoas responsáveis pela qualidade do código) escrevam esses testes.

Contudo, se por algum motivo essas pessoas não estiverem disponíveis (seja por férias ou por outro motivo), esta tarefa pode ser designada a nós. Portanto, é importante que tenhamos este conhecimento.

Voltando ao VS Code, veremos que nossa aplicação já possui alguns testes. No explorador, acessaremos o caminho "cypress > e2e", cujo interior contém seis especificações (arquivos com a extensão .cy.js):

A partir deles, temos uma direção a seguir com os testes. Entretanto, precisamos entender o que fazer quando não sabemos por onde começá-los.

Entenderemos isso no próximo vídeo. Nos vemos lá!

Visão geral da aplicação - Entendendo o que testar

Ficamos responsáveis por escrever testes de ponta a ponta e testar uma aplicação do zero. Algumas dúvidas comuns podem aparecer, como:

Se a aplicação já tiver alguns testes, como no caso do Bytebank, é possível entrar em contato com a pessoa que os escreveu e tentar entender do que se tratam. Caso não haja contato com essa pessoa, recomendamos explorar os testes.

Explorando os testes

Vamos explorar nossos testes voltando ao VS Code. Pelo explorador, veremos na pasta "e2e" dentro da pasta "cypress" os arquivos .cy.js. Eles são especificações que testam cenários, principalmente focados na interface da pessoa usuária e no front-end.

Eles verificam, por exemplo:

Abriremos um novo terminal do Powershell, selecionando o botão que possui o ícone "+", no canto superior direito da aba de terminal.

Dica: É possível abrir um novo terminal por meio do atalho "Ctrl+Shift+'".

Abriremos a aplicação do Cypress rodando o comando abaixo no terminal.

npx cypress open

Com isso, uma nova janela com o título "Welcome to Cypress!" (Boas-vindas ao Cypress!) será aberta, exibindo a interface da aplicação. Em seu interior, veremos duas opções, dentre as quais selecionaremos "E2E Testing" (Testes com E2E), à esquerda, para configurar o teste de ponta a ponta.

Após a tela de inicialização da configuração, será exibida a tela "Choose a browser", onde devemos escolher nosso navegador de preferência e clicar no botão "Start E2E Testing".

Neste momento, conforme vimos anteriormente, o Cypress abrirá a aplicação em uma nova aba no navegador, exibindo na barra de busca a URL "http://localhost:3000/__/#/specs", enquanto no corpo vemos a página "Specs".

Nesta, vemos a lista com nossas especificações, previamente mencionadas. Vamos clicar na especificação inicio.cy.js que é bem simples.

Ela será aberta e ocupará toda a página, onde veremos uma tela que exibe a página inicial do Bytebank e também uma aba na lateral esquerda.

Nesta aba lateral, na seção "Test Body", veremos que o teste passou normalmente, apesar de ter exibido um erro no get para alguma rota. Posteriormente, entenderemos o que este erro significa.

Esta aba nos permite entender sobre o que trata cada especificação existente na nossa aplicação. Por exemplo, este teste visita a nossa página, verifica se ela contém o H1 com o texto que deve ser exibido e exibe alguma coisa.

Cenários críticos

Se não tivermos nenhum teste na aplicação, podemos escolher cenários críticos de teste como, por exemplo, formulários.

No caso do modal de login, o formulário deve exibir mensagens de erro para as informações erradas, já que não queremos levar estes problemas para o back-end. Portanto, recomendamos iniciar com testes nos cenários que não podem passar despercebidos e que podem travar nossa aplicação.

A partir daí, devemos explorar as jornadas de pessoa usuária, ou seja, os fluxos percorridos por na aplicação.

Já falamos bastante. A seguir, começaremos a codar, escrevendo um teste ou melhorando os que já temos. Nos vemos no próximo vídeo!

Sobre o curso React: avançando em testes e2e com Cypress

O curso React: avançando em testes e2e com Cypress possui 147 minutos de vídeos, em um total de 58 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:

Aprenda React acessando integralmente esse e outros cursos, comece hoje!

Plus

De
R$ 1.800
por
12X
R$109
à vista R$1.308
  • Acesso a TODOS cursos por 1 ano

    Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Certificado

    A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.

  • Mentorias com especialistas

    No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.

  • Comunidade exclusiva

    Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.

  • Acesso ao conteúdo das Imersões

    Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.

  • App Android e iOS para estudar onde quiser

    Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.

Matricule-se

Pro

De
R$ 2.400
por
12X
R$149
à vista R$1.788
  • Acesso a TODOS cursos por 1 ano

    Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Certificado

    A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.

  • Mentorias com especialistas

    No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.

  • Comunidade exclusiva

    Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.

  • Acesso ao conteúdo das Imersões

    Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.

  • App Android e iOS para estudar onde quiser

    Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.

  • Luri, a inteligência artificial da Alura

    Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos, corrige exercícios e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com a Luri até 100 mensagens por semana.

  • Alura Língua - Inglês e Espanhol

    Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.

Matricule-se

Ultra

12X
R$209
à vista R$2.508
  • Acesso a TODOS cursos por 1 ano

    Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Certificado

    A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.

  • Mentorias com especialistas

    No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.

  • Comunidade exclusiva

    Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.

  • Acesso ao conteúdo das Imersões

    Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.

  • App Android e iOS para estudar onde quiser

    Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.

  • Luri, com mensagens ILIMITADAS

    Mensagens ilimitadas para estudar com a Luri, a IA da Alura, disponível 24hs para tirar suas dúvidas, dar exemplos práticos, corrigir exercícios e impulsionar seus estudos.

  • Luri Vision, a IA que enxerga suas dúvidas

    Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.

  • Alura Língua - Inglês e Espanhol

    Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.

  • 6 Ebooks da Casa do Código

    Receba cupons da Casa do Código, a editora da Alura, e escolha ebooks que acompanharão a sua jornada de aprendizado para sempre.

Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas