E2E test dự án React native sử dụng Detox

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

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

1. 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é!