Run Detox tests using codemagic

[Bebrevski]

If you are looking for help, please confirm the following...

• I confirm I have searched the Docs, Codemagic Sample Projects, and GitHub Discussions.
• I confirm the software versions on my local computer match the ones in CI environment (e.g. Xcode version, Gradle version). See here
• I confirm I am able to do a fresh clone of the repository and build the project on my local computer.

Which mobile framework are you using?

React Native

Steps to reproduce

Hey guys. I have some difficulties running detox test on the hosted machine. I red these docs
How to run RN Detox tests on Codemagic

After applying all the steps mentioned i get error

● Test suite failed to run

    DetoxRuntimeError: Cannot boot Android Emulator with the name: 'Pixel_API_33'

    HINT: Make sure you choose one of the available emulators:

      at AVDValidator._assertAVDMatch (node_modules/detox/src/devices/allocation/drivers/android/emulator/AVDValidator.js:36:13)
      at AVDValidator.validate (node_modules/detox/src/devices/allocation/drivers/android/emulator/AVDValidator.js:18:16)
      at async EmulatorAllocDriver.allocate (node_modules/detox/src/devices/allocation/drivers/android/emulator/EmulatorAllocDriver.js:59:5)
      at async /Users/builder/clone/node_modules/detox/src/devices/allocation/DeviceAllocator.js:44:22

After that I thought that I am not using the proper avdName and started to search what are the provided names of the emulators. And for my surprise there are none

I have searched for any info that can resolve my issue, tried numerous options to find and start any emulator, but with no success.
Can someone help?

codemagic.yaml

workflows:
  react-native-android:
    name: React Native Android
    environment:
      android_signing:
        - Signing_Cert
      java: 17
    scripts:
      - name: Install npm dependencies
        script: |
          npm install
      - name: Install detox dependencies
        script: brew tap wix/brew
      - name: Install detox-cli
        script: |
          npm install -g detox-cli
          cd $CM_BUILD_DIR && npm install detox --save-dev
      - name: Set Android SDK location
        script: |
          echo "sdk.dir=$ANDROID_SDK_ROOT" > "$CM_BUILD_DIR/android/local.properties"
      - name: Gradlew - Grant permissions
        script: cd android && chmod +x gradlew && cd ..
      - name: List available devices
        script: |
          echo "Listing available Android devices..."
          adb devices
      - name: Build with Detox
        script: npm run build:e2e:codemagic
      - name: Test with Detox
        script: npm run test:e2e:codemagic
      - name: Build Android release
        script: |
          cd android
          ./gradlew assembleRelease
          ./gradlew bundleRelease
    artifacts:
      - android/app/build/outputs/**/*.aab
      - android/app/build/outputs/**/*.apk

package.json

{
  "name": "fleet-platform-mobile",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "debugger": "npx react-native start --experimental-debugger",
    "lint": "eslint .",
    "test:e2e": "detox test -c android.emu.debug --coverage",
    "build:e2e:codemagic": "detox build -c android.emu.test",
    "test:e2e:codemagic": "detox test -c android.emu.test --headless",
    "test": "jest"
  },
  "dependencies": {
    "@gorhom/bottom-sheet": "^4.6.3",
    "@notifee/react-native": "^7.8.2",
    "@react-native-async-storage/async-storage": "^1.22.3",
    "@react-native-community/geolocation": "^3.2.1",
    "@react-native-community/slider": "^4.5.2",
    "@react-native-firebase/app": "^20.3.0",
    "@react-native-firebase/messaging": "^20.3.0",
    "@react-navigation/bottom-tabs": "^6.5.2",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
    "@reduxjs/toolkit": "^2.0.1",
    "@shopify/react-native-skia": "^1.1.0",
    "@wuba/react-native-echarts": "^1.3.0",
    "axios": "^1.6.2",
    "dayjs": "^1.11.10",
    "echarts": "^5.5.0",
    "i18next": "^23.7.6",
    "lodash": "^4.17.21",
    "react": "18.2.0",
    "react-i18next": "^13.4.1",
    "react-native": "0.74.2",
    "react-native-calendars": "^1.1304.0",
    "react-native-date-picker": "^4.3.7",
    "react-native-device-info": "^10.12.0",
    "react-native-dotenv": "^3.4.11",
    "react-native-geocoding": "^0.5.0",
    "react-native-gesture-handler": "^2.16.2",
    "react-native-google-places-autocomplete": "^2.5.6",
    "react-native-keychain": "^8.2.0",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-map-clustering": "^3.4.2",
    "react-native-maps": "^1.8.4",
    "react-native-mask-text": "^0.14.2",
    "react-native-paper": "^5.12.3",
    "react-native-push-notification-popup": "^1.7.0",
    "react-native-reanimated": "^3.11.0",
    "react-native-safe-area-context": "^4.10.1",
    "react-native-screens": "^3.29.0",
    "react-native-svg": "^14.1.0",
    "react-native-svg-transformer": "^1.2.0",
    "react-native-vector-icons": "^10.0.3",
    "react-redux": "^9.0.4",
    "socket.io-client": "^4.7.3"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.74.84",
    "@react-native/eslint-config": "0.74.84",
    "@react-native/metro-config": "0.74.84",
    "@react-native/typescript-config": "0.74.84",
    "@types/jest": "^29.5.12",
    "@types/lodash": "^4.14.202",
    "@types/node": "^20.14.10",
    "@types/react": "^18.2.6",
    "@types/react-native": "^0.73.0",
    "@types/react-native-dotenv": "^0.2.2",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "babel-plugin-optional-require": "^0.3.1",
    "detox": "^20.23.0",
    "eslint": "^8.19.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "jest": "^29.7.0",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "ts-jest": "^29.1.5",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  },
  "eslintConfig": {
    "extends": "react-app"
  }
}

