End to End Detox Testing Tutorial

Struggling with flaky React Native tests on real devices? Automated Detox tests may run fine on simulators, but delays, animation, and background processes much do them irregular on actual hardware.

Detox solves this by syncing exam execution with the app ’ s real state. It waits for internal tasks to complete before proceeding to the next step, insure every action mirror what a real user would live. This attack reduces flakiness and improves reliability across devices.

This article explains how Detox testing works, how to set it up, and how to make test runs stable across both simulators and existent devices.

What is Detox Testing?

is a testing framework that allows you to test mobile applications by model user interactions and control coating behavior on. Detox provides a robust solution for ensuring applications work as ask across various scenarios, environments, and devices.

With Detox, you can to sham various user scenarios. For example, you can make a trial that mimic a user searching for nearby drive, selecting a destination, and booking a drive. Detox will validate that the available rides are exhibit accurately, the destination is correctly set, and the booking process completes smoothly.

Understanding the Architecture of Detox Framework

Detox Server lead on the device or simulator where your website is being tested. Detox Server understand the internal structure and processes.

• When you want to run a tryout, tell your Detox Client what actions to perform on your website. It then transmit with the Detox Server, which interacts directly with your website & # 8217; s different components and elements.
• They use a WebSocket connexion to communicate between the Detox Client and Detox Server. They & # 8217; re chatting back and forth, exchanging information and ensuring smooth coordination.
• The Detox Server fulfil the dictation received from the Detox Client and reports back the results.

Collaboration between the Detox Client and Detox Server allows you to efficiently and accurately test your site. It makes sure your website functions flawlessly before sharing it with the world.

Setting up Detox for end-to-end testing requires careful synchronising between the app build, device environment, and test moon-curser. Many teams face challenges when scale Detox tests across multiple CI environs or existent device.

BrowserStack ’ s wandering mechanisation expert can help optimize your Detox line, stabilize off-the-wall tests, and validate performance across Android and iOS contour.

Get Expert QA Guidance Today

Schedule a call with BrowserStack QA specialists to discourse your prove challenges, automation strategies, and tool integrations. Gain actionable brainwave tailor-make to your projects and ensure faster, more reliable software delivery.

Features of Detox

Key Features of Detox are:

• Synchronic Testing: Unlike other try frameworks that may be asynchronous, Detox lam exam synchronously, ensuring that each step (such as, tapping a push, loading data) is fully completed before the next measure start.
• Precise Synchronization: Detox automatically waits for animations, web requests, and other asynchronous events to finish before continue with the adjacent action. This prevents flaky tests.
• Device Simulation: You can copy real-world device conditions, such as poor network connectivity or different screen sizes, to ensure your app conduct good under diverse weather.
• Mocking and Stubbing: Detox countenance you to mock API calls, copy different states, and stub responses, helping you insulate your app ’ s functionality from external services.
• Snapshot Testing: Detox likewise supports visual testing where you can take screenshots and equate them to baseline images to detect UI regressions.

Pros and Cons of Detox Testing

Here are the advantages and disadvantage of the Detox testing framework.

Common Testing Types Supported by Detox

Detox supports the next types of testing:

• Functional Testing: Ensuring that the app behaves correctly by testing the exploiter flows, UI elements, and interaction.
• Regression Testing: Verifying that new changes or updates do not break existing functionality.
• Performance Testing: Ensuring the app performs optimally, specially during sailing, datum fetching, and complex UI transitions.
• Real Device Testing: Running tests on real device to catch issues that may not appear on simulators or emulators. Detox can be seamlessly integrate with to run tests on existent devices.
• UI Testing: Testing the visual appearance of your app to detect UI issues like layout shifts, low invigoration, and screen provide problems.

Steps for Setting up a Detox Testing Project

Step 1. Install the necessary prerequisite on your macOS machine. Ensure you have macOS High Sierra 10.13 or above, Xcode 10.1 or above, and Homebrew installed.

Step 2. You & # 8217; ll also need Node 8.3.0 or above and Apple Simulator Utilities.

