Detox

O que é

Detox é uma ferramenta de testes para aplicações moveis desenvolvida pela Wix. Detox permite executar os testes em um dispositivo físico ou pelo simulador podendo realizar interações no aplicação como um usuário.

Como usar

Instale o detox-cli executando npm install -g detox-cli no terminal, o cli irá facilitar a utilização do detox pela linha de comando.

Com o cli instalado, devemos agora adicionar a dependência do detox no projeto.

  1. Navegue até a raiz do projeto e execute npm install detox --save-dev para instalar a dependência do detox.

  2. Após instalar a dependência do detox execute detox init -r jest na raiz do projeto para adicionar as configurações básicas do detox.

    Na raiz será criado um novo arquivo .detoxrc.json e uma pasta e2e contento as configurações de execução do emulador e alguns testes de exemplo.

  3. Altere o arquivo .detoxrc.json e configure o caminho binaryPath apontando para a arquivo de build da aplicação e device com as configurações do emulador.

    Exemplo de configuração

    "ios": {
   "type": "ios.simulator",
   "binaryPath": "./ios/build/Build/Products/Release-iphonesimulator/testReactNative.app",
   "device": {
     "type": "iPhone 11"
   }
 },
"android": {
   "type": "android.emulator",
   "binaryPath": "./android/app/build/outputs/apk/app-debug.apk",
   "device": {
     "avdName": "Pixel_2_API_29"
   }
 }

  4. Execute o comando detox build para construir a aplicação.

  5. Após construida use o comando detox test para executar os testes.

Escrevendo testes

É recomendado a adição da propriedade testID nos componentes que irão fazer parte de todo o ciclo do teste, como por exemplo um botão que será pressionado para realizar uma ação.

<TouchableOpacity testID='botao-login'>
    <Text>Login</Text>
</TouchableOpacity>

Teste de exemplo

describe("Example", () => {
  beforeEach(async () => {
    //Realiza o reload na aplicação
    await device.reloadReactNative();
  });

  it("should have login button on screen", async () => {
    //Com a propriedade `testID` adicionada é possível realizar a captura do elemento da seguinte maneira
    await expect(element(by.id("botao-login"))).toBeVisible();
  });

  it("should trigger the button callback", async () => {
    //Utilizando da função tap para simular o toque do usuário
    await element(by.id("botao-login")).tap();
  });
});

Para mais informações sobre os eventos disponíveis consulte a documentação das ações

Como aprender

Material útil

Validando o conhecimento

  • Instale e configure o detox em um projeto que possua uma tela de autenticação.
  • Crie um teste para realizar a autenticação na aplicação.
  • Valide os resultados que serão exibidos.

Possíveis problemas

...

← CypressJest →