How to Test your React Native App Like a Real User

You have built a new feature for your react native app.

But just before you launch it, it’s time to run the app on a device to check that everything is working, only to find out later that some old feature has a bug, because nobody has the time to actually go through each feature and test everything manually again and again.

To solve this problem, Wix has decided to build a cross platform tool that enables you to automatically test apps the same way a user would test it.

It’s now open source so you can use it too. Also, it looks really cool:

detox in action

Introducing Detox

Detox is an end to end testing library for your react native app that enables you to emulate user behavior and test how your app reacts to it, automatically.

It also supports multiple device configurations, notifications, permissions and basically everything a user might do with your app.

Want to judge for yourself? Here is a short guide that will help you with getting started:

How to Use Detox with a Basic React Native App

Installation:

Follow this video:

Or the installation steps in the docs.

At the end of this step you should have an e2e folder with a failing test suite.

Getting Started:

Lets take a look at our first test suite and break it down:

• The beforeEach hook tells detox to reload the react native app before every test in our test suite using thedevice.reloadReactNative() function:

• Our first test, should have welcome screen, looks for an element with a welcome id using theelement(by.id(...)) Matcher and checks if it is visible with the expect(….).toBeVisible() Assertion:

To make this test pass add a welcome id to a view on your first screen with the testID property and run detox test. You should see one passing test and two failing tests:

• Our second test, should show hello screen after tap, has two parts:

1. First, it looks for an element with a hello_button id and performs the tap action on that element.
2. It then checks if an element with the text ‘Hello!!!’ is visible using the by.label() matcher and the expect(….).toBeVisible() assertion:

• Our third test has the same functionality, except it taps on a different button and expects a different text to be visible:

To make these tests pass we will add two buttons to our main view that render a view with either an ‘Hello!!!’ or ‘World!!!’ text:

You can find the code of this demo app here.

Write your own tests!

Detox has a wide variety of Matchers, Actions and Assertions to

Access elements in your app:

Perform Actions:

And test how your app behaves:

So go ahead and build your own tests!

To find out more about advanced topics and how to use detox check out the docs.