You can use the next dictation to install them:

• Run brew update & amp; & amp; brew install node to update Homebrew and establish Node.
• Run brew tap wix/brew & amp; & amp; brew install applesimutils to install Apple Simulator Utilities.

Step 3. Install the Detox CLI by running the next command:

• Run npm instal -g detox-cli to instal the Detox CLI globally.

Step 4. Create a new React Native project using the following command:

• Run npx react-native init MyDetoxProject to make a new React Native projection. You can replace & # 8220; MyDetoxProject & # 8221; with the desired name of your project.

Step 5. Install Detox in your project:

• Run npm install detox & # 8211; save-dev to instal Detox as a development dependency in your undertaking.

Step 6. Configure Detox in your undertaking:

• Create a file telephone & # 8220; detox.config.js & # 8221; in the root directory of your project.
• Add the following code to the & # 8220; detox.config.js & # 8221; file:

module.exports = {configurations: {ios: {type: 'ios.simulator ', binaryPath: 'path/to/your/app ', build: 'path/to/your/xcodeproj ', device: {type: 'iPhone 11'}}}}

Replace the & # 8220; path/to/your/app & # 8221; and & # 8220; path/to/your/xcodeproj & # 8221; with the actual paths to your app and Xcode labor files. Also, delimit the desired device case (e.g., & # 8216; iPhone 11 & # 8217;).

Step 7. Write your maiden Detox test:

Create a file called & # 8220; firstTest.spec.js & # 8221; in your projection & # 8217; s & # 8220; e2e & # 8221; directory.

Add the following example test code to & # 8220; firstTest.spec.js & # 8221;:

describe ('Example ', () = & gt; {beforeEach (async() = & gt; {await device.reloadReactNative ();}); it ('should have welcome screen ', async () = & gt; {await expect (element(by.id ('welcome '))) .toBeVisible ();});});

This is just an example tryout. You can customize it based on your specific requirements.

Step 8. Run your Detox examination

To run your Detox test, use the following command:

Run detox test & # 8211; configuration ios to run the Detox examination on the iOS simulator.

Detox End-to-End Testing Tutorial

Write your inaugural Detox test: You can write your first Detox test in a file called firstTest.spec.js in the e2e directory of your project.

Here & # 8217; s ane2e Detox examination example:

describe ('Example ', () = & gt; {beforeEach (async () = & gt; {await device.reloadReactNative ();}); it ('should have welcome screen ', async () = & gt; {await wait (element (by.id ('welcome '))) .toBeVisible ();});});

Integrate Detox into your development workflow: You can integrate Detox into your development workflow by contribute Detox commands to your package.json file.

Here & # 8217; s an example:

`` handwriting '': {`` test: e2e '': `` detox test -- contour ios '', `` test: e2e: build '': `` detox build -- configuration ios ''}

Sample Detox test

Here & # 8217; s an example of aDetoxtryout that interacts with a login screen:

describe ('Login Screen ', () = & gt; {beforeEach (async () = & gt; {look device.reloadReactNative ();}); it ('should show error substance on invalid login ', async () = & gt; {await element (by.id ('username ')) .typeText ('invalid_username '); await element (by.id ('password ')) .typeText ('invalid_password '); await element (by.id ('loginButton ')) .tap (); expect expect (element (by.id ('errorMessage '))) .toBeVisible ();}); it ('should navigate to home screen on valid login ', async () = & gt; {await element (by.id ('username ')) .typeText ('valid_username '); await constituent (by.id ('password ')) .typeText ('valid_password '); await element (by.id ('loginButton ')) .tap (); await expect (element (by.id ('homeScreen '))) .toBeVisible ();});});

This test checks if the login screen shows an error message on invalid login and navigates to the home screen on valid login.

Advanced Use Cases of React Native Detox

Once you set up Detox, you ’ d want to use it to test applications. Here are a few innovative suit of React Native Detox.

1. Testing App Initialization Under Various Conditions with Detox

