React Native end-to-end testing made easy

What’s end-to-end testing?

It’s the type of testing that involves testing a complete application environment in a situation that mimics a real-world user using the app.

The purpose of it is to make sure that the flow of the app is working as expected from start to finish.

On the other hand, unit testing is testing each component of the system in isolation, usually each function, and testing whether each function/component is returning the expected output for a certain input.

So, using end-to-end testing makes you see the bug as the user would do. For example, all your components or system parts might be functioning just fine, but still there might be a transparent layer overlapping the buy button. You can’t catch such a thing with unit testing, but you can do so with end-to-end testing, as you’ll tap on it, and nothing would happen, then the test would fail, because for all what the user knows, the button doesn’t work, and they might not use that “broken” app again.

The only disadvantage of end-to-end testing is that it doesn’t give you specifics about why that test failed, so you have to debug to get to the cause of the issue.

See it in action

I’ll clone a React native app for demonstration purposes.

git clone git@github.com:srdjanprpa/FormulaOne.git && cd FormulaOne && npm install

Run the project

react-native run-ios

Running the project

Install Node 7.6.0 or above for native async-await support needed for Detox

brew update && brew install node

Install fbsimctl

brew tap facebook/fb

export CODE_SIGNING_REQUIRED=NO && brew install fbsimctl

Verify it works

fbsimctl list

Install appleSimUtils

brew tap wix/brew

brew install --HEAD applesimutils

Verify it’s installed

applesimutils

Install detox globally

npm install -g detox-cli

Install detox locally

npm install detox --save-dev

Install Mocha

You can work with any other assertion framework, we’ll just go with Mocha for demo purposes.

npm install mocha --save-dev

Configuring detox commands

package.json

Create testing folder and files

detox init

detox build

Let’s build a simple test suite

Run the tests

detox test

ahmedam55/FormulaOneWithTest

One last thing…

If you liked this article, click the clap 👏 button below a few times, so other people will see it here on Medium.