--- title: "Time to Detox" description: "Check out our guide on how to write e2e test for React Native apps with Detox." url: https://www.callstack.com/blog/time-to-detox updated: 2026-10-24T08:39:38.457Z --- # Time to Detox Check out our guide on how to write e2e test for React Native apps with Detox. _By Wojciech Szafraniec, Software Engineer @ Callstack · Published 2017-10-05 · Category: Testing_ Testing with React Native is something that I was always interested in. Being responsible for releasing several apps in our office, I follow a set of repetitive instructions to make sure that app is not going to break after upgrading. It’s good to look into ways to automate this process, so it is easier, faster and less error-prone. To this day, there was never really a dedicated framework created with React Native in mind. There were [native snapshots](https://www.callstack.com/blog/testing-your-react-native-apps) that [Mike Grabowski](https://www.callstack.com/team/mike-grabowski) blogged about last year, [jest snapshots](https://www.callstack.com/blog/testing-react-native-with-the-new-jest-part-1-snapshots-come-into-play) from [Ferran Negre](https://www.callstack.com/blog/author/ferrannp), c_avy_ and _appium_ e2e tests_. Native snapshots_ and _jest snapshots_ have been utilised in React Native core repository, adding precious value and confidence into the release pipeline. However, none of them allowed me to turn on **RNTester** (react native official example app), click around and make sure we didn’t break Camera API or the bridge. **Detox is a brand new end-to-end test and automation library for React Native**. Behind the scenes for testing is uses native solutions, _Espresso_for Android and _EarlGrey_ for iOS. It runs your app on a simulator and gives you complete freedom to perform assertions on a real interface and interact with it by simulating arbitrary events. What’s great in Detox that it is a promise library so you don’t really care about \wait(int) / timeouts\ like in _Appium_ during **e2e**test_._ Few months ago I was facing “timeout problem” when mobile app was working with some external printers whose printing time was depending on _bluetooth_ **/** _internet_ **/** _usb_ connection_._ It was almost impossible to estimate printing time for one label when stretch test was about 1000 labels to print and if one of the printings took longer the test was broken.With promises I don’t need to specify time for action and test will not fail when connection breaks for a sec. Cavy is an alternative that appeared recently as well, but the fact that it depends on \refs\ made me advocate for Detox, since it presents a nicer API. Cavy also tests only your JavaScript part of code, not native one like Detox. _Wix_ library also seems to be much faster while it’s working on web sockets. These things convinced me to give it a go! It integrates well with your existing testing framework and it essentially boils down to the following: [GitHub Gist](https://gist.github.com/callstack-bot/70989608ed91e96d7e3e1f83a3f3ca1c) Don’t worry if it looks cryptic at first. We will get to it at the end of this article. The official documentation suggests using _Mocha_. In this example, I’ll show you how to set it up with _Jest,_ which comes with every React Native app by default. ## Getting started The quickest way to get started is to follow [official documentation](https://github.com/wix/detox/blob/master/docs/Introduction.GettingStarted.md) (_Step 1_ and _Step 2)_. We are going to skip _Step 3_ as its tightly coupled to _Mocha._ The installation instructions look complex, but in reality, it turned out to be a really smooth process. We will start by adding _Jest_ to our dependencies: In my case, I have created 3 folders: - \jest\ that contains setup files - \\_\_e2e\_\_\ that contains our _Detox_ tests - \\_\_tests\_\_\ that contains other _Jest_ tests Now, in order to use _Detox_ for all tests inside \\_\_e2e\_\_\ folder, we need to integrate it with _Jest._ We can do it in every test file, but that would be a bit cumbersome. What we can do instead is to set the following in _package.json_: [GitHub Gist](https://gist.github.com/callstack-bot/876c2dbe64388b666eeadc1f69a58b78) Here, _setupTestFrameworkScriptFile_ can be used to configure testing framework right before the test suite is going to be run. It’s a nice alternative to repeating config in every file. The following _setup.js_ file is straight copy from [official documentation ](https://github.com/wix/detox/blob/master/examples/demo-react-native/e2e/init.js)with an exception that we use _Jest_ API instead of _Mocha_ one: [GitHub Gist](https://gist.github.com/callstack-bot/c987949d309810485ea52b62c8a92665) And that’s it! You are all set! You can browse the full example in Mike’s [repository](https://github.com/grabbou/react-native-detox-example). ## Writing tests Before interacting with your components, you have to give them a name so that the testing framework can interact with it. This can be done by setting a special \testID\ prop on any built-in React Native component. Both platforms in native implementations has setter for \testID\ In Android: [GitHub Gist](https://gist.github.com/callstack-bot/4fdbd0f3495ab2e6adefc6bda36aa045) In iOS: [GitHub Gist](https://gist.github.com/callstack-bot/3726851bd19e292232e21921fbd9dc6c) For example, let’s make sure that default React Native app has a _Welcome to React Native_ heading. To do so, we first are going to open _index.ios.js_ and set _testID_ to _welcome:_ [GitHub Gist](https://gist.github.com/callstack-bot/d6953da5a195f56bd7073b0ebd7690b9) _‍_Now, lets create a \\_\_e2e\_\_/welcome.spec.js\ file and make sure the content is visible: [GitHub Gist](https://gist.github.com/callstack-bot/f0bf34a5f34eae495bde93aa39f0945e) And that’s it! You can now run: [GitHub Gist](https://gist.github.com/callstack-bot/5cfb46b024eb940ac7d931bc92a7f422) To see the results of your work. ![yarn test e2e](https://www.callstack.com/assets/67eaca889b8590aa4dc30f8f_67cf5b443102bc9a9ccc15dd_650c0283516389f06687f196_61e1ef7cedbbb204abce48d9_yarn-test-e2e.gif) You can browse the rest of [_Detox_ API](https://github.com/wix/detox/blob/master/docs/README.md) to explore different matchers and expectations. I wrote this article together with Mike, so big shout out to Grabbou 🎉🎉🎉 Here's a link to the [final repo](https://github.com/grabbou/react-native-detox-example).