[0019] Estrutura de testes E2E no mobile com Detox

[Rodrigo001-dev]

Salve galera, eu vou fazer o setup de testes E2E com o Detox.

Vou seguir essa documentação do expo

[rpc1910]

@Rodrigo001-dev , também tem esse video no canal da Rocketseat que pode te ajudar -> https://www.youtube.com/watch?v=V_BUjfBBYGI&ab_channel=Rocketseat

[Rodrigo001-dev]

@Rodrigo001-dev , também tem esse video no canal da Rocketseat que pode te ajudar -> https://www.youtube.com/watch?v=V_BUjfBBYGI&ab_channel=Rocketseat

Vlw pela dica @rpc1910, eu tinha visto esse video só que para seguir com esse tutorial do Rodrigão eu teria que utilizar a versão do Detox "18.19.0" e Jest "27", não se vale muito a pena.

O que tu acha ?

[rpc1910]

@Rodrigo001-dev , também tem esse video no canal da Rocketseat que pode te ajudar -> https://www.youtube.com/watch?v=V_BUjfBBYGI&ab_channel=Rocketseat

Vlw pela dica @rpc1910, eu tinha visto esse video só que para seguir com esse tutorial do Rodrigão eu teria que utilizar a versão do Detox "18.19.0" e Jest "27", não se vale muito a pena.

O que tu acha ?

Acho melhor seguirmos com as versões mais recentes do Detox e Jest. Podem haver novas features nessa versão que não existiam na versão 18 por exemplo.

[RennanD]

@Rodrigo001-dev o detox vem "quebrando" bastante nas últimas versões e acabamos tendo muitos problemas relacionados à ele no Ignite. Outra coisa é o suporte dele ao Expo. Como vamos utilizar o Managed Workflow, pelo menos nesse primeiro momento, é legal testar e ver se não vai algo que acabe dificultando o desenvolvimento do App. 💜

[Rodrigo001-dev]

@Rodrigo001-dev o detox vem "quebrando" bastante nas últimas versões e acabamos tendo muitos problemas relacionados à ele no Ignite. Outra coisa é o suporte dele ao Expo. Como vamos utilizar o Managed Workflow, pelo menos nesse primeiro momento, é legal testar e ver se não vai algo que acabe dificultando o desenvolvimento do App. 💜

Show, tem alguma sugestão de como eu poderia testar se o detox vai dificultar o desenvolvimento do App?

[Rodrigo001-dev]

@Rodrigo001-dev o detox vem "quebrando" bastante nas últimas versões e acabamos tendo muitos problemas relacionados à ele no Ignite. Outra coisa é o suporte dele ao Expo. Como vamos utilizar o Managed Workflow, pelo menos nesse primeiro momento, é legal testar e ver se não vai algo que acabe dificultando o desenvolvimento do App. purple_heart

Uma duvia que surgiu, eu estou utilizando esse plugin do expo para realizar as configurações do detox https://github.com/expo/config-plugins/tree/main/packages/detox em um determinado momento eu preciso executar o comando npx expo prebuild para gerar o código nativo com as configurações do detox, mas como você mesmo falou que nesse primeiro momento vamos utilizar apenas o projeto Managed Workflow, então eu não poderia rodar o expo prebuild para gerar o código nativo?

[Rodrigo001-dev]

@diego3g O que tu acha? Nessa primeira versão, realmente era necessário ser Managed Workflow?

[diego3g]

Gostaria de uma opinião dos amigos @rodrigorgtic @vinifraga e @RennanD aqui :)

[orodrigogo]

Eu gosto do Detox. A documentação do Expo recomenda o Detox por ser mais popular.

Existe esse plugin para Expo que podemos testar conforme já mencionado aqui:

https://github.com/expo/config-plugins/tree/main/packages/detox

O prebuild inevitavelmente vai trazer a pasta Android e iOS e podemos trabalhar em cima do Expo Custom Client com Development Builds para testes local.

Aproveitando para compartilhar, outra ferramenta que me parece interessante (vou testar ainda) é o Maestro.

[vinifraga]

Pessoal, não é necessário trabalharmos com Expo Go (Managed Workflow), podemos partir para os Expo Dev Clients (Devolopment Builds). Porém, é necessário lembrar que ao trabalhar dessa forma todos serão obrigados a gerar builds com essas novas libs nativas que forem adicionadas. O Expo Go não irá funcionar mais quando utilizarmos alguma lib incompatível.

Se formos seguir por esse caminho, sugiro criar uma issue para a configuração do app.json e de alguns assets antes de gerar o prebuild, pois vai facilitar muito fazer isso automaticamente (ex.: icon, splashscreen, scheme). Além disso, também é preciso definir o nome do pacote nativo que a aplicação vai ter (sugiro com.rocketseat.rsxp).

Lembrando que isso implica em utilizarem o XCode ou Android Studio para gerar suas builds localmente ou configurarem o EAS para gerar suas builds remotamente.

Por fim, uma forma de mitigar isso é gerarmos novos builds EAS quando novas libs nativas não suportadas por padrão forem adicionadas no projeto. Assim, quem tiver um computador menos potente ou não tiver acesso a essas ferramentas nativas pode utilizar o apk gerado para instalar no Android (físico e emulador). No iOS é mais complicado, talvez dê para usar o ipa para instalar no emulador, mas no físico seria muito complicado. Vale uma nova issue para isso também.

[Rodrigo001-dev]

Pessoal, não é necessário trabalharmos com Expo Go (Managed Workflow), podemos partir para os Expo Dev Clients (Devolopment Builds). Porém, é necessário lembrar que ao trabalhar dessa forma todos serão obrigados a gerar builds com essas novas libs nativas que forem adicionadas. O Expo Go não irá funcionar mais quando utilizarmos alguma lib incompatível.

