Testes Automatizados no React Native

Testes Automatizados podem ser vistos como procedimentos destinados a estabelecerem a qualidade, confiabilidade e desempenho de algo, especialmente, antes de ser levado para uso generalizado.

[adrotate banner=”4″]

O que são testes de software?

Um teste de software é um método cuja finalidade é avaliar e verificar se o sistema faz o que foi predisposto. Ou seja, se corresponde aos requisitos esperados, visando garantir um produto que seja o mais livre possível de falhas.

Benefícios dos testes

A prática de testar aplicações traz inúmeros benefícios no que tange o desenvolvimento de software, entre elas podemos citar:

  • Controle de qualidade: um requisito essencial para uma aplicação é a qualidade dos serviços que ela presta, os testes permitem um melhor controle da qualidade do software;
  • Controle de segurança: testar as aplicações também pode ajudar a identificar falhas de segurança e corrigir vulnerabilidades;
  • Identificar funcionalidades inválidas ou incorretas: bugs podem ser caros e até perigosos, a ausência de uma vírgula ou a falha no processamento de uma transação, por exemplo, podem causar perdas de negócio;
  • Satisfação do cliente: quanto mais um produto atende às necessidades do cliente maior é o grau de satisfação.

Principais tipos de testes

Os testes surgem com objetivos e estratégias específicas e existem diversos tipos diferentes, alguns deles são:

  • Unitários: testam se o componente da aplicação funciona como esperado.
  • De integração: verificam se componentes do software funcionam em conjunto.
  • E2E (end-to-end): também conhecido como teste de ponta a ponta, sua função é simular a interação de um usuário real.

Como os testes funcionam?

O teste de software geralmente é formado de etapas comuns, como a definição do ambiente de teste, o desenvolvimento dos casos, a escrita dos scripts e a análise dos resultados. Assim, uma boa abordagem de testes envolve a interface de programação de aplicações (API) e a interface de usuário.

Pode ser realizado de forma manual ou automatizada, sendo, os testes automatizados mais rápidos e eficientes para testar as funcionalidades de sistemas maiores. Além disso, podem servir também como forma de documentação para que novos integrantes no projeto consigam compreender melhor todo o cenário de funcionamento da aplicação.

Como funcionam os testes no React Native?

Os testes em aplicações para dispositivos móveis funcionam de maneira semelhante aos testes para aplicações web. Então, podem ser testados os componentes, as funcionalidades e até mesmo todo o funcionamento do aplicativo.

Quais são as ferramentas disponíveis?

  • Jest: é um interpretador de teste JavaScript para testar componentes individuais. Ele oferece velocidade de interação com recursos, como módulos de mocking e temporizadores;
  • React Testing Library: permite testar componentes por meio de um conjunto de helpers;
  • Detox: realiza testes de ponta a ponta em aplicativos que estejam sendo executados em dispositivos reais ou emuladores;
  • Cypress: framework para testes de ponta a ponta é uma opção para testar de forma web aplicações mobile criadas com Expo CLI;
  • Appium: utiliza um web driver para testar aplicações nativas ou web para dispositivos móveis e também sistemas híbridos no Android ou iOS.

Criando testes automatizados utilizando Cypress

1ª etapa

Para instalar o Cypress, basta navegar até o diretório do projeto que será testado e utilizar:

Testes Automatizados no React Native Luby Software
Testes Automatizados no React Native 1

Em seguida, rodando o comando abaixo, um diretório chamado cyrpess e um arquivo cypress.json serão adicionados.

Testes Automatizados no React Native Luby Software
Testes Automatizados no React Native 2

Uma janela também será aberta onde irão aparecer todos os arquivos de testes. Assim, ela possibilita criar novos arquivos de testes. Atualmente, o cypress possui Edge, Chrome e Electron como opções de navegadores, também é possível consultar a documentação e até realizar configurações.

Testes Automatizados no React Native Luby Software
Testes Automatizados no React Native 3

2ª etapa

No arquivo cypress.json, devemos configurar a url como o local onde o Expo CLI irá executar o aplicativo, como mostra a imagem a seguir.

Embora os testes sejam executados em um ambiente web, é possível simular as dimensões reais de dispositivos móveis adicionando viewportWidth e viewportHeight, essas propriedades são opcionais.

Testes Automatizados no React Native Luby Software
Testes Automatizados no React Native 4

3ª etapa

Os testes devem ser colocados na pasta integration e devem ter o formato [nomeDoArquivo].spec.js. Além disso, o cypress possui guias de configuração e migração que podem ser consultados em sua documentação.

Testes Automatizados no React Native Luby Software
Testes Automatizados no React Native 5

4ª etapa

Para testar o aplicativo, foi criado um arquivo com testes simples para verificar algumas funcionalidades. Assim, os testes seguem uma sequência padrão em que:

  • describe descreve o conjunto de testes criado;
  • beforeEach é executado antes dos testes;
  • it é um bloco de teste no formato it(‘descrição do teste’, função);
  • os métodos de testes são no formato cy.[método];
  • cy.visit() navega até uma rota específica da aplicação;
  • o método cy.get() busca um elemento na tela;
  • click e type simulam eventos de click e digitação;
  • em type é preciso passar uma string com o texto a ser digitado;
  • should cria uma afirmação que deve ser verificada;
  • no caso dos testes acima should(‘be.visible’) está definindo que o elemento deve está visível na tela.
