經過開發的鼎力相助，終於把RN的自動化測試框架研究通過了，目前環境已搭建並結合APP執行第一個Demo成功了。

1框架介紹（Detox）

它是為移動端APP打造的灰盒端到端自動化測試框架。

可用於React-Native開發的APP，使用js測試框架test或mocha來執行相應的測試指令碼。通過對RN程式包中package.json增加Detox相關配置，並在RN程式包中增加測試案例資料夾e2e（在其中增加測試案例）實現測試用例的編寫和執行。

2環境搭建 （以下以在ios中執行自動化測試案例為例）

2.1環境準備：

Mac with macOS (macOS El Capitan 10.11以上)

Xcode 8.3+ with Xcode command line tools

2.2 安裝步驟：

2.2.1 安裝依賴

2.2.1.1 安裝最新版本的homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2.2.1.2 安裝Node.js

brew update && brew install node

brew tap wix/brew

使用applesimutils來完成呼叫Xcode中執行的IOS模擬器，所以前提是必須先在Xcode中將模擬器調起。

2.2.1.4 安裝detox-cli

npm install -g detox-cli

2.2.1.5 安裝 react-native-cli

npm install -g react-native-cli

2.2.1.6 安裝

2.2.2 安裝用例執行框架（Mocha或Jest，都是js測試框架，目前使用的是前者）

2.2.2.1 安裝jest工具（以下演示以jest為例）

npm install jest --save-dev

2.2.2.2 安裝mocha工具

npm install mocha --save-dev

2.2.3 安裝Detox到專案

若你的專案是RN專案，則可以使用如下口令完成Detox安裝：

npm install detox --save-dev

若為原生安卓或IOS的專案，則需要在專案目錄下的packages.json更新如下內容（換句話說也支援安卓和IOS專案的自動化測試）

{

  "name": "<your_project_name>",

  "version": "0.0.1"

}

然後再安裝Detox

npm install detox --save-dev

3 更新配置檔案package.json

需要更新專案根目錄下的package.json，把如下程式碼插入其中。

"detox": {

  "configurations": {

    "ios.sim.debug": {

      "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/example.app",

      "build": "xcodebuild -project ios/example.xcodeproj -scheme example -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",

      "type": "ios.simulator",

      "name": "iPhone 7"

    }

  }

}

在如上程式碼中，得把example使用實際的專案名稱（這裡是ClaimPlatform_RN）替代，見下圖。

，在binaryPath中

example.app也應被ClaimPlatform_RN.app替代。在bulid這項中example.xcodeproj也被做相應的替代，變成ClaimPlatform_RN.xcodeproj，-scheme example變成 -scheme ClaimPlatform_RN。

如果IOS的app咋workspace資料夾中，則得使用 use -workspace ios/example.xcworkspace 來代替專案，變成 use -workspace ios/laimPlatform_RN.xcworkspace instead of -project。

確保配置檔案中的模擬器是已經被安裝並處於可用狀態（如以上配置中的iphone7 是否可以被Xcode調起）。亦可通過xcrun simctl口令檢查可使用的模擬器是否包含配置中的模擬器。

附修改後package.json的detox配置（只包含了IOS的，也可補充Android的）：

"detox": {

    "test-runner": "jest",

    "specs": "e2e",

    "configurations": {

      "ios.sim.release": {

      "binaryPath":"ios/build/Build/Products/Debug-iphonesimulator/ClaimPlatform_RN.app",

        "build": "export RCT_NO_LAUNCH_PACKAGER=true && xcodebuild -workspace ios/ClaimPlatform_RN.xcworkspace -scheme ClaimPlatform_RN -configuration Release -sdk iphonesimulator -derivedDataPath ios/build -quiet",

        "type": "ios.simulator",

        "name": "iPhone 7"

      },

      "ios.sim.debug": {

        "binaryPath":"ios/build/Build/Products/Debug-iphonesimulator/ClaimPlatform_RN.app",

        "build": "xcodebuild -workspace ios/ClaimPlatform_RN.xcworkspace -scheme ClaimPlatform_RN -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",

        "type": "ios.simulator",

        "name": "iPhone 7"

      }

    }

  },

Plus：在MAC環境中執行用例前，必須先通過Xcode調起該模擬器。

4 編寫用例

4.1 構建用例資料夾

若選中mocha做為測試框架，則需要輸入如下口令即可在專案當前根目錄下

自動生成e2e資料夾，並完成對mocha執行的簡單配置。

detox init -r mocha

同理，選用jest，則執行如下口令：

detox init -r jest

4.2 編寫用例

     開始編寫第一個演示Demo，這裡以RN的 APP首頁上的輸入手機號碼定位為例子。4.2.1 前期準備：需要在前端程式碼中給該輸入文字框元素增加一個全域性定位屬性testID，見下圖

4.2.2 編寫用例

以開啟IOS的APP找到首頁上的手機號輸入框為例。describe相當於testsuit，後面跟的是testsuit名稱（建議與專案名稱一致）；it相當於testcase，後面跟的是testcase名稱。具體用例見下圖。

5 構建APP並執行用例

5.1 構建APP

detox build --configuration ios.sim.debug (debug模式)

detox build --configuration ios.sim.release (release模式)

5.2 執行用例

detox test --configuration ios.sim.debug (debug模式)

detox test --configuration ios.sim.release (release模式)