WhoBuilt

Real World e2e Testing With Detox

Oct 8, 2019· 31 min· 13K views·Watch on YouTube

Speaker

Vojtech Novak, a React Native community contributor at Memsource, discusses real-world end-to-end testing with Detox at React Native EU 2019.

Detox basics and test coverage

Novak describes Detox as an open-source gray-box testing framework from Wix. In his team’s React Native app, slightly more than 80 end-to-end tests took over 25 minutes to run in CI across two simulators. Tests use React Native `testID` props to find elements, then apply actions and expectations; Detox can wait for network and rendering activity it observes.

Prepare data and keep tests independent

Novak says each test suite should create the users and data it needs automatically, rather than depend on manual server setup. Tests running on parallel feature branches should use unique data or isolated server instances, such as disposable Docker containers. Keeping generated data can help with debugging.

Choose setup and test boundaries

For read-only checks on the same item, Novak recommends considering `beforeAll` so user creation and navigation are not repeated for each assertion. Tests that change or delete shared data may need `beforeEach` instead. He also shows how tests that build on earlier shopping-cart steps become order-dependent; teams can repeat setup in smaller tests or combine a flow into one longer test.

Track failures and debug flakiness

Novak recommends historical reporting to spot unreliable tests and catch missing test runs, such as when a renamed file caused the team to run fewer tests than expected. He suggests using Xcode’s Debug View Hierarchy, Android Studio’s Layout Inspector, and Node’s inspector to investigate failures. Setup code can also be the source of flaky results, so it may need its own tests; Detox logs, synchronization debugging, and video recordings can help diagnose issues.

Make tests easier to run and maintain

A failed test can leave the app in a state that causes later tests to fail too. Novak describes a top-level logout control that lets tests return to a known login screen, and deep links that skip lengthy navigation. He recommends readable conventions for user actions and expectations, notes that Detox cannot control dialogs from other apps or processes, and says end-to-end testing takes time and patience but can catch bugs.

Takeaways

  • Create test users and data automatically so runs do not depend on manual setup.
  • Make tests independent with unique data or isolated server instances, especially when CI runs branches in parallel.
  • Use `beforeAll` for read-only checks that share setup; reset state between tests that modify data.
  • Track test history and investigate setup code as well as test steps when failures are flaky.
  • Give tests reliable ways to reach a known screen, using reset controls or deep links where appropriate.

Mentioned in this talk

Search inside this talk

What was claimed 11

  • works at
    “I work for a company called Memsource”
    YouTube
    Unverified1 source· Talk
  • built
    “Memsource develops one product: a cloud tool for professional translation.”
    YouTube
    Unverified1 source· Talk
  • metric
    Memsource: Processes more than two billion words monthly.
    “Memsource processes more than two billion words monthly”
    YouTube
    Unverified1 source· Talk
  • feature
    Memsource translation tool: Includes a project management tool and an IDE for translators.
    “It includes a project management tool and something I would call an IDE for translators.”
    YouTube
    Unverified1 source· Talk
  • metric
    Detox: More than 25 minutes to run slightly over 80 end-to-end tests in CI on two simulators.
    “slightly over 80 end-to-end tests. They take more than 25 minutes to run in CI, on two simulators”
    YouTube
    Unverified1 source· Talk
  • feature
    Detox: Open source and available under the MIT license on GitHub.
    “It's open source and under the MIT license on GitHub.”
    YouTube
    Unverified1 source· Talk
  • feature
    Detox: Uses testID props to find and interact with app elements.
    “Detox can use the testID prop to interact with elements in your app.”
    YouTube
    Unverified1 source· Talk
  • feature
    Detox: Observes network requests and rendering to synchronize tests.
    “Detox can see that there’s a network request and that rendering is happening”
    YouTube
    Unverified1 source· Talk
Show all 11 facts

Related talks