E2E testing with Detox on Azure CI/CD for iOS

End-to-end (e2e) testing involves testing the entire system from end to end to ensure that all of the components are working together as expected.

Detox is a testing and automation tool for React Native and React web applications. It can be used to automate the process of testing an iOS app by simulating user interactions and then verifying that the app functions as expected.

First follow this guide to set up your environment https://wix.github.io/Detox/docs/introduction/getting-started

Add the following configuration to your .detoxrc.json

{
  "testRunner": {
    "$0": "jest",
    "args": {
      "config": "e2e/jest.config.js"
    },
    "jest": {
      "setupTimeout": 300000,
      "reportSpecs": false,
      "reportWorkerAssign": false
    }
  },
  "apps": {
    "ios.staging.debug": {
      "type": "ios.app",
      "binaryPath": "./ios/build/Build/Products/Staging Debug-iphonesimulator/app.app",
      "build": "xcodebuild -workspace ios/app.xcworkspace -scheme 'app Staging' -configuration 'Staging Debug' -sdk iphonesimulator -derivedDataPath ios/build"
    },
    "ios.staging.release": {
      "type": "ios.app",
      "binaryPath": "./ios/build/Build/Products/Staging Release-iphonesimulator/app.app",
      "build": "xcodebuild -workspace ios/app.xcworkspace -scheme 'app Staging' -configuration 'Staging Release' -sdk iphonesimulator -derivedDataPath ios/build"
    }
  },
  "devices": {
    "ios.iphone.simulator": {
      "type": "ios.simulator",
      "device": {
        "type": "iPhone 12"
      }
    }
  },
  "configurations": {
    "ios.staging.debug": {
      "device": "ios.iphone.simulator",
      "app": "ios.staging.debug"
    },
    "ios.staging.release": {
      "device": "ios.iphone.simulator",
      "app": "ios.staging.release"
    }
  }
}

Create your tests

https://wix.github.io/Detox/docs/introduction/your-first-test

Add the following scripts to your package.json file

    "test:e2e:ios:build": "cd ./packages/app && npm run test:e2e:build -- -c ios.staging.debug",
    "test:e2e:ios:run": "cd ./packages/app && detox test -c ios.staging.debug",
    "test:e2e:ios:build:ci": "cd ./packages/app && npm run test:e2e:build -- -c ios.staging.debug",
    "test:e2e:ios:run:ci": "cd ./packages/app && detox test -c ios.staging.debug --headless",

Create a template under .azuredevops/templates/ios

`jobs:
  - job: Build
    displayName: "E2E iOS tests"
    pool:
      vmImage: macos-12
    steps:
      - script: |
          cd ./packages/app && yarn add detox
          cd ios && pod install && cd ..
        displayName: "Pod Install"

      - script: |
          brew tap wix/brew
          brew install applesimutils
        displayName: "Install Applesimutils"

      - script: |
          yarn app:start &
        displayName: "Start React Native packager"

      - script:  |
          yarn test:e2e:ios:build:ci
        displayName: "Build detox tests"

      - script:  |
          yarn test:e2e:ios:run:ci
        displayName: "Run detox tests"`

Call the iOS template from your main pipeline file

      ## Run cypress tests
      - script: yarn web:cy:ci
        displayName: "Run cypress tests"

Sources

https://wix.github.io/Detox/

Blog