Detox countenance you to test app initialization under diverse weather to ensure stableness across different scenarios. Below are key use cases with implementation examples.

• App Launch with Default Configuration

Scenario: Ensure the app initialise aright with its default settings.

Implementation:

it ('should launch the app with default settings ', async () = & gt; {await device.launchApp ({newInstance: true}); await expect (element (by.id ('homeScreen '))) .toBeVisible ();});

• App Launch with Specific Launch Arguments

Scenario: Test how the app behaves when launched with specific argument (e.g., feature flags, debug modes).

Implementation:

it ('should launch the app with a mock waiter enabled ', async () = & gt; {await device.launchApp ({newInstance: true, launchArgs: {mockServer: true}}); expect expect (element (by.id ('mockDataScreen '))) .toBeVisible ();});

• Testing Under Network Conditions

Scenario:Simulate app initialization under different net scenario.

Implementation: During testing, use a network model tool (e.g., Charles Proxy) or mock network responses. Pass meshwork precondition flags utilise launchArgs.

it ('should handle initialisation in offline style ', async () = & gt; {await device.launchApp ({newInstance: true, launchArgs: {offlineMode: true}}); await await (element (by.id ('offlineMessage '))) .toBeVisible ();});

• First-Time User Experience

Scenario: Test the onboarding flowing for first-time users.

Implementation:

it ('should expose onboarding for first-time users ', async () = & gt; {await device.launchApp ({newInstance: true, launchArgs: {isFirstLaunch: true}}); await expect (element (by.id ('onboardingScreen '))) .toBeVisible ();});

2. Validate Deep Linking Functionality

Deep linking allows exploiter to open specific app screen via external linkup.

Scenario: Test deep links to ensure the app handles them correctly.

Implementation: Use Detox ’ s device.launchApp () with the URL parameter to simulate deep links.

await device.launchApp ({url: 'myapp: //details? id=123 '}); await expect (element (by.id ('detailsScreen '))) .toBeVisible ();

3. Testing Notifications and Push Interactions

Push notice are crucial to engaging users, but how do you know they work right? Detox enables testing how the app behaves when receive and deal notifications.

Scenario: Test app behavior when receiving push notifications.

Implementation: Use Detox ’ s device.sendUserNotification () to simulate push notifications.

await device.sendUserNotification ({trigger: {character: 'push '}, payload: {aps: {alert: {title: 'New Message ', body: 'You have received a new message! ',},},},});

4. Testing Multi-Device and Screen Orientation

Apps must handle multi-device surroundings and adapt to screen orientation changes. Detox helps validate these interactions.

Scenario: Test scenario involving multiple device (e.g., real-time chat or peer-to-peer).

Implementation:

• Launch the app on multiple devices using different configurations
• Use detox.config.js to define multiple device and handle interactions between them

5. Keyboard and Input Field Testing

Testing interactions with input fields and the keyboard is a mutual and critical use lawsuit in mobile applications. Detox furnish robust methods for simulating user interactions with input field and handle the practical keyboard.

Scenario: Typing and Verifying Input

Implementation:

it ('should typecast and control text in the input field ', async () = & gt; {await element (by.id ('usernameInput ')) .typeText ('testUser '); await expect (element (by.id ('usernameInput '))) .toHaveText ('testUser ');});

6. Authentication Flows

Authentication flows often involve multiple steps, such as login pattern, (MFA), and error treatment. Detox is well-suited to test these scenario by simulating user interactions and verifying app province.

Scenario: Verifying login with valid credentials.

Implementation:

it ('should log in with valid credentials ', async () = & gt; {await element (by.id ('emailInput ')) .typeText ('user @ example.com '); await element (by.id ('passwordInput ')) .typeText ('password123 '); await element (by.id ('loginButton ')) .tap (); await expect (element (by.id ('homeScreen '))) .toBeVisible ();});

7. Simulating Network and API Failure Scenarios

When examine a React Native application, it ’ s all-important to verify how the app behaves under different web conditions, include failures, timeouts, and slow responses.

