Detox for E2E testing in React Native - Mini App: Build & Ship

Build: Simple Counter

A screen with a counter that increments when a button is tapped. This app will be used to demonstrate Detox end-to-end testing.

Target UI

-------------------
| Simple Counter   |
|-----------------|
| Count: 0        |
|                 |
| [ Increment ]   |
-------------------

Display a count starting at 0

Show a button labeled 'Increment'

When the button is tapped, increase the count by 1

The count text updates immediately

Starter Code

React Native

import React, { useState } from 'react';
import { SafeAreaView, Text, Button, StyleSheet } from 'react-native';

export default function SimpleCounter() {
  const [count, setCount] = useState(0);

  // TODO: Implement increment function and UI

  return (
    <SafeAreaView style={styles.container}>
      {/* TODO: Display count and increment button here */}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Task 1

Task 2

Solution

React Native

import React, { useState } from 'react';
import { SafeAreaView, Text, Button, StyleSheet } from 'react-native';

export default function SimpleCounter() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);

  return (
    <SafeAreaView style={styles.container}>
      <Text accessibilityLabel="countText" style={styles.countText}>Count: {count}</Text>
      <Button
        title="Increment"
        onPress={increment}
        accessibilityLabel="incrementButton"
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  countText: {
    fontSize: 24,
    marginBottom: 20,
  },
});

This simple React Native app uses a useState hook to keep track of the count. The increment function updates the count state by adding 1 each time the button is pressed. The Text component shows the current count, and the Button triggers the increment. Accessibility labels are added to help Detox identify UI elements during testing.

Final Result

Completed Screen

-------------------
| Simple Counter   |
|-----------------|
| Count: 0        |
|                 |
| [ Increment ]   |
-------------------

When the user taps the 'Increment' button, the count number increases by 1 immediately.

The count text updates to show the new number.

Stretch Goal

Write a Detox test that launches the app, taps the 'Increment' button, and verifies the count text updates to 'Count: 1'.

💡 Hint

Use Detox's 'element(by.label())' to find the button and text, then use 'tap()' and 'expect().toHaveText()' to test.

Practice

1. What is the main purpose of Detox in React Native app development?

easy

A. To build the app's backend API

B. To style the app components

C. To automate user actions and test the app end-to-end

D. To manage app state

Solution

1. Step 1: Understand Detox's role

   Detox is a testing tool that automates user interactions to check if the app works correctly from start to finish.

2. Step 2: Compare options

   Options A, B, and C relate to backend, styling, and state management, which are not Detox's purpose.

3. Final Answer:

   To automate user actions and test the app end-to-end -> Option C

4. Quick Check:

   Detox purpose = automate user actions [OK]

Hint: Detox tests the whole app flow by simulating user actions [OK]

Common Mistakes:

• Confusing Detox with styling or state tools
• Thinking Detox builds backend APIs
• Assuming Detox only tests small parts

2. Which Detox function is used to group related tests together?

easy

A. describe()

B. it()

C. expect()

D. beforeEach()

Solution

1. Step 1: Identify grouping function

   The describe() function groups related tests into a suite for better organization.

2. Step 2: Understand other functions

   it() defines individual tests, expect() makes assertions, and beforeEach() runs setup code before tests.

3. Final Answer:

   describe() -> Option A

4. Quick Check:

   Group tests = describe() [OK]

Hint: Use describe() to group tests, it() for each test [OK]

Common Mistakes:

• Using it() to group tests instead of describe()
• Confusing expect() with grouping
• Thinking beforeEach() groups tests

3. Given this Detox test snippet, what will happen?

await element(by.id('loginButton')).tap();
await expect(element(by.id('welcomeMessage'))).toBeVisible();

medium

A. The test taps the welcome message and checks if login button is visible

B. The test taps the login button and checks if the welcome message is visible

C. The test fails because tap() is called on a non-existent element

D. The test only checks visibility without any tap action

Solution

1. Step 1: Analyze the tap action

   The code taps the element with testID 'loginButton', simulating a user pressing it.

2. Step 2: Analyze the expectation

   It then checks if the element with testID 'welcomeMessage' is visible on screen.

3. Final Answer:

   The test taps the login button and checks if the welcome message is visible -> Option B

4. Quick Check:

   tap loginButton + expect welcomeMessage visible = B [OK]

Hint: Read code line by line: tap first, then check visibility [OK]

Common Mistakes:

• Mixing up which element is tapped
• Assuming tap() fails without checking element existence
• Ignoring the order of actions

4. You wrote this Detox test but it fails with "Cannot find element by id 'submitBtn'" error. What is the likely cause?

await element(by.id('submitBtn')).tap();

medium

A. You forgot to import Detox

B. The tap() function is misspelled

C. Detox does not support by.id selector

D. The app does not have a UI element with testID 'submitBtn'

Solution

1. Step 1: Understand the error message

   The error says Detox cannot find an element with testID 'submitBtn', meaning it does not exist or is not rendered.

2. Step 2: Check other options

   tap() spelling is correct, Detox supports by.id, and import errors cause different failures.

3. Final Answer:

   The app does not have a UI element with testID 'submitBtn' -> Option D

4. Quick Check:

   Element not found = missing testID in app [OK]

Hint: Check if testID matches exactly in app code [OK]

Common Mistakes:

• Assuming tap() is wrong
• Thinking Detox lacks by.id support
• Ignoring testID spelling or missing assignment

5. You want to write a Detox test that waits for a loading spinner to disappear before tapping a button with testID 'continueBtn'. Which code snippet correctly does this?

hard

A. await waitFor(element(by.id('spinner'))).toBeNotVisible().withTimeout(5000);
await element(by.id('continueBtn')).tap();

B. await element(by.id('spinner')).tap();
await element(by.id('continueBtn')).tap();

C. await expect(element(by.id('spinner'))).toBeVisible();
await element(by.id('continueBtn')).tap();

D. await element(by.id('continueBtn')).tap();
await waitFor(element(by.id('spinner'))).toBeNotVisible();

Solution

1. Step 1: Wait for spinner to disappear

   Use waitFor(...).toBeNotVisible() with a timeout to pause until spinner hides.

2. Step 2: Tap the continue button after spinner disappears

   After waiting, tap the button safely knowing the UI is ready.

3. Final Answer:

   await waitFor(element(by.id('spinner'))).toBeNotVisible().withTimeout(5000); await element(by.id('continueBtn')).tap(); -> Option A

4. Quick Check:

   Wait for spinner gone, then tap button = C [OK]

Hint: Wait for element to hide before tapping next [OK]

Common Mistakes:

• Tapping spinner instead of waiting
• Tapping button before spinner disappears
• Checking spinner visible instead of not visible