Expo + Detox + CircleCI

Question

For the last two days I’ve been looking for a good setup to use Expo + Detox + CircleCI so that the app can build during the CI process.

Locally, I can get Expo + Detox to work by downloading Exponent.app and placing in bin and running expo start (in a different terminal). However, expo start is blocking in Circle CI so is there an efficient way to achieve this.

I have looked at lots of examples and not found a single clear response with updated examples which is a shame considering how popular Expo is getting.

If anyone has an example CircleCI file that you could share that would be really great! Or indeed some help explaining what the flow might be to achieve this.

I appreciate that this is also a question for Detox and CircleCI too but I thought I would add it here as many might also want to know the answer?

My current Circle-CI code that I have been going backwards and forwards with trying to find a solution that works...

# Javascript Node CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-javascript/ for more details
#
version: 2

defaults: &defaults
  working_directory: ~/iynk-react-app

jobs:

  test:
    <<: *defaults

    docker:
      - image: circleci/node:10

    steps:
      - checkout

      - run:
          name: Update npm
          command: 'sudo npm install -g npm@latest'

      - run:
          name: Install Firebase Tools
          command: sudo npm install -g firebase-tools@latest

      - restore_cache:
          name: Restore Yarn Package Cache
          keys:
            - yarn-packages-{{ checksum "yarn.lock" }}

      - run:
          name: Install Dependencies
          command: yarn install --frozen-lockfile

      - save_cache:
          name: Save Yarn Package Cache
          key: yarn-packages-{{ checksum "yarn.lock" }}
          paths:
            - ~/.cache/yarn

      - run: yarn test

      - run:
          name: Install modules in functions
          command: yarn --cwd ./functions --ignore-engines

  e2e:
    <<: *defaults

    macos:
      xcode: "10.2.1"

    steps:
      - run:
          # Note: the [ character is necessary to uniquely identify the iPhone 8 simulator, as the phone + watch simulator is also present in the build image: 
          # Will show what looks like an error - Instruments Usage Error: Unknown device specified: "iPhone 8 (12.2) [") - but it launch
          name: Pre-start simulator first to ensure that it is open
          command: xcrun instruments -w "iPhone 8 (12.2) [" || true

      - checkout

      - restore_cache:
            key: yarn-v1-{{ checksum "yarn.lock" }}-{{ arch }}

      - restore_cache:
          key: node-v1-{{ checksum "package.json" }}-{{ arch }}

      - run: yarn install --ignore-engines

      - save_cache:
          key: yarn-v1-{{ checksum "yarn.lock" }}-{{ arch }}
          paths:
            - ~/.cache/yarn

      - save_cache:
          key: node-v1-{{ checksum "package.json" }}-{{ arch }}
          paths:
            - node_modules

      - run:
          name: Install applesimutils
          command: |
            brew tap wix/brew
            brew install applesimutils

      - run:
          name: Install react-native, detox CLI and expo CLI
          command: |
            npm install -g react-native-cli
            npm install -g detox-cli
            npm install -g expo-cli

      - run:
          name: Prepare detox environment
          command: |
            detox clean-framework-cache && 
            detox build-framework-cache

      - run: 
          name: Download Exponent.app into bin
          command: |
            brew install wget
            ./scripts/setup.sh

      # - run:
      #     name: Install the downloaded version of the expo iOS app on the Simulator
      #     command: |
      #       xcrun simctl install booted ./bin/Exponent.app

      # - run:
      #     name: Login into Expo and publish to staging
      #     command: |
      #       npx expo login -u $EXPO_USERNAME -p $EXPO_PASSWORD
      #       npx expo publish --non-interactive --max-workers 1 --release-channel staging

      - run: 
          name: Run expo locally using (&) Run detox tests
          # shell: /bin/sh
          command: |
            yarn test:e2e & 
            expo start -c    

workflows:
  version: 2

  build_and_test:
    jobs:
      - test
      - e2e

My packages:

"detox": "12.3.0",
"detox-expo-helpers": "^0.6.0",
"expo-detox-hook": "^1.0.10",

Local Works

My local setup runs and the tests pass. This is the process at the moment:

Ensure local environment is setup:

brew update
brew tap wix/brew
brew install --HEAD applesimutils
npm install -g detox-cli

Run the setup script:

./setup.sh

Then start expo.

expo start -c

Launch the simulator that you plan to use for your test (so if you picked an iPhone X, launch the iPhone X etc). You do not need to run i from expo though, just open the Simulator program.

open -a Simulator.app

Finally, run the detox tests from a different terminal with:

yarn test:e2e

Known issues

• Detox + Expo + jest : timeout on opening the app https://github.com/wix/Detox/issues/1422

I do not think this is related as I can get my setup to run locally...

UPDATE 2 July 2019

I can get the tests to pass if I build in my circle ci with:

      - run:
          name: Login into Expo and publish to staging (could update with $CIRCLE_BRANCH)
          command: |
            npx expo login -u $EXPO_USERNAME -p $EXPO_PASSWORD --non-interactive
            npx expo publish --non-interactive --max-workers 1 --release-channel testing

And then in the e2e/init.js file load from that release channel:

beforeAll(async () => {
  await detox.init(config);

  // Run from the remote build if in CI
  if (__CI__) {
    const url = 'exp://exp.host/@alexpchin/iynk?release-channel=testing';
    await device.relaunchApp({ url, sourceApp: 'host.exp.exponent' });
    await expect(element(by.label('Got it'))).toBeVisible();
    await element(by.label('Got it')).tap();
  }
});

However, if I use this I must NOT use reloadApp from detox-expo-helpers (in e2e/init.js):

beforeEach(async () => {
  await adapter.beforeEach();
  // If not CI, use `reloadApp` from `detox-expo-helpers`
  if (!__CI__) {
    await reloadApp();
  }
});

This is obviously really slow because you have to create a new build every time you want to test the UI rather than running from the branch code...

Answer 1

Still no answers or updates, so I'll try to provide mine. From what I understand the flow that you'd want to automate is the test on Simulator. Steps are listed in the attached link.

i.e. for iOS

expo build:ios -t simulator
expo build:status (or expo url:ipa)
tar -xvzf your-app.tar.gz
open /Applications/Xcode.app/Contents/Developer/Applications/Simulator.app --args -CurrentDeviceUDID `xcrun instruments -s | grep "iPhone 7 (12.2)" -m1 | cut -d "[" -f2 | cut -d "]" -f1`
xcrun simctl install booted <app path>
xcrun simctl launch booted <app identifier>