Detox for E2E testing in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What does this Detox test check?

Given this Detox test code, what UI behavior is being verified?

React Native

describe('Login screen', () => {
  beforeEach(async () => {
    await device.reloadReactNative();
  });

  it('should show error on empty login', async () => {
    await element(by.id('loginButton')).tap();
    await expect(element(by.text('Please enter username'))).toBeVisible();
  });
});

A Checks that app crashes on empty login

B Checks that login button is disabled initially

C Checks that username input accepts text

D Checks that tapping login without username shows an error message

💡 Hint

Look at what element is tapped and what text is expected to be visible.

The test taps the login button without entering username and expects an error message 'Please enter username' to appear.

❓ lifecycle

intermediate

What does device.reloadReactNative() do in Detox?

In Detox tests, what is the purpose of calling device.reloadReactNative() before each test?

A It restarts the React Native app to a fresh state before each test

B It reloads only the JavaScript bundle without restarting the app

C It clears the app cache but keeps the current screen

D It resets the device to factory settings

💡 Hint

Think about why tests need a clean start.

device.reloadReactNative() reloads the React Native app to a fresh state before each test, ensuring no leftover state affects the next test.

📝 Syntax

advanced

Identify the syntax error in this Detox test snippet

What is the syntax error in this Detox test code?

React Native

it('should login successfully', async () => {
  await element(by.id('usernameInput')).typeText('user');
  await element(by.id('passwordInput')).typeText('pass');
  element(by.id('loginButton')).tap()
  await expect(element(by.id('welcomeMessage'))).toBeVisible();
});

A Missing await before element(by.id('loginButton')).tap()

B Missing semicolon after tap() call

C Missing comma between arguments in typeText()

D Missing closing parenthesis in expect()

💡 Hint

Check async calls and awaits carefully.

The tap() call is asynchronous and must be awaited to ensure proper test flow.

🔧 Debug

advanced

Why does this Detox test fail with timeout?

This Detox test fails with a timeout error on the last expect statement. Why?

React Native

it('shows welcome after login', async () => {
  await element(by.id('usernameInput')).typeText('user');
  await element(by.id('passwordInput')).typeText('pass');
  await element(by.id('loginButton')).tap();
  await expect(element(by.id('welcomeMessage'))).toBeVisible();
});

A The tap() call is missing await causing race condition

B The test is missing a waitFor() to wait for welcomeMessage to appear

C The welcomeMessage element is not visible because login failed silently

D The usernameInput and passwordInput IDs are incorrect

💡 Hint

Consider what happens if login does not succeed.

If login fails silently, the welcomeMessage never appears, causing the expect to timeout waiting for it.

🧠 Conceptual

expert

Why use Detox for React Native E2E testing instead of Jest alone?

Which reason best explains why Detox is preferred for end-to-end testing in React Native apps over Jest unit tests?

A Detox is faster than Jest for running unit tests

B Detox runs tests on real devices or emulators simulating user interactions, while Jest tests only logic in isolation

C Jest cannot run any tests on React Native apps

D Detox automatically fixes UI bugs during tests

💡 Hint

Think about what E2E testing means compared to unit testing.

Detox tests the full app on devices or emulators, simulating real user actions, unlike Jest which tests code logic only.