E2E test dự án React native sử dụng Detox
Published: 2023-09-16 07:36:44

Detox là 1 framework do Wix phát triển, dùng trong end to end testing (E2E), tức là test theo những thao tác mà end user thường thực hiện. E2E test tuy thời gian chạy lâu nhưng sẽ kiểm thử được sát nhất với những gì mà end user sẽ sử dụng trên app của chúng ta.

Để bắt đầu E2E test trên React native:

## 1. Cài đặt

```
npm install detox-cli --g
// for iOS
brew tap wix/brew
brew install applesimutils

yarn add "jest@^29" --dev
yarn add detox --dev
detox init
```

Sau khi chạy dòng này, output thường sẽ là:

```
Created a file at path: .detoxrc.js 
Created a file at path: e2e/jest.config.js
Created a file at path: e2e/starter.test.js
```

## 2. Setup cho iOS

Replace all toàn bộ string `YOUR_APP` trong file `.detoxrc.js` thành tên dự án của bạn

 ```
apps: {
     'ios.debug': {
       type: 'ios.app',
       binaryPath: 'ios/build/Build/Products/Debug-iphonesimulator/YOUR_APP.app',
       build: 'xcodebuild -workspace ios/YOUR_APP.xcworkspace -scheme YOUR_APP -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build'
     },
     'ios.release': {
       type: 'ios.app',
       binaryPath: 'ios/build/Build/Products/Release-iphonesimulator/YOUR_APP.app',
       build: 'xcodebuild -workspace ios/YOUR_APP.xcworkspace -scheme YOUR_APP -configuration Release -sdk iphonesimulator -derivedDataPath ios/build'
     },
```

Cũng trong file này, lựa chọn máy ảo để chạy test trên Android và iOS.

Tên máy ảo sẽ có dạng iPhone 14 Pro và Pixel_4_API_31


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

Thêm script test vào package.json:

```
"scripts": {
    ...
    "pree2e-ios-debug": "detox build -c ios.sim.debug",
    "e2e-ios-debug": "detox test -c ios.sim.debug",
    "pree2e-android-debug": "detox build -c android.emu.debug",
    "e2e-android-debug": "detox test -c android.emu.debug"
}
```

Chạy build debug:

`yarn pree2e-ios-debug`

Chạy test:

`yarn e2e-ios-debug`

3. Cài đặt cho android

Thêm thư viện detox vào `android/build.gradle`
```
 buildscript {
   ext {
     buildToolsVersion = "31.0.0"
     minSdkVersion = 21 // (1)
     compileSdkVersion = 30
     targetSdkVersion = 30
+    kotlinVersion = 'X.Y.Z' // (2)
   }
 …
   dependencies {
     classpath("com.android.tools.build:gradle:7.1.1")
     classpath("com.facebook.react:react-native-gradle-plugin")
     classpath("de.undercouch:gradle-download-task:5.0.1")
+    classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion") // (3)
 …

 allprojects {
   repositories {
     …
     google()
+    maven { // (4)
+      url("$rootDir/../node_modules/detox/Detox-android")
+    }
     maven { url 'https://www.jitpack.io' }
   }
 }
```
Bổ sung thư viện vào `android/app/build.gradle`
```
android {
   …
   defaultConfig {
     …
     versionCode 1
     versionName "1.0"
+    testBuildType System.getProperty('testBuildType', 'debug')
+    testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
   …
   buildTypes {
     release {
       minifyEnabled true
       proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+      proguardFile "${rootProject.projectDir}/../node_modules/detox/android/detox/proguard-rules-app.pro"

       signingConfig signingConfigs.release
     }
   }
   …

 dependencies {
+  androidTestImplementation('com.wix:detox:+')
+  implementation 'androidx.appcompat:appcompat:1.1.0'
   implementation fileTree(dir: "libs", include: ["*.jar"])
```
Tạo file hỗ trợ test tại đường dẫn: `android/app/src/androidTest/java/<your.package>/DetoxTest.java`, chú ý là bạn phải tạo folder `androidTest` nhé
```
package com.<your.package>; // (1)

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 // (2)
    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 = (BuildConfig.DEBUG ? 180 : 60);

        Detox.runTests(mActivityRule, detoxConfig);
    }
}
```
Chạy build debug:

`yarn pree2e-android-debug`

chạy test:

`e2e-android-debug`

Done :D

Nếu có vấn đề gì, đừng ngại comment hỏi mình bên dưới nhé!