Detox for E2E testing in React Native

Introduction

Detox helps you check if your app works well from the user's point of view. It runs tests that tap buttons, type text, and check screens automatically.

You want to make sure your app's buttons and screens work correctly after changes.

You want to catch bugs that happen only when using the app like a real user.

You want to test your app on real devices or simulators automatically.

You want to save time by running tests instead of tapping through the app manually.

Syntax

React Native

describe('Example test', () => {
  beforeAll(async () => {
    await device.launchApp();
  });

  it('should show welcome screen', async () => {
    await expect(element(by.id('welcome'))).toBeVisible();
  });
});

describe groups tests.

beforeAll runs setup before tests.

it defines a test case.

device.launchApp() starts the app.

element(by.id('id')) finds UI elements by their test ID.

expect(...).toBeVisible() checks if element is visible.

Examples

Launch the app and tap a button with test ID 'loginButton'.

React Native

await device.launchApp();
await element(by.id('loginButton')).tap();

Check if text 'Hello' is visible on screen.

React Native

await expect(element(by.text('Hello'))).toBeVisible();

Type 'user123' into input field with test ID 'usernameInput'.

React Native

await element(by.id('usernameInput')).typeText('user123');

Sample App

This test opens the app, checks if the welcome message is visible, then taps the start button and checks if the home screen appears.

React Native

describe('Welcome screen test', () => {
  beforeAll(async () => {
    await device.launchApp();
  });

  it('shows welcome message', async () => {
    await expect(element(by.id('welcomeMessage'))).toBeVisible();
  });

  it('allows tapping start button', async () => {
    await element(by.id('startButton')).tap();
    await expect(element(by.id('homeScreen'))).toBeVisible();
  });
});

Important Notes

Make sure your app's UI elements have testID props for Detox to find them.

Run Detox tests on simulators or real devices for best results.

Detox tests run asynchronously, so use await to wait for actions to finish.

Summary

Detox automates user actions to test your app end-to-end.

Use describe, it, and expect to write tests.

Test IDs in your app help Detox find UI elements easily.