Setup Detox em aplicações React Native
Tags: javascript, testing, reactnative, guide
Published: 2022-04-05 20:09:12

Em setembro do ano passado a Rocketseat lançou um [Code/drops#101](https://youtu.be/V_BUjfBBYGI) ensinando a configurar e rodar testes no React Native usando detox. Porém o tutorial que é feito lá não contempla o iIOS, apenas o android. Por isso decidir documentar o setup passo a passo para que você consiga de maneira fácil, rodar testes e2e tanto no android quanto no iIOS. Bora? 

_Repositório com a aplicação no github: [codedrop-teste2e](https://github.com/daviseares/codedrop-teste2e-rn)_

## Ambiente
Na raiz do seu terminal, instale o detox-cli globalmente

```Bash
 npm install -g detox-cli
```

Na raiz do seu projeto, instale o detox e o jest como dependências de desenvolvimento

```Bash
 yarn add detox jest -D
```

## Android
### 1. Na pasta Android > build.gradle
Dentro de repositories, adicione o bloco `maven`.

```java
allprojects {
    repositories {
				...
				// adicione apenas o bloco maven abaixo
        maven {
            // Add to detox
            url "$rootDir/../node_modules/detox/Detox-android"
        }
    }
}
```

### 2. Na pasta Android > App > build.gradle
Adicione as novas dependências necessárias para rodar os testes no android

```Java
android {
    defaultConfig {
				...
        // Novas dependencias para rodar os testes.
        testBuildType System.getProperty('testBuildType', 'debug')
        testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
    }
}

```

No mesmo arquivo, adicione: 

```
dependencies {
		// Novas dependencias para rodar os testes.
    androidTestImplementation('com.wix:detox:+') { transitive = true }
    androidTestImplementation 'junit:junit:4.12'
}
```

### 4. Setup de teste no Android
Agora, vamos criar um arquivo chamado **DetoxTest.java** no seguinte caminho:
`android/app/src/androidTest/java/com/[nome_do_package]/DetoxTest.java`

```Java
package com.package; // Trocar pelo no do Projeto.

import com.wix.detox.Detox;
import com.wix.detox.config.DetoxConfig;

import org.junit.Rule;
import org.junit.Test;
import org.junit.runner.RunWith;

import androidx.test.ext.junit.runners.AndroidJUnit4;
import androidx.test.filters.LargeTest;
import androidx.test.rule.ActivityTestRule;

@RunWith(AndroidJUnit4.class)
@LargeTest
public class DetoxTest {
    @Rule
    public ActivityTestRule<MainActivity> mActivityRule = new ActivityTestRule<>(MainActivity.class, false, false);

    @Test
    public void runDetoxTests() {
        DetoxConfig detoxConfig = new DetoxConfig();
        detoxConfig.idlePolicyConfig.masterTimeoutSec = 90;
        detoxConfig.idlePolicyConfig.idleResourceTimeoutSec = 60;
        detoxConfig.rnContextLoadTimeoutSec = (com.package.BuildConfig.DEBUG ? 180 : 60);

        Detox.runTests(mActivityRule, detoxConfig);
    }
}
```

## iOS
Instale o brew na raiz do terminal, então:
```Bash
brew tap wix/brew
brew install applesimutils
```

## Setup detox 
Iniciando com detox
```Bash
yarn detox init -r jest
```

Atualizando o arquivo .detoxrc.json

```JSON
{
  "testRunner": "jest",
  "runnerConfig": "e2e/config.json",
  "configurations": {
    "android.emu.debug": {
      "type": "android.emulator",
      "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk",
      "build": "cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..",
      "device": {
        "avdName": "Pixel_5_API_31" // your avd-name here
      }
    },
    "ios.sim.debug": {
      "type": "ios.simulator",
      "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/yourProject.app",
      "build": "xcodebuild -workspace ios/yourProject.xcworkspace -scheme yourProject -sdk iphonesimulator -derivedDataPath ios/Build",
      "device": {
        "type": "iPhone 11"
      }
    }
  },
}
```

## Gerando a build para teste

```
No Android:
yarn detox build -c android.emu.debug

No iOS:
yarn detox build -c ios.sim.debug
```

## Executando testes com Detox

```
No Android:
yarn detox test -c android.emu.debug

No iOS:
yarn detox test -c ios.sim.debug
```

### 🚨 xcode problems 🚨
Caso você tenha um problema no build ios, tente mudar o caminho da pasta build conforme a imagem abaixo.

No menu do xcode acesse files > xcoworkspace settings > Advanced > Custom.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cld8nafbfy66kzfxlwq5.png)