Testes Automatizados no React Native Luby Software
Testes Automatizados no React Native 6

Os testes podem ser executados clicando no Botão Run (todos os testes serão executados). Bem como também é possível clicar em um arquivo específico de teste, o aplicativo precisa estar sendo executado pelo Expo de forma web. Após a execução, teremos o seguinte resultado:

Testes Automatizados no React Native Luby Software
Testes Automatizados no React Native 7

Criando testes automatizados utilizando Appium

1ª etapa

Para este exemplo de teste, iremos utilizar o apk de demonstração disponibilizado pela appium e começar a configurar o setup de testes. Para instalar o Appium, basta rodar no terminal o comando abaixo:

Testes Automatizados no React Native Luby Software
Testes Automatizados no React Native 8

Instalando o appium-doctor, o comando no terminal irá mostrar se existe alguma dependência ou variável de ambiente que sejam necessárias e não estejam instaladas ou configuradas corretamente.

Testes Automatizados no React Native Luby Software
Testes Automatizados no React Native 9
Testes Automatizados no React Native Luby Software
Testes Automatizados no React Native 10

Em seguida, será preciso atualizar o package.json para a configuração utilizando o webdriverio, adicionando um comando de test, timeout para o mocha e as bibliotecas assert, chai, mocha e webdriverio como dependências de desenvolvimento, depois usar npm install para a instalação. A ferramenta também disponibiliza exemplos de testes para linguagens de programação diferentes.

Testes Automatizados no React Native Luby Software
Testes Automatizados no React Native 11

2ª etapa

Na sequência, vamos criar um diretório chamado helpers e adicionar dois scripts, o primeiro apps.js irá definir os aplicativos que serão utilizados. No exemplo, só será retornado o caminho para o arquivo apk, mas é possível configurá-lo para retornar caminhos para aplicativos diferentes, de acordo com condicionais.

Testes Automatizados no React Native Luby Software
Testes Automatizados no React Native 12

O próximo helper caps.js retorna as opções de configuração, como o nome da plataforma, tipo de automação, nome do dispositivo android, a versão que será utilizada e o aplicativo que será definido nos testes. Além disso, ele ajusta os parâmetros de conexão com o servidor do Appium.

Testes Automatizados no React Native Luby Software
Testes Automatizados no React Native 13

3ª etapa

No arquivo de testes, que deve ter o formato [nomeDoArquivo].test.js, importamos o webdriverio, o assert da biblioteca chai e as opções de android dos helpers criados anteriormente.

Além disso, definimos o caminho do aplicativo em androidOptions.capabilities.app = app, o formato de definição dos testes é describe(‘descrição do conjunto de testes’, função). E, para os testes, it(‘descrição do teste’, função), before() conecta as configurações do android que definimos no helper caps.js com o webdriverio antes dos testes começarem.

O formato de busca aos elementos é feito como client.$(‘~Parâmetro de Seleção’), onde cliente é a conexão feita com o webdriverio.

Dessa forma, podemos ainda simular eventos de touch com o método [element].click() e digitação com [element].setValue(). Também é possível simular o click no botão de retorno do dispositivo móvel usando client.back(). O método [element].getText() retorna o conteúdo de texto do elemento que pode ser comparado com o comando assert.equal().

A função assert da biblioteca chai possui métodos de comparação como isObject() e isNull() para verificar se o elemento comparado é um objeto ou nulo. Também é possível fechar a conexão com o webdriverio utilizando client.deleteSession().

Testes Automatizados no React Native Luby Software
Testes Automatizados no React Native 14

4ª etapa

Para a execução dos testes, é preciso iniciar o appium rodando no terminal appium e npm test, para que o mocha inicie a execução dos scripts de teste. Após a execução, teremos o seguinte resultado:

Testes Automatizados no React Native Luby Software
Testes Automatizados no React Native 15

O código fonte para os testes apresentados se encontra neste repositório.

Considerações finais

Testes automatizados trazem diversos benefícios para um ambiente de desenvolvimento. Dessa forma, são ótimos recursos para facilitar a verificação das funcionalidades e possíveis falhas de uma aplicação.

No React Native, ferramentas como Cypress e Appium proporcionam ambientes de testes automatizados que podem ser configurados de acordo com necessidades e preferências específicas.

Autora: Crislâine dos Santos Costa.

[adrotate banner=”5″]

Veja também:

Testes automatizados com adonis JS

Testes de performance

Gostou do conteúdo? Compartilhe

Últimos posts

Fique por dentro das últimas novidades do mundo da tecnologia com os conteúdos do nosso blog!

Acelere a Transformação Digital da sua Empresa

Basta preencher este formulário ou ligar para +55 11 3055 3404

Fale conosco​

Technology Intelligence

Luby - Latin America

Rua Amália de Noronha, nº 151, 3º Andar, Sala 303
Pinheiros, São Paulo – SP – Brasil
CEP: 05410-010

Luby - North America

1110 Brickell Avenue
Suite 310
Miami – FL
United States

Copyright ©2023 Luby Software LLC. All rights reserved.

Rolar para cima