TESTES E2E COM REACT NATIVE E DETOX
TESTES E2E COM REACT NATIVE E DETOX
O INÍCIO
Desde que entrei na Aurum pude perceber que testes são uma parte crucial do processo de desenvolvimento. Os testes unitários sempre foram parte do nosso dia a dia, mas com o tempo fomos buscando outras maneiras de garantir a qualidade do código, e começamos a investir tempo em testes E2E.
Para implementar os testes End-to-End na Web foi utilizado Selenium e atualmente usamos o Cypress (é possível conferir como foi a mudança entre essas duas bibliotecas nesse post), mas ainda não tínhamos experimentado nenhuma opção em projetos mobile.
Sendo membro da equipe Astrea Mobile, não quis deixar nosso app de fora e comecei a pesquisar algumas opções no mercado, após um tempo encontrei o Detox, uma biblioteca de código aberto desenvolvida pelo pessoal do Wix. Como já utilizamos algumas ferramentas desenvolvidas por eles, como o react-native-navigation, resolvi estudar e implementar em nosso projeto.
INSTALAÇÃO
CONFIGURANDO O AMBIENTE
Aqui vamos seguir as configurações para o MacOS, por isso utilizamos o homebrew em algumas etapas do processo. Importante checar algumas informações antes de começarmos:
- MacOS High Sierra 10.13.16 ou superior
- Xcode 10.2+
- CLI do Xcode
Primeiro instalação do Node. O Detox roda com versões 8.3 ou superiores, para checar sua versão use o comando:
node -vCaso não tenha instalado ainda:
brew update && brew install nodeDepois instalamos globalmente a CLI do Detox:
npm install -g detox-cliAgora vamos instalar o applesimutils, que são algumas ferramentas para auxiliar o trabalho com simuladores iOS, o Detox utilizará delas para se comunicar com o emulador:
brew tap wix/brewbrew install applesimutils
ADICIONANDO AO PROJETO
Primeiro adicionamos o detox ao projeto como dependência de desenvolvimento:
yarn add -D detoxComo o Detox não executa propriamente as lógicas dos testes, mas delega essa função, precisamos instalar um test runner, e para isso temos duas opções: Jest ou Mocha. Optamos pelo Jest pois já o utilizamos junto com o Testing Library no projeto. Então instalamos o test runner jest-circus:
yarn add -D jest-circusPronto agora já podemos começar a configurar os arquivos do Detox.
CONFIGURANDO O DETOX
Vamos criar a estrutura base dos arquivos com o comando:
detox init -r jestEsse comando deve criar um arquivo .detoxrc na raiz de seu projeto e uma pasta e2e com os seguintes arquivos:
- config.json
- environment.js
- firstTest.e2e.js
Você pode conferir se os arquivos estão corretos no repositório demo.
Dentro do .detoxrc vamo fazer algumas alterações:
- binaryPath: esse é o caminho onde será encontrada o arquivo .apk ou .ipa para executar. Mude onde estiver example.app para o nome do seu projeto.
- build: o caminho para executar o comando build do detox. Troque onde estiver example pelo nome de seu projeto. Caso esteja utilizando pods ou React Native 0.60+ substitua a tag -project por -workspace e .xcodeproj por .xcworkspace.
- type: o tipo de dispositivo que vai ser utilizado nos testes, deixamos ios.simulator
- device: por último o dispositivo que vamos utilizar, no iOS passamos o type como iPhone 11 Pro. Configurando um dispositivo Android passaríamos a propriedade com o nome avdName.
Agora vamos executar configurações do nosso Detox, esse processo pode durar alguns minutos:
detox buildCaso você tenha mais de uma configuração, utilize o comando configuration seguido no nome de sua configuração para selecioná-la:
detox build — configuration iosCRIANDO SEU PRIMEIRO TESTE
No arquivo firstTest.e2e.js vamos escrever nosso primeiro teste. Como é utilizado o jest a sintaxe não será um problema pra quem já está familiarizado com testes unitários em javascript.
Para esse teste criei um componente simples que simula uma validação de formulário de login:
A estrutura do arquivo de testes é composta de um describe para criar uma suíte de testes:
No início adicionamos um beforeEach, que será responsável por recarregar o aplicativo (o comando cmd + r no simulador iOS ou rr no emulador Android) antes da execução de cada cenário:
Depois criamos nossa primeira suíte de testes. Iremos testar a validação do input de senha:
Vamos utilizar o método element junto com o match escolhido para capturar os elementos da tela. Começaremos com o input de email, vamos capturá-lo pelo id, no componente é possível ver uma prop testID com o valor que vamos buscar e salvá-lo em uma variável
Depois vamos buscar nosso botão, para localizá-lo podemos utilizar seu texto:
Agora é a hora de preencher os campos, vamos utilizar a variável que salvamos o component e a action typeText() do Detox:
Com nosso input preenchido é só clicar em no botão, usando a action tap() fazemos isso facilmente:
Importante lembrar que as actions do Detox são assíncronas, ou seja, elas retornam Promises e utilizamos o await para esperar a ação finalizar.
No fim verificamos se a validação ocorreu corretamente buscando um elemento texto na tela:
Pronto agora é só rodar seus testes E2E:
detox test
CONCLUSÃO
O Detox oferece um leque variado de funcionalidades para realizar testes E2E em sua aplicação móvel, com uma documentação bem completa e utilizando uma sintaxe já conhecida para os programadores da área, o tornando uma opção produtiva e poderosa de ferramenta para aumentar ainda mais a cobertura de testes do seu aplicativo.
Abaixo deixo alguns link importantes, nos quais esse texto foi baseado, para quem quiser se aprofundar mais nessa biblioteca:
