Detox 101: How to write stable end-to-end tests for your React Native application

Rate this content
Bookmark

Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.


Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.


Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.


Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.


Prerequisites

- iOS/Android: MacOS Catalina or newer

- Android only: Linux

- Install before the workshop

Yevheniia Hlovatska
Yevheniia Hlovatska
117 min
01 Jul, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Detox is a cross-platform framework for writing stable, end-to-end tests for React Native applications. It synchronizes with your application, waits for it to go idle, and prevents tests from failing due to ongoing processes or animations. Detox allows you to write unified tests that work for both iOS and Android, while still supporting platform-specific code. The workshop covers the installation and configuration of Detox, writing tests with Detox using measures, actions, and expectations, and debugging test failures. Test isolation and best practices are also emphasized.

Available in Español

1. Introduction to Detox and Test Automation

Short description:

Welcome to our Detox 101 workshop. Today, we'll learn how to write stable, end-to-end tests for your React Native application using Detox. Detox is a gray box testing tool developed by Wix to solve the problem of slowness and flakiness in test automation. It is different from other frameworks and popular in the React Native community. Detox allows you to access memory, read application state, and sync with the main thread of your application.

So, hello everyone, and welcome to our Detox 101 workshop. I'm super happy to see all of you here. Today, we'll actually try to make it hands-on. We'll try to practice a lot, and then learn the tool. And we will actually learn how to write stable, end-to-end tests for your React Native application.

But first, let me introduce myself. Hi, my name is Yevgenia. You can call me Jane. I'm from Ukraine, and currently in Ukraine also. I'm a QA manager in Wix, and my main focus during the last few years was actually on developing strategies, best practices, education, and test support for test automation in both web and mobile in Wix. And for web we have our internal solution, and for mobile, as you might already know, we have our open-source end-to-end testing framework for mobile applications, which is called DtoX. And we will be talking about it today. Also, I'm an authorized instructor in ICA Agile, and I'm a founder of QA School in Ukraine, where we educate QAs how to do good test automation. I'm also a public speaker. I'm usually talking on QA conferences, but you guys invited me to do the challenge and do a workshop on a DevConference, so it's my first time. Wish me luck. And I'm super actually excited to do it. And I'm a crazy Corgi lover, especially loving this little guy. His name is Ruby, and he is somewhere around us today. He was actually named after a programming language, so he's one of the participants. But he's not the topic today. Today we're here to talk about detox.

And since we're talking about testing tool, before starting to switch to the tool itself, it's also worth to say that we have today an amazing detox team with us. Full house. Guys, please say hi. Great. So, we have Amit, Asaf, Joseph, and Jonathan. Thanks a lot for joining. Guys, we'll be actually here to help you during the workshop. In case you're having any issues or questions or anything, you're always welcome to post them to the Discord channel created for this workshop. It's called RSH Detox 101 and it's dedicated to our workshop. So in case you're facing any issues during the workshop, they will be there to help you. And also I've posted a message there called For Q&A. If you have questions that you want to get an answer for like, what is your next feature I reported some bug when you're going to fix it, or like how can I contribute, we will save time in the end for the Q&A. So just put it into the thread. And again, don't hesitate to ask for help in case. Okay. And let's just stay muted. I will go through the flow of the workshop and guys will be there for you in Discord to help.

Before actually starting to talk about again, end-to-end testing and tools, it's worth to remind about the primary concept in that's automation, you might have already saw it before. It's a concept of basic automation pyramid. So what it actually says is that we should have multiple testing levels in order to cover our application in the most cost effective way. We should have as many unit tests as possible, because they are testing the code itself, the exact functions. They're the cheapest, the fastest, so we can have as much as possible. Then we should have a smaller amount of integration tests. And it can be regular integration, it can be component tests, and some other intermediate levels. We should have less of them to connect those units together. And then we have end-to-end tests for anything else that is like remaining. And end-to-end tests, we kind of think that it should be the smallest amount of those, because they are actually connecting the dots acting like a real user by just literally pressing buttons on your application, visually checking something and such.

In this case, when I usually talk to devs, because I work a lot with development groups in Wix. I hear that they use uni tests a lot, I hear that they like integration tests, but I almost never hear that they love to write end-to-end tests. And usually, end-to-end tests considered to be problematic. And the reason for that is usually flakiness. So sometimes, since end-to-end tests are related, they depend on many, many circumstances. So there they depend on the, even the connection, the other modules that you're testing, internet third parties, everything. Because they're literally doing it like a real user. So it means that you end up with having your tests flaky, and even because it was not like your problem. And the good thing is that Detox was actually created with this problem in mind.

So please meet Detox. Detox was developed by Wix to actually solve the problem of slowness and flakiness in test automation and used by React Native as it's own end-to-end testing tool. So to explain why, like, and how Detox is different from other frameworks and why it's like popular in the React Native community. The first thing is that Detox is gray box and not black box. You might have heard the terms like, black box is when you are testing something like a real user, you have no idea what is going on under the hood and white box is when you know everything and you kind of know how each function works, so it's usually close to unit testing and such. But there is also an intermediate concept in between, which is called gray box. So gray box is kind of when you know something about how your system works under the hood and you can work according to it. In terms of test automation, when you look at the black box, black box is kind of when you know only about the UI hierarchy of your app. So basically you know what are the components that you have over here and you know that you can interact with them. This is it. You don't have anything else. But when we are talking about the gray box concept, you can access memory, you can read application state and you can actually sync with the main thread of your application.

2. Introduction to Detox

Short description:

Detox is a cross-platform framework for writing stable, end-to-end tests for React Native applications. It synchronizes with your application, waits for it to go idle, and prevents tests from failing due to ongoing processes or animations. Detox has first-class React Native support and does not rely on WebDriver. It allows you to write unified tests that work for both iOS and Android, while still supporting platform-specific code. Today, we will be using a demo project, a basic movies app, to learn and practice writing tests with Detox.

So what does it mean in reality? The way detox works, it synchronizes with your application and working by this super simple graph. So it waits for up to go idle and like continuously every like millisecond checking, if app is idle and in case it is not, it will still wait until it will go idle. And only once it is, it will proceed. And basically it will prevent you from failing on many, many cases. You are entering some screen, you had to lower the running, and like especially happens a lot on web, you just press the button which was not present and your test failed because your app was still like doing some requests or like still loading some animation or something and app they can test failed because app didn't actually play. This framework didn't actually wait for app to go idle and deduct does it. So it saves a lot of tests from failing and makes it a lot more stable. Another thing is that D-tox is cross-platform meaning you can write the same test, it will work for both iOS and Android, which is super great. You can also have some platform specific code like using some platform specific gestures or some specific like components that only like iOS have or Android, but still you can use something unified and still have one test that will run for both Android and iOS, which we will actually try out today. D-tox does not rely on WebDriver, it was built for mobile applications from scratch and it has the first class React Native support. And today we will be actually playing with it a bit. We will use the React Native app to do everything with the D-tox, and this is actually D-tox in action. I will be showing you the writing tests today, and we will be in, like, the detailed agenda will be in a few minutes, but we will try many different actions learn some tips and best practices, and here you can just see the way it works. So we will work with the demo project that I've prepared for this workshop. It is a super basic movies app. I hope you love movies, because I do. And this app was prepared for the workshop. It is super easy, and it has some components added, so we will play with it. And I really hope that you had a chance to clone it already. Install everything, and, like, made it work. In case you didn't, please do right now. You have the link in the Discord Channel in the top, so just find it and make sure you follow the prerequisites, so we can... I highly encourage you to do it hands-on with me.

Watch more workshops on topic

