Testes E2E com Detox - React Native
Teste é para quem tem tempo!-vilasboas.dev.
Será que isso é uma verdade absoluta? Será que somente quem tem muito tempo sobrando consegue escrever testes? Quando é que temos algum tempo sobrando?!
Quando falamos de testes, logo vem à mente os testes unitários, testes de componentes, renderizou corretamente? A função retornou o esperado? E sempre fazemos aquela famosa “passada de olho” (no caso do desenvolvimento front-end). Muitas vezes no time não tem um QA, o PO acaba fazendo este papel ou os demais devs, para ver “se pega alguma coisa”. Até para um time que tenha um QA, como ele faria o teste para saber se a aplicação está tratando corretamente todas as interações? Se as trocas de tela estão funcionando corretamente, se a aplicação não está crashando em algum ponto? A pessoa vai fazer na mão? Quantas horas que seriam dedicadas somente a isto? Quanto tempo perdido digitando e-mail/senha, ou qualquer outra informação? Testar todas as possibilidades de input?
Vou apresentar hoje a biblioteca Detox para automatização de testes E2E da Wix! E acabar com seus problemas de testes E2E de aplicações mobile com React Native!
Assim como dito antes, quantos minutos ou até mesmo horas para testar as interações da sua App? Que tal dedicar um tempo para escrever os testes e testar todos os fluxos em poucos segundos, ou dependendo do tamanho da sua aplicação minutos, sim eu disse TODOS OS FLUXOS.
- Para conhecer a biblioteca: Detox Wix
É uma biblioteca que a primeira vista é muito confusa e complexa de se usar, e na real é bem confusa e complexa para implementar rsrs, mas uma vez feita a implementação você não terá palavras para descrever o prazer que é ver o teste ser executado e toda a sua aplicação testada.
Para esta nossa jornada seguiremos os seguintes passos:
- Criar um projeto do zero (irei utilizar typescript, mas fique com a sua preferência), utilizando React Native CLI.
- Vamos desenvolver a aplicação seguindo os designs criados e idealizados pela Milena Paloma. (LinkedIn)
- Criar na App todas as interações desejadas.
- Implementar e configurar a biblioteca Detox.
- Entender e escrever nosso primeiro teste.
- Escrever testes para a aplicação.
Para facilitar vou deixar o repositório com uma branch “dev”, com o projeto já criado e desenvolvido seguindo o design proposto (sem a implementação do Detox). Basta clonar.
Bora codar!
1- Criar um projeto do zero utilizando React Native CLI.
Insira no terminal o seguinte comando para criar o seu projeto:
npx react-native init E2EDetox —-template react-native-template-typescript
Vou rodar também o git init, só para iniciar nosso repositório localmente. Vamos aproveitar rodar um git add . e git commit -m "Initial commit". Para termos um “status 0” e partimos daqui.
E rodando a primeira vez, teremos algo mais ou menos assim:
Ps.: Gosto de utilizar o iPhone X. E para rodar sem problemas nos scripts eu utilizo dessa forma:
2- Vamos desenvolver a aplicação seguindo o design
Wireframe:
Deixarei a branch criada a parte.
3- Criar na App todas as interações desejadas
Design: https://xd.adobe.com/view/e2b85953-52bc-4e68-8d4e-f7655f99a442-b7eb/?fullscreen
Acabou ficando um pouco maior do que o esperado e olha que não fiz tudo o que gostaria por causa do tempo.
Só uma observação, ultimamente tenho estudado mais a fundo Typescript e cara, como é bom! Facilita demais as coisas, agora caso encontre algo em que eu pudesse melhorar só mandar mensagem ou fazer uma PR. Valeu!
Branch: https://github.com/adonaipinheiro/E2EDetox/tree/design
Se quiserem “pular” a etapa de criação, basta clonar desta branch que você terá o design completo que usarei como base.
4- Implementar e configurar a biblioteca Detox
Meu Deus! Como eu demorei fazendo o design, quase me esqueci do que o artigo se tratava rsrsrs
Bom, acredito que agora temos elementos mais do que suficientes para testar nossa aplicação… Vamos ao que interessa?
Vou fazer o passo a passo para instalar a lib Detox (seguindo a própria documentação)
- Instalar Detox como dependência de desenvolvimento. E como estaremos utilizando o Jest (que vem com a CLI do RN), devemos instalar também o jest-circus junto.
npm install -g detox-cli
yarn add detox jest-circus -D
Logo após rodar:
detox init -r jest
Você vai notar que foram criados alguns arquivos no seu projeto. Uma pasta e2e e um arquivo .detoxrc.json. Não se preocupe com a pasta e2e agora…
Dentro do arquivo .detoxrc.json, vamos alterar algumas informações seguindo as documentações fornecidas.
- Para ios (simples quanto por uma luva): https://github.com/wix/Detox/blob/master/docs/Introduction.Ios.md
- Para android (não vou mentir, para android é chato pra caramba, olhe bem a documentação e se precisar compare com meus arquivos):
Instale NDK Sibe-by-side no Android Studio, dentro do SDK Tools:
https://github.com/wix/Detox/blob/master/docs/Introduction.Android.md
Vou aproveitar e já criar alguns scripts para os nossos testes no package.json.
Vou executar nosso novo script para buildar os testes. E depois rodar nosso primeiro teste.
yarn detox:build:android e/ou yarn detox:build:ios
Se tudo der certo no build você verá:
Rode o comando:
yarn detox:test:android e/ou ao finalizar yarn detox:test:ios
E se tudo der certo ao rodar o teste, ele falhará:
Se nenhum erro a mais aparecer, isto significa que você terminou de configurar corretamente o Detox.
5- Entender e escrever nosso primeiro teste
Devemos ter em mente que nós iremos testar fluxos e que esperamos um comportamento como se alguém estivesse usando nossa aplicação, então devemos respeitar os fluxos existentes, ou seja, se vou testar um fluxo na Home, por exemplo, devo logar primeiro, depois entrar na Home, depois testar o fluxo dentro da Home.
Para quem já está familiarizado com testes utilizando Jest, vamos seguir a mesma linha de raciocínio.
Vou separar por pastas, correspondentes as pastas de páginas que temos na aplicação, cada arquivo terá apenas um describe.
Desta forma poderemos testar para cada página o fluxo que desejamos.
Delete o arquivo “firstTest.e2e.js”. Crie um dentro da pasta Preload “preload.e2e.ts”.
Para este teste passar, devemos colocar lá no arquivo da página Preload, um testID=’preload’ no componente pai.
E teremos este resultado:
6- Escrever testes para a aplicação
Nosso artigo acabou ficando bem grande. Como agora é só escrever historinhas, vou desenvolver aqui e mostrar o resultado final para vocês com os testes rodando no iOS.
Lembrando, você pode e deve fazer todas as interações que desejar, as possibilidades são quase infinitas. Dê uma olhada:
Se tiver dúvidas é só entrar em contato!
Até a próxima.
