Setup Cypress para testes e2e em React

Introdução

Nesse ano eu dividi em duas partes os artigos referentes a testes unitários em React usando Jest e testing-library, um voltado para setup e outro explicando de forma geral como é estruturado e funcionam os testes. A ideia é seguir o mesmo caminho, mas dessa vez para testes end-to-end usando Cypress. O artigo atual vai apresentar o setup da lib e como executar ela, no do próximo mês o foco será explicar o geral de como funcionam os testes e apresentando exemplos.

End-to-end

Testes end-to-end tem como objetivo testar a aplicação de ponta a ponta, analisando as interações e a navegação que o usuário terá ao utilizar ela e verificando a integridade da aplicação como um todo. São testes mais pesados em comparação com os testes unitários, mas trazem uma análise mais próxima do fluxo como um todo que os usuários vão utilizar na aplicação.

Cypress

É uma lib que foi originalmente criada com foco em realizar testes end-to-end, que pode executar os testes tanto via terminal, quanto vendo a navegação via browser.

Setup

Para adicionar o Cypress na aplicação, executar no terminal:

yarn add cypress --dev

Adicionar script para abrir o Cypress em package.json:

{
  "scripts": {
    //...
    "cy:open": "cypress open"
  }
}

Executar no terminal:

yarn cy:open

Após a execução será aberta a seguinte tela:

Clicando na caixa E2E Testing, será mostrado os arquivos de configuração que foram adicionados na aplicação, sendo possível observar na aplicação os novos arquivos gerados:

Clicando em Continue vai ser pedido para escolher o navegador a ser usado para os testes:

Escolhendo o navegador de preferência, será aberto uma nova tela:

Com duas opções:

• Scaffold example specs: essa opção cria uma série de testes em cima da página de exemplo do Cypress
• Create new spec: essa opção gera um template de teste com um simples exemplo de teste

Escolhendo a opção Create new spec, vai ser pedido para definir o nome do novo arquivo:

Por default o Cypress vai executar os testes dentro da pasta cypress/e2e, podendo definir os nomes dos arquivos de acordo com o contexto de fluxo do teste nome_do_arquivo.cy.js. No caso do setup aqui, vamos seguir com o que ele sugere cypress/e2e/spec.cy.js.
Olhando na aplicação ele gerou o arquivo de teste, e vai mostrar na tela o exemplo inicial de teste que colocou:

Por fim, clicando em Okay, run the spec ele irá executar o teste de exemplo:

Avisando na esquerda que o teste passou, que nesse caso só verifica se conseguia visitar a página https://example.cypress.io/, e a direita mostra onde parou na navegação ao fim do teste (para testes de interações de usuário é mostrado a navegação de ponta a ponta do lado direito, no próximo artigo vou mostrar mais em detalhe).
O setup está pronto, os arquivos de configuração estão dentro da aplicação, um arquivo inicial de teste está criado também, sendo possível adicionar mais testes dentro dele ou criar outros arquivos de teste seguindo a estrutura cypress/e2e/nome_do_arquivo.cy.js.

Formas de execução

Vou apresentar duas formas de execução de testes end-to-end usando Cypress:

Via interface

Está forma de execução é semelhante a apresentada acima. Primeiro será executado no terminal:

yarn cy:open

Vai aparecer a mesma tela inicial que passei no setup, mas dessa vez informando que o E2E Testing já está configurado:

Clicando em E2E Testing vai pedir para escolher o navegador:

Clicando no navegador de preferência será aberta uma tela com os arquivos de teste definidos na app (nesse caso somente o spec.cy.js):

Escolhendo o arquivo spec.cy.js será executado os testes dentro dele via interface:

Via terminal

Outra forma de executar os testes é dentro do próprio terminal. Primeiro será adicionado o script para rodar o Cypress no terminal em package.json:

{
  "scripts": {
    //...
    "cy:run": "cypress run"
  }
}

Executando no terminal:

yarn cy:run

Vai ser executado os testes dentro do terminal, apresentando o seguinte resultado:

Conclusão

A ideia desse artigo foi apresentar como configurar o Cypress dentro de uma app React para testes end-to-end, mostrando duas formas de executar os testes. No artigo do próximo mês o foco vai ser os testes em si, procurando trazer uma visão geral de como são estruturados e realizados, apresentando alguns exemplos.