React Native UI Testing Without the Pain - Maestro Studio | Code with Beto

UI testing in React Native used to be complex and flaky, requiring deep QA expertise due to device and OS version differences. This video introduces Maestro Studio, a free, open-source desktop app that simplifies end-to-end UI testing on Android and iOS, both locally and in the cloud.

You'll see how to install Maestro Studio, create tests visually, run them on real devices and simulators, and leverage Maestro Cloud to test across multiple devices and OS versions in parallel. This is for React Native developers who want reliable, fast UI tests without the usual pain.

What's inside

Installing and setting up Maestro Studio for React Native projects
Creating and running local end-to-end tests on Android and iOS devices
Using Maestro Studio’s UI to generate test commands like tap and assert visible
Adding gestures and text input commands with inline documentation
Running tests on real devices and simulators without a server running
Leveraging Maestro Cloud to run tests in parallel on multiple devices and OS versions
Viewing test results, logs, screenshots, and videos in Maestro Cloud
Integrating Maestro tests into CI/CD pipelines for automated testing

Installing and setting up Maestro Studio for React Native projects

Maestro Studio is a free, open-source desktop app available for Mac, Windows, and Linux. You start by downloading and installing it, then open it and select your project workspace. It’s recommended to create a folder inside your React Native project to store test files.

I use the Platano React Native and Expo template as an example project. Maestro Studio supports testing apps running from a development server or compiled APKs and files for Android and iOS respectively.

Creating and running local end-to-end tests on Android and iOS devices

You create new test files inside the folder, specifying the app package or APK to test. Running a test launches the app on the selected device or simulator, closing and reopening it to start fresh.

I show running tests on a real Android device connected via Android Studio and on an iPhone simulator. Maestro Studio does not require the development server to be running during test execution, making tests more stable.

Using Maestro Studio’s UI to generate test commands like tap and assert visible

Maestro Studio’s interface lets you interact with the app and generate test commands easily. Right-clicking UI elements brings up a window with code snippets like or for that element.

For example, you can assert that a screen title is visible, then tap the continue button. This visual approach reduces manual coding and helps build reliable test flows quickly.

Adding gestures and text input commands with inline documentation

You can add gestures like swipes directly in the test script with inline context help showing available commands and parameters. I demonstrate swiping a carousel and moving it back to the start.

Text input commands support inserting random or specific text, such as a random personal name to enable form buttons. Maestro Studio shows all commands and options inline, making it easy to build complex interactions.

Running tests on real devices and simulators without a server running

Tests run as standalone applications on devices or simulators without needing the development server. This reduces flakiness and allows testing on real hardware connected to your computer.

I show running the onboarding flow test on both Android and iOS devices, verifying UI elements, taps, swipes, and text input work as expected.

Leveraging Maestro Cloud to run tests in parallel on multiple devices and OS versions

Maestro Cloud lets you upload your app artifacts and run tests on many devices and OS versions in parallel. This solves the problem of testing on older or multiple iPhone and Android versions you don’t own.

You can trigger cloud tests from the desktop app or integrate them into CI/CD pipelines. I show running tests on iPhone 16 with iOS 18, Pixel 6 with Android API 34, and other devices simultaneously.

Viewing test results, logs, screenshots, and videos in Maestro Cloud

Maestro Cloud provides a dashboard to monitor test progress live, see screenshots, logs, and even videos of the test run. You can download artifacts for debugging and confirm your app works across all tested devices.

I highlight how this visibility helps catch bugs on older OS versions and different devices, improving confidence before shipping.

Integrating Maestro tests into CI/CD pipelines for automated testing

While I focus on manual test creation and running, it mentions that Maestro integrates with CI/CD systems. This allows automatic building of APKs and apps on pull requests and running Maestro tests automatically.

This setup ensures continuous validation of your app’s UI across devices without manual intervention, saving time and reducing regressions.

Resources

CourseReact Native course

Learn React Native fundamentals and shipping concepts, including testing.

Pro MembershipPro membership

Get access to exclusive tutorials and support for React Native development.

Let's connect!