Utilizando Cypress para testar sua aplicação.

Vimos anteriormente que um sistema não testado pode causar diversos bugs, prejuízos monetários e até perda de vidas. Sabendo disso, será que teria que ficar testando meu aplicativo ou sistema, criando diversas contas para diversos problemas possíveis, bancando o detetive antes de lançar o sistema para público? Sim, você pode. Mas não é a melhor alternativa. Pensando nisso, foi criado uma ferramenta de testes para esse tipo de situação, o Cypress e sobre ele falaremos neste artigo.

O Cypress é um framework de teste de ponta a ponta (end-to-end) popular e moderno que permite testar aplicativos da web com facilidade. Ele é amplamente utilizado em projetos React devido à sua facilidade de uso e eficiência na execução de testes de ponta a ponta. Neste artigo, vamos discutir como usar o Cypress com o React, fornecer exemplos de como escrever testes e concluir com algumas considerações importantes.

Instalando o Cypress -

O Cypress pode ser instalado via NPM e YARN pelos seguintes métodos.

npm install cypress --save-dev

yarn add cypress --dev

Existem alguns pré-requisitos descritos na documentação para instalação em ambiente Linux:

Debia/Ubuntu:

apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb

CentOS:

yum install -y xorg-x11-server-Xvfb gtk2-devel gtk3-devel libnotify-devel GConf2 nss libXScrnSaver alsa-lib

Feito isso precisamos adicionar um script no nosso package.json:

"scripts": {
  "cypress": "cypress open"
}

Depois ,inicie o Cypress executando o comando npm run cypress. O Cypress deve abrir uma janela do navegador com a interface do usuário. A partir daqui, você pode começar a escrever testes.

Escrevendo Testes de Software no Cypress -

Agora que temos o Cypress configurado, podemos começar a escrever testes. Os testes do Cypress são escritos em JavaScript e usam uma API baseada em cadeia que torna a escrita de testes simples e fácil de entender. Abaixo está um exemplo de teste que verifica se a página principal do React está sendo exibida corretamente:

describe('Página principal', () => {
  it('Deve exibir a página principal corretamente', () => {
    cy.visit('/');
    cy.contains('Bem-vindo ao meu aplicativo React!');
  });
});

O código acima usa o método visit para navegar para a página principal e o método contains para verificar se o texto "Bem-vindo ao meu aplicativo React!" está presente na página. Se o texto não estiver presente, o teste falhará.

Além disso, podemos usar o Cypress para interagir com elementos na página, como botões e formulários. Por exemplo, podemos usar o código abaixo para preencher um formulário e verificar se os dados foram enviados corretamente:

describe('Formulário de contato', () => {
  it('Deve enviar o formulário de contato corretamente', () => {
    cy.visit('/contato');
    cy.get('input[name="nome"]').type('João');
    cy.get('input[name="email"]').type('[e-mail]');
    cy.get('textarea[name="mensagem"]').type('Este é um teste de mensagem.');
    cy.get('button[type="submit"]').click();
    cy.contains('Mensagem enviada com sucesso!');
  });
});

O código acima navega para a página de contato, preenche o formulário com informações de teste, clica no botão de envio e verifica se a mensagem de sucesso é exibida.

O Cypress é uma ferramenta de teste poderosa e fácil de usar para testes de ponta a ponta em projetos React. Ele permite escrever testes de forma clara e concisa usando uma API baseada em cadeia, e pode ser facilmente integrado em projetos React existentes. Ao escrever testes com o Cypress, é importante lembrar de testar não apenas o que o usuário vê, mas também o comportamento da aplicação em si, se ela está rápida e otimizada o suficiente.