Designing Effective Tests With React Testing Library
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Top Content
Featured Workshop
Josh Justice
Josh Justice
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
How to Start With Cypress
TestJS Summit 2022TestJS Summit 2022
146 min
How to Start With Cypress
Featured WorkshopFree
Filip Hric
Filip Hric
The web has evolved. Finally, testing has also. Cypress is a modern testing tool that answers the testing needs of modern web applications. It has been gaining a lot of traction in the last couple of years, gaining worldwide popularity. If you have been waiting to learn Cypress, wait no more! Filip Hric will guide you through the first steps on how to start using Cypress and set up a project on your own. The good news is, learning Cypress is incredibly easy. You'll write your first test in no time, and then you'll discover how to write a full end-to-end test for a modern web application. You'll learn the core concepts like retry-ability. Discover how to work and interact with your application and learn how to combine API and UI tests. Throughout this whole workshop, we will write code and do practical exercises. You will leave with a hands-on experience that you can translate to your own project.
Introducing FlashList: Let's build a performant React Native list all together
React Advanced Conference 2022React Advanced Conference 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
WorkshopFree
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
API Testing with Postman Workshop
TestJS Summit 2023TestJS Summit 2023
48 min
API Testing with Postman Workshop
Top Content
WorkshopFree
Pooja Mistry
Pooja Mistry
In the ever-evolving landscape of software development, ensuring the reliability and functionality of APIs has become paramount. "API Testing with Postman" is a comprehensive workshop designed to equip participants with the knowledge and skills needed to excel in API testing using Postman, a powerful tool widely adopted by professionals in the field. This workshop delves into the fundamentals of API testing, progresses to advanced testing techniques, and explores automation, performance testing, and multi-protocol support, providing attendees with a holistic understanding of API testing with Postman.
1. Welcome to Postman- Explaining the Postman User Interface (UI)2. Workspace and Collections Collaboration- Understanding Workspaces and their role in collaboration- Exploring the concept of Collections for organizing and executing API requests3. Introduction to API Testing- Covering the basics of API testing and its significance4. Variable Management- Managing environment, global, and collection variables- Utilizing scripting snippets for dynamic data5. Building Testing Workflows- Creating effective testing workflows for comprehensive testing- Utilizing the Collection Runner for test execution- Introduction to Postbot for automated testing6. Advanced Testing- Contract Testing for ensuring API contracts- Using Mock Servers for effective testing- Maximizing productivity with Collection/Workspace templates- Integration Testing and Regression Testing strategies7. Automation with Postman- Leveraging the Postman CLI for automation- Scheduled Runs for regular testing- Integrating Postman into CI/CD pipelines8. Performance Testing- Demonstrating performance testing capabilities (showing the desktop client)- Synchronizing tests with VS Code for streamlined development9. Exploring Advanced Features - Working with Multiple Protocols: GraphQL, gRPC, and more
Join us for this workshop to unlock the full potential of Postman for API testing, streamline your testing processes, and enhance the quality and reliability of your software. Whether you're a beginner or an experienced tester, this workshop will equip you with the skills needed to excel in API testing with Postman.
How to Build an Interactive “Wheel of Fortune” Animation with React Native
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
How to Build an Interactive “Wheel of Fortune” Animation with React Native
Top Content
Workshop
Oli Bates
Oli Bates
- Intro - Cleo & our mission- What we want to build, how it fits into our product & purpose, run through designs- Getting started with environment set up & “hello world”- Intro to React Native Animation- Step 1: Spinning the wheel on a button press- Step 2: Dragging the wheel to give it velocity- Step 3: Adding friction to the wheel to slow it down- Step 4 (stretch): Adding haptics for an immersive feel
Testing Web Applications Using Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Network Requests with Cypress
TestJS Summit 2021TestJS Summit 2021
33 min
Network Requests with Cypress
Top Content
Whether you're testing your UI or API, Cypress gives you all the tools needed to work with and manage network requests. This intermediate-level task demonstrates how to use the cy.request and cy.intercept commands to execute, spy on, and stub network requests while testing your application in the browser. Learn how the commands work as well as use cases for each, including best practices for testing and mocking your network requests.
Testing Pyramid Makes Little Sense, What We Can Use Instead
TestJS Summit 2021TestJS Summit 2021
38 min
Testing Pyramid Makes Little Sense, What We Can Use Instead
Top Content
Featured Video
Gleb Bahmutov
Roman Sandler
2 authors
The testing pyramid - the canonical shape of tests that defined what types of tests we need to write to make sure the app works - is ... obsolete. In this presentation, Roman Sandler and Gleb Bahmutov argue what the testing shape works better for today's web applications.
Understanding React’s Fiber Architecture
React Advanced Conference 2022React Advanced Conference 2022
29 min
Understanding React’s Fiber Architecture
Top Content
We've heard a lot about React's Fiber Architecture, but it feels like few of us understand it in depth (or have the time to). In this talk, Tejas will go over his best attempt at understanding Fiber (reviewed by other experts), and present it in an 'explain-like-I'm-five years old' way.
Testing Web Applications with Playwright
TestJS Summit 2022TestJS Summit 2022
20 min
Testing Web Applications with Playwright
Top Content
Testing is hard, testing takes time to learn and to write, and time is money. As developers we want to test. We know we should but we don't have time. So how can we get more developers to do testing? We can create better tools.Let me introduce you to Playwright - Reliable end-to-end cross browser testing for modern web apps, by Microsoft and fully open source. Playwright's codegen generates tests for you in JavaScript, TypeScript, Dot Net, Java or Python. Now you really have no excuses. It's time to play your tests wright.
Full-Circle Testing With Cypress
TestJS Summit 2022TestJS Summit 2022
27 min
Full-Circle Testing With Cypress
Top Content
Cypress has taken the world by storm by brining an easy to use tool for end to end testing. It’s capabilities have proven to be be useful for creating stable tests for frontend applications. But end to end testing is just a small part of testing efforts. What about your API? What about your components? Well, in my talk I would like to show you how we can start with end-to-end tests, go deeper with component testing and then move up to testing our API, circ
Test Effective Development
TestJS Summit 2021TestJS Summit 2021
31 min
Test Effective Development
Top Content
Developers want to sleep tight knowing they didn't break production. Companies want to be efficient in order to meet their customer needs faster and to gain competitive advantage sooner. We ALL want to be cost effective... or shall I say... TEST EFFECTIVE!But how do we do that?Are the "unit" and "integration" terminology serves us right?Or is it time for a change? When should we use either strategy to maximize our "test effectiveness"?In this talk I'll show you a brand new way to think about cost effective testing with new strategies and new testing terms!It’s time to go DEEPER!