Setup Github Workflow to run e2e in an Expo project using Detox

Sources:

For this tutorial we'll create an Expo project using the typescript template.

To setup this project we will use a Mac Machine.

Dependencies

xcode-select --install
npm install -g detox-cli
brew tap wix/brew
brew install applesimutils

Create the project

You can create an expo project with:

expo init DetoxDemo
# choose the blank (TypeScript) option

Setup Detox

Install dependencies

yarn add @config-plugins/detox
yarn add -D @types/jest detox jest jest-circus ts-jest
expo install @expo/xcpretty

Move the @expo/xcpretty and @config-plugins/detox dependencies into the devDependencies in your package.json.

Add @config-plugins/detox into the plugins section in your app.json file.

"plugins": ["@config-plugins/detox"]

Setup

Usually you can run detox init -r jest to create the config files, but for this demo we won't be using those file.

Instead copy the following folder and files into your project.

e2e
--- __tests__
--- lib
--- environment.js
--- jest.config.js
scripts
detox.config.js

Generate the native code for your project

Run expo prebuild to generate the ios and android folders. When asked set the Android package name and the iOS bundle identifier. You will have to do this step everytime you add a new dependency to your project.

Note. CocoaPods can fail in Apple Silicon machines, so you need to tell it to run using x86_64.

export LANG=en_US.UTF-8
arch -x86_64 expo prebuild

Update your package.json

Add the following to your scripts section:

"start": "expo start --dev-client",
"start:go": "expo start",
"build:ios": "detox build -c ios.sim.debug",
"test:ios": "detox test -c ios.sim.debug",
"e2e:ios": "npm run build:ios && npm run test:ios",
"build:ios-release": "detox build -c ios.sim.release",
"test:ios-release": "detox test -c ios.sim.release",
"e2e:ios-release": "npm run build:ios-release && npm run test:ios-release",
"build:android": "detox build -c android.emu.debug",
"test:android": "detox test -c android.emu.debug",
"e2e:android": "npm run build:android && npm run test:android",
"build:android-release": "detox build -c android.emu.release",
"test:android-release": "detox test -c android.emu.release",
"e2e:android-release": "npm run build:android-release && npm run test:android-release"

You can still work in your project using ExpoGo by running

yarn start:go

Run the scripts locally

Now you should be able to run the following to run the tests locally.

yarn e2e:ios

See the resulting screenshots of your tests

In your tests you can add the line await captureAsync(); to save a screenshot into the meta/screenshots folder whenever you want.
In the detox.config.js we configured screenshots to be saved whenever the tests fail keepOnlyFailedTestsArtifacts.

You can add these two folder to your .gitignore file:

meta/screenshots
.artifacts