Cypress

[ipetinate]

GHub

Pesquise repositórios e usuários do GitHub.

Objetivo

Motivação para criar o projeto

• Este projeto foi criado como exemplo para uma decisão técnica sobre a escolha de ferramentas de teste.
• Irei criar branchs separadas para testar diferentes implementações de bibliotecas de teste, como exemplo o Vitest, Cypress, Jest, Axios Mock Adapter, MSW, Playwright.

Tecnologias

O que foi utilizado neste exemplo?

• Next.js
• TailwindCSS
• HeroIcons
• HeadlessUI
• Flowbite
• Axios
• React Query
• Zustand
• Lodash

Instalação [CYPRESS]

Como faz para configurar e rodar os testes e2e com Cy?

1. Instalar pacote do cypress

   # npm
   npm i -D cypress
   
   # yarn
   yarn add -D cypress

2. Adicionar o script para rodar o cypress no seu package.json

   "cypress": "cypress open"

3. Configurar o ambiente

   1. Rode npm run cypress
   2. Uma janela do navegador será aberta e irá apresentar duas opções
      1. 
   3. Selecione a opção E2E Testing
   4. Veja todos os itens que ele configurou e continue
      1. 
   5. Serão criados alguns arquivos no seu projeto
      1. 
   6. E será perguntado qual browser você quer usar para rodar os testes, se escolher Electron ele irá utilizar uma soluçãso própria para execução dos testes.
      1. 
   7. Após a escolha de browser, ele irá abrir outra janela com uma interface onde você tem acesso aos testes que irão ser e executados e/ou criar novos testes por lá, alé, de consultar a documentação, debug de testes, configurações etc.
      1. 

4. Escrever os testes

   1. Vou utilizar a opção da direita: Create new spec para criar um arquivo de teste
      1. 
   2. Ele vai perguntar o nome do arquivo
      1. 
      2. Vou seguir um padrão semelhante ao da aplicação, criando uma pasta chamada pages/ dentro da pasta e2e do pattern do cypress
      3. 
   3. Ao finalizar ele vai criar o arquivo e perguntar se quero rodar ou criar outro arquivo de spec, vou escolher rodar esse spec criado pela UI
      1. 
      2. Ao rodar ele abriu um endereço de exemplo do cypress
      3. 
   4. Vou editar o arquivo de spec e implementar meus testes dentro dele, no teste, deve ser acessada a home do projeto e visualizada as opções
      1. 

5. Após escrever os testes, podemos vê-los nessa interface do Cypress

   1. 

   2. Para rodar os testes, clique no arquivo, que poderá rodá-lo e ver o resultado da execução

      Gravacao.de.Tela.2023-03-20.as.17.10.31.mov

6. Podemos também rodar os testes via terminal

   1. Adicione o comando no scripts do package.json

      "cy:run": "cypress run"

   2. Abra um terminal e rode

      # npm
      npm run cy:run
      
      # yarn
      yarn cy:run

   3. Ao rodar veremos a seguinte saída no terminal

      
      
      
      

Erros e problemas

1. O primeiro problema encontrado foi relacionado aos modulos isolados do TS, como o teste não importa nada até o momento, fica dando esse erro (pode ser resolvido usando a gambiarra de exportar um objeto do arquivo export {}, mas não recomendo, o warning do eslint não faz os testes quebrarem nem nada do tipo)
   1.