setup-detox-jest.mo
Owner: Alban Depretz
Prerequisites
Running Detox (on iOS) requires the following:
Mac with macOS (>= macOS El Capitan 10.11)
Xcode 8.3+ with Xcode command line tools
A working React Native app
A Javascript test Runner installed (Jest in our example. Detox also works with Mocha)
Node 7.6.0 or above for native async-await support
Steps
Step 1: Install dependencies (~5mins)
Go to detox getting started documentation for more details.
1. Install appleSimUtils
Collection of utils to communicate with the simulator
2. Install Detox command line tools (detox-cli)
TIP:
detox -h
gives the list of available commands
Step 2: Add Detox to your project (~10mins)
1. Add Detox to your project
2. Add Detox config to package.json
The basic configuration for Detox should be in your package.json
file under the detox
property where you can replace YOURAPP with your app name:
For iOS apps in a workspace (eg: CocoaPods) use -workspace ios/example.xcworkspace
instead of -project
.
Also make sure the simulator model specified under the key "name"
(iPhone 7
above) is actually available on your machine (it was installed by Xcode). Check this by typing xcrun simctl list
in terminal to display all available simulators.
TIP: To test a release version, replace 'Debug' with 'Release' in the binaryPath and build properties.
Step 3: Write your 1st test (~20mins)
1. Configure Detox to run on Jest
Create a folder e2e at the root of your project
Add a jest config file
e2e/config.json
:
In your
package.json
detox config add a reference to your config file:
Create an init file
e2e/init.js
:
2. Write your test
Add a Regexp to your test files in the config file
e2e/config.json
:
NOTE: Here I'm matching all files that end in
.e2e.js
Add a testID to your component.
Custom component: Detox will only find components thanks to their testID if they directly come from react-native. Make sure your custom components transfer the testID prop to a built-in react-native component such as Text, TouchableOpacity, ...
Create your 1st test file
e2e/test.e2e.js
to check that your title exists
Step 4: Run tests (~10mins)
Add to your
package.json
:
Build & Test your app:
Step 5: Add compatibility with eslint (Optional) (~10mins)
1. Add eslint plugin eslint-plugin-detox
Install plugin:
Add plugin to your
.eslintrc
:
Add line at the top of every detox file:
Step 6: Automate the execution of E2E integration tests on Bitrise (Optional) (~30 mins)
Check the bitrise.yml of the Waves repository to automate on Bitrise.
Troubleshooting
If an element of the UI cannot be found even if you gave it a testID.
Detox will only find components thanks to their testID if they directly come from react-native. Make sure your custom components transfer the testID prop to a built-in react-native component such as Text, TouchableOpacity, ...
If an element of the UI cannot be found after a transition.
waitFor & withTimeout (In our example, you wait for two seconds before checking for the title)
If your tests hang you might have synchronisation issues.
Use a waitFor with a temporary (de)synchronisation of your app
NOTE: Sometimes the synchronization engine is stuck on a never ending asynchronous activity. Use --debug-synchronization to debug synchronization issues
Example application
Don't hesitate to refer to Waves : An open source repo I created to test Detox :)
NOTE: You will find the bitrise.yml to automate your E2E tests on a CI
Last updated