detoxrc.js

apps: {
    'ios.debug': {
      type: 'ios.app',
      binaryPath:
        'ios/build/Build/Products/Debug-iphonesimulator/FleetPlatformMobile.app',
      build:
        'xcodebuild -workspace ios/MobileAppName.xcworkspace -scheme MobileAppName-configuration Debug -sdk iphonesimulator -derivedDataPath ios/build',
    },
    'ios.release': {
      type: 'ios.app',
      binaryPath:
        'ios/build/Build/Products/Release-iphonesimulator/MobileAppName.app',
      build:
        'xcodebuild -workspace ios/MobileAppName.xcworkspace -scheme MobileAppName-configuration Release -sdk iphonesimulator -derivedDataPath ios/build',
    },
    'android.debug': {
      type: 'android.apk',
      binaryPath: 'android/app/build/outputs/apk/debug/app-debug.apk',
      build:
        'cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug',
      reversePorts: [8081],
    },
    'android.release': {
      type: 'android.apk',
      binaryPath: 'android/app/build/outputs/apk/release/app-release.apk',
      build:
        'cd android && ./gradlew assembleRelease assembleAndroidTest -DtestBuildType=release',
    },
    'android.test': {
      type: 'android.apk',
      binaryPath: 'android/app/build/outputs/apk/debug/app-debug.apk',
      build:
        'cd android && ./gradlew assembleRelease assembleAndroidTest -DtestBuildType=debug && cd ..',
    },
  },
  devices: {
    simulator: {
      type: 'ios.simulator',
      device: {
        type: 'iPhone 15',
      },
    },
    attached: {
      type: 'android.attached',
      device: {
        adbName: '.*',
      },
    },
    emulator: {
      type: 'android.emulator',
      device: {
        avdName: 'Pixel_8_Pro_API_34',
      },
    },
    test: {
      type: 'android.emulator',
      device: {
        avdName: 'After i find emulators list i will pick one and set its name here',
      },
    },
  },
  configurations: {
    'ios.sim.debug': {
      device: 'simulator',
      app: 'ios.debug',
    },
    'ios.sim.release': {
      device: 'simulator',
      app: 'ios.release',
    },
    'android.att.debug': {
      device: 'attached',
      app: 'android.debug',
    },
    'android.att.release': {
      device: 'attached',
      app: 'android.release',
    },
    'android.emu.debug': {
      device: 'emulator',
      app: 'android.debug',
    },
    'android.emu.release': {
      device: 'emulator',
      app: 'android.release',
    },
    'android.emu.test': {
      device: 'test',
      app: 'android.test',
    },
  },

Expected results

I am expecting to build test apk, launch emulator and execute e2e tests with Detox

Actual results

Error after tests start due to missing emulator

Build id (optional)

66b1dd30e6e549d5839e942b

[himesh-cm]

Hey @Bebrevski

The current version of Apple M1 virtualization does not support Android emulators. If your build requires an Android emulator change your workflow to run on Linux

To keep using Linux-based Mac in codemagic.yaml, set instance_type to linux_x2

Although there is some preliminary information about an API in development regarding the nested virtualization feature here but it is still in beta.

[Bebrevski]

Thank you for your response. Yes, just figured it out. I managed to start the emulator, but i face some problems with the tests themself. I guess it has to do with Detox, but I'm not sure yet.

For info, if someone is curios or familiar with the problem

10:02:57.447 detox[12736] B jest --config e2e/jest.config.js
10:03:58.898 detox[12748] i placesScreen.test.ts is assigned to emulator-5554 (emulator)
10:05:58.908 detox[12748] i PlacesScreen: should tap on sign in button and expect to log in successfully
10:05:58.911 detox[12748] i PlacesScreen: should tap on sign in button and expect to log in successfully [FAIL]
...More tests with the same result

10:05:59.101 detox[12748] i The app has not responded to the network requests below:
  (id = 1) currentStatus: {}
  (id = -1000) isReady: {}

Unresponded network requests might result in timeout errors in Detox tests.

10:06:04.106 detox[12748] i The pending request #-49642 ("cleanup") has been rejected due to the following error:

The tester has not received a response within 5000ms timeout to the message:

Cleanup {
  type: 'cleanup',
  params: [Object],
  messageId: -49642
}
10:06:04.112 detox[12748] i An error occurred while waiting for the app to become ready. Waiting for disconnection...
  error: Failed to run application on the device
  
  HINT: Most likely, your tests have timed out and called detox.cleanup() while it was waiting for "ready" message (over WebSocket) from the instrumentation process.
FAIL e2e/placesScreen.test.ts (180.197 s)
  PlacesScreen
    ✕ should tap on sign in button and expect to log in successfully (4 ms)

  ● PlacesScreen › should tap on sign in button and expect to log in successfully

    thrown: "Exceeded timeout of 120000 ms for a hook.
    Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

      2 |
      3 | describe('PlacesScreen', () => {
    > 4 |   beforeAll(async () => {
        |   ^
      5 |     await device.launchApp({
      6 |       newInstance: true,
      7 |       launchArgs: {reduceMotion: 'false'},

      at e2e/placesScreen.test.ts:4:3
      at Object.<anonymous> (e2e/placesScreen.test.ts:3:1)

[himesh-cm]

Hey @Bebrevski
Looks like a similar issue, can you please check this thread - wix/Detox#4510 (comment)

[himesh-cm]

I'm tentatively closing the discussion since we haven't heard back from you. You can open the discussion again by replying to this message or opening a new discussion.