Efficient React Native UI Testing with Maestro and Ignite

Introduction

As a mobile app developer, you are always on the lookout for new and powerful tools to enhance your development process. Maestro UI testing framework and Ignite, the most popular React Native app with boilerplate for both Expo and bare React Native, are two tools that deserve your attention.

In this blog post, we will discuss how Maestro UI testing framework is now adopted by Ignite, and how these two tools can help you develop better and more reliable React Native apps.

Maestro in Ignite

Maestro is a simple yet powerful Open Source UI testing framework for mobile apps. The framework allows you to define and test Flows, which are parts of the user journey in your app.

Ignite has recently replaced Detox with Maestro as its default end-to-end (e2e) testing tool. Ignite’s [v8.7.0](https://github.com/infinitered/ignite/releases/tag/v8.7.0) release includes Maestro e2e tests. With Maestro’s integration into Ignite, developers can now write and maintain e2e tests more efficiently.

Setting up Maestro in Ignite is a breeze, thanks to its simple installation process. Once installed, you can create Maestro Flows within the .maestro folder in your Ignite project.

Setting Up Maestro in Ignite

For New Ignite Apps

To illustrate the process, let’s create a new Ignite app and integrate Maestro to automate UI testing:

1. Install Ignite: First, you need to install Ignite. Simply run the following command in your terminal:

    npx ignite-cli@latest new IgniteApp
    ```

2. **Launch the app**: Open two terminals.

In one, run `npm start`.

On the other, run `npx react-native run-ios --simulator="iPhone 14 Pro Max"` to launch the iOS app in a specific simulator or just `npm run ios`. For Android, run `npm run android`.

3. **Integrate Maestro**: IgniteApp includes the `.maestro` directory in your project root with two Maestro flows: `Login.yaml` and `FavoritePodcast.yaml`. Install Maestro with `curl -Ls "<https://get.maestro.mobile.dev>" | bash`

4. **Run Maestro tests**: With your app loaded in the simulator, execute the Maestro test by navigating to the `.maestro` directory and running `maestro test FavoritePodcast.yaml`

By following these steps, you have successfully integrated Maestro with Ignite and can now **automate UI testing** for your mobile app.

### For Existing Ignite Apps

To set up Maestro in your **existing** Ignite project, follow these simple steps:

1. **Install Maestro**: Use the command `curl -Ls "<https://get.maestro.mobile.dev>" | bash` to install Maestro.

2. **Create a**`.maestro` **folder**: Create a folder named `.maestro` in the root directory of your Ignite project.

3. **Create Maestro flows**: Create Maestro flows by creating YAML files within the `.maestro` folder. For instance, create a file called `Login.yaml` and write your desired flow script.

4. **Run Maestro tests**: With your app loaded in the simulator, navigate to the `.maestro` directory and execute the Maestro test by running `maestro test Login.yaml`.

## Flow Scripts

Tests are defined in a `yaml` file, offering a concise and expressive way to write tests.

**Reference**: [https://github.com/infinitered/ignite/tree/master/boilerplate/.maestro](https://github.com/infinitered/ignite/tree/master/boilerplate/.maestro)

`.maestro/FavoritePodcast.yaml` **file**:

```yaml
# flow: run the login flow and then navigate to the demo podcast list screen, favorite a podcast, and then switch the list to only be favorites.

appId: com.igniteapp
env:
  TITLE: "RNR 257 - META RESPONDS! How can we improve React Native, part 2"
  FAVORITES_TEXT: "Switch on to only show favorites"

---
- runFlow: Login.yaml
- tapOn: "Podcast"
- assertVisible: "React Native Radio episodes"
- tapOn:
    text: ${FAVORITES_TEXT}
- assertVisible: "This looks a bit empty"
- tapOn:
    text: ${FAVORITES_TEXT}
    # https://docs.maestro.dev/troubleshooting/known-issues#android-accidental-double-tap
    retryTapIfNoChange: false
- scrollUntilVisible:
    element:
      text: ${TITLE}
    direction: DOWN
    timeout: 50000
    speed: 40
    visibilityPercentage: 100
- longPressOn: ${TITLE}
- scrollUntilVisible:
    element:
      text: ${FAVORITES_TEXT}
    direction: UP
    timeout: 50000
    speed: 40
    visibilityPercentage: 100
- tapOn:
    text: ${FAVORITES_TEXT}
- assertVisible: ${TITLE}

# @demo remove-fileappId: com.igniteapp
env:
  TITLE: "RNR 257 - META RESPONDS! How can we improve React Native, part 2"
  FAVORITES_TEXT: "Switch on to only show favorites"

.maestro/Login.yaml file:

#flow: Login
#intent:
# Open up our app and use the default credentials to login
# and navigate to the demo screen

appId: com.igniteapp # the app id of the app we want to test
# You can find the appId of an Ignite app in the `app.json` file
# as the "package" under the "android" section and "bundleIdentifier" under the "ios" section
---
- clearState # clears the state of our app (navigation and authentication)
- launchApp # launches the app
- assertVisible: "Sign In"
- tapOn:
    text: "Tap to sign in!"
- assertVisible: "Your app, almost ready for launch!"
- tapOn:
    text: "Let's go!"
- assertVisible: "Components to jump start your project!"

# @demo remove-file

Conclusion

The integration of the Maestro UI testing framework into Ignite has opened up new possibilities for mobile app developers, allowing them to write and maintain e2e tests more efficiently for both Android and iOS platforms. If you want to enhance your development process and build more reliable apps, it’s time to dive into the world of Maestro and Ignite. Check out the Maestro documentation for more information on Maestro’s features and capabilities.