Se formos seguir por esse caminho, sugiro criar uma issue para a configuração do app.json e de alguns assets antes de gerar o prebuild, pois vai facilitar muito fazer isso automaticamente (ex.: icon, splashscreen, scheme). Além disso, também é preciso definir o nome do pacote nativo que a aplicação vai ter (sugiro com.rocketseat.rsxp).

Lembrando que isso implica em utilizarem o XCode ou Android Studio para gerar suas builds localmente ou configurarem o EAS para gerar suas builds remotamente.

Por fim, uma forma de mitigar isso é gerarmos novos builds EAS quando novas libs nativas não suportadas por padrão forem adicionadas no projeto. Assim, quem tiver um computador menos potente ou não tiver acesso a essas ferramentas nativas pode utilizar o apk gerado para instalar no Android (físico e emulador). No iOS é mais complicado, talvez dê para usar o ipa para instalar no emulador, mas no físico seria muito complicado. Vale uma nova issue para isso também.

Show, entendi Será que vale a pena criar uma nova discussão para ver se vamos seguir com o Expo Dev Clients ?

[vinifraga]

@Rodrigo001-dev na minha opinião vale sim. Eu pessoalmente sugiro manter o Expo Go até onde der. Não dando mais certo, Expo Dev Builds são uma boa opção.

[Rodrigo001-dev]

Salve galera, só para atualizar todo mundo, já criei a discussão #95 Mas tambem já fui configurando algumas coisa como o @vinifraga sugeriu, caso a escolha seja o Expo Dev Clients

Eu já configurei o nome do pacote, o scheme e adicionei o plugin do detox

Mas eu estou tento um problema ao executar o projeto no emulador android:

Basicamente o erro que tenho é esse aqui

` ERROR Error: crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported, js engine: hermes

ERROR Invariant Violation: "main" has not been registered. This can happen if: Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project. A module failed to load due to an error and AppRegistry.registerComponent wasn't called., js engine: hermes`

O que mais me preocupa é o crypto.getRandomValues(), porque eu acho que essa função está sendo executada por alguma dependência do projeto

Uma dúvida que surgiu é que se escolhermos continuar com o Expo Go como vai ser feita a configuração do Detox?

[vinifraga]

Fala @rpc1910, esse último que você teve eu tive também, no meu caso ocorreu por conta do monorepo. Tinha hora que o monorepo funcionava, tinha hora que não. Se for o seu caso também, desativando no arquivo metro.config.js as linhas referentes ao monorepo deve voltar a funcionar, mas se tiver dificuldades pode me chamar.

Em relação a manter o Expo Go ou não, a decisão depende basicamente se aceitamos que a partir de agora vamos realizar o build nativo manualmente. Acredito que a maioria que trabalha com React Native tenha esse ambiente pronto. Por fim quem testava pelo dispositivo físico iOS mas não tem macOS não vai poder testar mais nesse ambiente. Resumindo: por mim, não vejo problemas em partir para as dev builds se o Detox for essencial para o MVP.

O que acham @rodrigorgtic @diego3g @RennanD?

[orodrigogo]

Bom ponto. Concordo com o @vinifraga.

O ponto chave é decidir se o Detox é essencial para essa primeira versão do App. Mas claro, podemos decidir juntos.

Que tal uma enquete?

[Rodrigo001-dev]

@rodrigorgtic Gostei da ideia

[RennanD]

Boa, concordo com o @vinifraga , mas acho que talvez para essa primeira versão, como queremos publicar um MVP bem funcional e o mais rápido possível, o detox pode acabar meio que "atrapalhando". Mas se a galera que estiver contribuindo no mobile não tiver dificuldades com o ambiente nativo do RN, acho que utilizar o Expo Dev Client é uma boa.

[Rodrigo001-dev]

Salve galera, só para deixar todo mundo atualizado, eu já criei a enquete como o Rodrigo sugeriu e já fui adiantando as configurações do detox, as configurações já estão prontas, eu rodei um teste bem simples e funcionou, o eas já está configurado, só está faltando comfigurar para os testes rodar em momento de build.

Só tem uma coisa, eu não tenho um ambiente MAC, por isso não consegui executar os teste no IOS.

[Rodrigo001-dev]

Opa galera, eu criei os hooks do eas para executar os teste e estava dando um pequeno erro de não reconhecer o AVD name, mas já resolvi agora está dando esse erro aqui

No Build do IOS apareceu assim

Será que esse npm ERR! está relacionado ao monorepo?

@RennanD @vinifraga @rodrigorgtic Alguns de vocês sabe o por que está acontecendo esse erro?

o arquivo eas-build-on-success.sh está assim

[vinifraga]

Fala @Rodrigo001-dev, me parece que o erro é na configuração do Detox porque tanto no Android quanto no iOS acusa que não encontrou a config para essas plataformas:

[Rodrigo001-dev]

@vinifraga Show, to dando uma olhada nisso agora

[Rodrigo001-dev]

Opa galera, eu não consegui fazer esse hook do eas para executar os testes em build. Eu vou descartar toda essas configs de hooks do eas, e vou fazer a PR somente do setup dos testes com detox, e se decidirmos que vale a pena realizar essas configs do eas para executar os teste quando estiver fazendo build criamos uma task para isso

[Rodrigo001-dev]

Opa @vinifraga, cara só uma pergunta, eu atualizei o meu repositório aqui e vi que estamos utilizando o expo-web-browser, mas depois que executei o prebuild para realizar as configurações do detox, apareceu isso aqui no terminal

Error: The method or property WebBrowser.openBrowserAsync is not available on android, are you sure you've linked all the native dependencies properly?

E eu pensei em colocar uma webView por exemplo no lugar do expo-web-browser antes de fazer a PR do detox O que tu acha?