Detox permit you to simulate these scenarios using network mocking, interceptors, and custom manager.

Method to simulate API Failures in Detox & # 8211;

Using a mock server:

A mock server like json-server, WireMock, or MirageJS helps intercept API requests and return controlled reaction.

1. Setup a mock API waiter

• Install json waiter

npm install -g json-server

• Create a mockData.json file

{`` users '': [{`` id '': 1, `` name '': `` John Doe ''}]}

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

• Start the mock server

json-server -- ticker mockData.json -- porthole 3000

Modify Detox tests to use the Mock API:

Modify the beforeEach hook in Detox to inject a failure scenario.

beforeEach (async () = & gt; {await device.launchApp ({newInstance: true, launchArgs: {MOCK_API_URL: `` http: //localhost:3000 ''}});});

Simulate Failure Responses:

Modify the mockData.json file to feign different failures:

• Network Failures

{'' error '': `` Network request failed ''}

• 500 Internal Server Error

{'' position '': 500, '' message '': `` Server is down ''}

Writing Detox Tests for API Failures:

Example:Verify Network Error Handling

it (`` should exhibit an mistake substance when the API fails '', async () = & gt; {await device.launchApp ({newInstance: true, launchArgs: {SIMULATE_FAILURE: true}}); await element (by.id (`` fetchDataButton '')) .tap (); // Expect error message to be display await expect (element (by.text (`` Network request failed ''))) .toBeVisible ();});

Detox Cheatsheet

This cheat sheet covers the all-important command and concept for using Detox in React Native examination.

1. SetUp Commands

Setting up Detox requires initializing it in your task, building the app, and scarper tests. Below are the key bidding for each footstep.

• Initialize Detox in a task

Use the below require to initialize detox in your projection & # 8211;

detox init -r jest

-r jest: Use jest as the tryout runner

• Build the App

Commands for building your app & # 8211;

detox build -- contour ios detox build -- conformation android

• Run the exam

The bidding for running your detox trial & # 8211;

detox trial -- constellation ios detox test -- configuration android

• Debug mode

Command to debug your tests & # 8211;

detox test -- debug-synchronization 200

This helps identify async issues with a timeout of 200 ms.

• Rerun a specific test

Command for re-running a tryout & # 8211;

detox test -f `` test gens ''

2. Element Selectors

Detox provides multiple ways to select UI constituent. Below are the different selector methods.

• By ID

Search an element by ID & # 8211;

ingredient (by.id ('elementID '));

• By Text

Search an factor by text & # 8211;

element (by.text ('Submit '));

• By Label (iOS exclusively)

Search an element by label & # 8211;

element (by.label ('LabelName '));

• By Type

Search an element by type & # 8211;

ingredient (by.type ('RCTTextField ')); // React Native text input

3. Element Actions

Detox allows performing various actions on UI elements, such as tapping, typewriting, and scrolling.

• Tap an constituent

Command to do tap operation on an constituent & # 8211;

await factor (by.id ('submitButton ')) .tap ();

• Long Press

Command to hanker pressure on an element & # 8211;

await ingredient (by.id ('elementID ')) .longPress ();

• Type Text

Command to send values to an element & # 8211;

await element (by.id ('inputField ')) .typeText ('Hello ');

• Clear Text

Command to brighten live textbook & # 8211;

await element (by.id ('inputField ')) .clearText ();

• Replace Text

Command to replace an live textbook with new textbook & # 8211;

• Scroll

Command to scroll window & # 8211;

await component (by.id ('scrollView ')) .scroll (100, 'down ');

4. Assertions

Assertions help control the expected behavior of UI factor in Detox tests. Here ’ s how to use it.

• Check Visibility

Command to validate the visibility of an component & # 8211;

await expect (element (by.id ('elementID '))) .toBeVisible ();

• Check Text

Command to validate a schoolbook & # 8211;

await expect (element (by.id ('inputField '))) .toHaveText ('Hello ');

• Check Enabled/Disabled

Command to control whether an component is enable or disabled & # 8211;

await require (element (by.id ('submitButton '))) .toBeEnabled (); await anticipate (element (by.id ('submitButton '))) .toBeDisabled ();

5. Wait Commands

Detox provides bidding to wait for elements or text to look within a afford timeframe. Here ’ s how to use it.

• Wait for an Element

Command to look for an element for a specified time & # 8211;

await waitFor (element (by.id ('submitButton '))) .toBeVisible () .withTimeout (5000);

• Wait for Text

Command to wait for a text for a specified time & # 8211;

await waitFor (ingredient (by.text ('Success '))) .toBeVisible () .whileElement (by.id ('scrollView ')) .scroll (50, 'down ');

6. Keyboard Actions

Detox enable simulating interactions with the keyboard, such as typing, pressing the homecoming key, and dismissing the keyboard.

• Type Text

Command to send values to an element using keyboard keys & # 8211;

await element (by.id ('inputField ')) .typeText ('Detox is great ');

• Tap Return Key

The tapReturnKey () command is used to simulate pressing the Enter key on the keyboard & # 8211;

await constituent (by.id ('inputField ')) .tapReturnKey ();

• Dismiss keyboard

This command is generally used after typing text into an input battlefield to hide the keyboard before proceeding with other UI interactions.

await device.dismissKeyboard ();

7. Hooks

Hooks allow you to accomplish setup and teardown logic before or after each test.

• beforeEach

Executed before each test. Used for project like relaunching the app, reset states, or initializing specific conformation.

beforeEach (async () = & gt; {await device.reloadReactNative (); // Reloads the app to secure a clean state});

• afterEach

Executed after each test. Used for cleaning up test-specific configurations, logging, or capturing screenshots for failed tests.

afterEach (async () = & gt; {// Example: Take a screenshot after each test const testName = expect.getState () .currentTestName; await device.takeScreenshot (` after- $ {testName} `);});

• beforeAll

Executed erst before all tests. Typically used to initialize Detox and set up the exam environment.

beforeAll (async () = & gt; {await detox.init ();});

• afterAll

Executed once after all tests. Used for cleanup, such as shutting down Detox.

afterAll (async () = & gt; {await detox.cleanup ();});

Common erroneousness in end-to-end testing with Detox

Developers and QA testers often face these errors while running E2E examine with Detox.

1. Build Errors

Error: Build Failed

Sometimes, the build might fail due to incorrect paths or lose addiction in the Detox configuration. To resolve this, ensure that binaryPath and build commands in detox.config.json are correct.

For iOS:

xcodebuild -workspace ios/MyApp.xcworkspace -scheme MyApp -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build

For Android:

detox bod -- contour android.emu.debug

2. Runtime Errors

Error: App has not responded to network asking

This error is caused when detox waits for all web call to finish, but the app is lodge or has long-running undertaking. In this case, use the “ waitFor bidding ” to synchronize tryout.

Error: Element Not Found

This error is caused when detox is unable to locate an element due to incorrect testID or the constituent not rendered. In this suit, control that an element exists in the component with a testID or add a delay if the element takes long time to interpret.

await waitFor (element (by.id ('myElement '))) .toBeVisible () .withTimeout (5000);

Error: can not do an action because the element is not visible

This error might come when the ingredient is outside the viewport or rendered. To avoid this issue, try to await for the element to render or scroll to the element to ensure it is on screen.

await ingredient (by.id ('scrollView ')) .scrollTo ('bottom ');

3. Flaky Tests

Error: Test Failed Randomly

Flaky tests occur due to race conditions or asynchronous operations. To avoid this, use waitFor to ensure the element are interactable before perform actions.

await waitFor (element (by.id ('button '))) .toBeVisible () .withTimeout (5000);

4. Detox Synchronization issues

Error: Detox can not synchronize with the app

This error occurs when detox can not observe app idleness due to custom async operations or heavy background tasks. In this case, one can wrap the problematic areas with device.disableSynchronization () and device.enableSynchronization ():

await device.disableSynchronization (); await someLongTask (); look device.enableSynchronization ();

Running Detox Tests on a Real Device Cloud

Running Detox tests on existent device using BrowserStack involves incorporate your Detox setup with BrowserStack ’ s App Automate platform. This allows you to examine your React Native app on various real device hosted on BrowserStack.

Here are the steps to integrate Detox with BrowserStack:

1. Prerequisites

• A BrowserStack account
• Detox instal and configured in your project
• Your app build is ready for testing

2. Setup Browserstack Credentials

• Log in to your BrowserStack chronicle.
• Navigate to App Automate.
• Copy your Username and Access Key from the dashboard.
• Set these as environment variables:

export BROWSERSTACK_USERNAME= '' your_username '' export BROWSERSTACK_ACCESS_KEY= '' your_access_key ''

3. Build the App

Prepare your app build for testing on BrowserStack.

For iOS:

detox frame -- configuration ios.sim.debug

For Android:

detox physique -- constellation android.emu.debug

4. Upload the App to BrowserStack

Upload the app binary (APK or IPA file) to BrowserStack using their API or CLI:

roll -u `` BROWSERSTACK_USERNAME: BROWSERSTACK_ACCESS_KEY '' \ -X POST `` https: //api-cloud.browserstack.com/app-automate/upload '' \ -F `` file= @ path/to/your/app.apk ''

This returns an app_url that you ’ ll use in your test configuration.

5. Modify Detox Configuration

Update detox.config.json to include the BrowserStack device configuration.

For example:

{'' testRunner '': `` jest '', '' runnerConfig '': `` e2e/config.json '', '' apps '': {'' ios.debug '': {'' type '': `` ios.app '', '' binaryPath '': `` ios/build/Build/Products/Debug-iphonesimulator/MyApp.app ''}, '' android.debug '': {'' type '': `` android.apk '', '' binaryPath '': `` android/app/build/outputs/apk/debug/app-debug.apk ''}}, '' devices '': {'' ios.real '': {'' type '': `` ios.real.device '', '' device '': {'' name '': `` iPhone 14 '', '' os '': `` 16 ''}, '' server '': `` ws: //localhost:8099 ''}, '' android.real '': {'' type '': `` android.real.device '', '' twist '': {'' name '': `` Samsung Galaxy S22 '', '' os '': `` 13 ''}, '' server '': `` ws: //localhost:8099 ''}}, '' configurations '': {'' ios '': {'' device '': `` ios.real '', '' app '': `` ios.debug ''}, '' android '': {'' device '': `` android.real '', '' app '': `` android.debug ''}}}

Replace the name and OS in the device object with a BrowserStack-supported device.

6. Update Jest Test Runner Configuration

Configures Jest to work with Detox for scat end-to-end tests in your React Native application.

const detox = require ('detox '); const config = require (' .. /package.json ') .detox; beforeAll (async () = & gt; {await detox.init (config, {launchApp: mistaken});}); beforeEach (async () = & gt; {await device.launchApp ({newInstance: true});}); afterAll (async () = & gt; {await detox.cleanup ();});

7. Run Tests on BrowserStack

Execute the tests using the Detox CLI with the BrowserStack contour.

For iOS:

detox examination -- constellation ios -- record-logs all -- record-videos all

For Android:

detox test & # 8211; shape android & # 8211; record-logs all & # 8211; record-videos all

8. Debugging and Logs

BrowserStack automatically catch log, screenshots, and videos of test runs. Navigate to App Automate Dashboard in BrowserStack to view detailed reports and device logarithm.

Talk to an Expert

Conclusion

Detox is an end-to-end examination fabric for React Native applications. It let developers to perform, catch bugs early, streamline examination workflows, and maintain app stability across different environments.

While Detox excels at end-to-end essay for React Native apps, it is limited by the bit of device it supports and local setup requirements. Integrating it with BrowserStack expands testing capabilities by providing accession to a wide range of. Its features, like, debug tools, and CI/CD integrating, help you test your app more exhaustively in.

Related Guides