Speed Up your React Native builds on Github Actions with Nitro to run Detox e2e tests

Published in

Nitro Build

6 min readJan 27, 2023

As mentioned by Gonzalo Aguirre in this post, ensuring that mobile applications work correctly on all devices and platforms is essential.

The user experience on a mobile application can greatly vary depending on the device and platform that is being used, therefore it is crucial to ensure that the application functions seamlessly on all of them.

End-to-end (e2e) tests are a great tool to guarantee the application behaves as expected in a production environment. These tests simulate real-world scenarios and user interactions, allowing developers to identify and fix any issues before the application is released to production.

Additionally, e2e tests help to ensure that the application continues to function correctly after updates or changes have been made. Overall, implementing e2e tests is a vital step in the mobile application development process to ensure a high-quality, stable, and user-friendly product.

The Problem

The problem of high build times when writing and running e2e tests is a common issue for mobile application development teams. The build process is an essential step in the development of a mobile application. However, when the build process takes too long, it can become a major bottleneck for the entire development team.

In addition to this, high build times can also be demotivating for the entire team, causing delays in the development process, and can affect the team’s overall productivity and morale. This can lead to delays in the development process, and can affect the overall quality of the application and the team’s progress.

Hands on

In this section, we will integrate Nitro along with Detox to reduce build times and make e2e tests more efficient on Github Actions.

We will focus on building / running e2e tests for iOS platform on iOS Simulator basically for two reasons:

iOS builds takes longer than Android builds. So you will notice much more the impact of using Nitro.
Github Linux’s virtual machines doesn’t support hardware acceleration. So if you want to run your automated tests on Android emulators you should use a macOS vm, a self-hosted runner, or a third party service like BuildJet (recommended)

You can read more in this Github issue: “Why running the action on Linux VMs is slow (and that you probably shouldn’t do it)” or in this Github article “Can I use this action on Github Hosted Linux VMs?”

Create a Nitro project

First of all, we will create a new project on Nitro to obtain an API Key.

Go to the Nitro website.
Log in with your Github, Bitbucket or Gitlab credentials.
Create a new project from the dashboard.

For open source projects you can obtain a free API Key.

Go to the project Settings tab and create a new API Key.

Go to your Github repository home page > Settings tab.

On the left side menu, click the Secrets > Actions menu item.

Create a new secret by clicking the New repository secret button.

Create a New secret named NITRO_API_KEY and paste your API Key in the Secret field.

Click on the Add secret button.

Create a new workflow for Github Actions

In this section, we are going to create a new Github Actions workflow to build our React Native app and run e2e tests.

For the sake of simplicity, we’ve forked the Mathimals game, which is an open-source React Native project and for this demo we added some e2e test scenarios using Detox.

Now it is time to create the workflow inside our repository.

Create a new nitro-detox-ios.yml file inside .github/workflows folder and use the following snippet.

name: nitro-detox-ios
on: [push]
jobs:
  build:
    runs-on: macos-12
    env:
      NITRO_API_KEY: ${{ secrets.NITRO_API_KEY }}
    steps:
      - uses: actions/checkout@v3
      - name: Install Detox dependencies
        run: |
          yarn global add detox-cli react-native-cli
          brew bundle install --file=e2e/Brewfile
      - uses: nitro-build/github-action-nitro-ios@v1
        with:
          detox-configuration: ios.sim.release
      - name: Run tests with Detox
        run: |
          detox test --configuration ios.sim.release --cleanup --headless
      - uses: actions/upload-artifact@v3
        with:
          path: ${{ steps.nitro.outputs.nitro-output-dir }}

You can find the Android version @ https://github.com/jpgarcia/matchimals.fun/blob/main/.github/workflows/nitro-detox-android.yml (remember that you cannot use a Linux vm hosted on Github as we described above)

The workflow will basically do the following steps:

Checkout the code using the actions/checkout@v3 action.
Install Detox dependencies using the run action.

Notice that we created a Brewfile to simplify this process.
You can find the Brewfile @ https://github.com/jpgarcia/matchimals.fun/blob/main/e2e/Brewfile

Build the React Native app using the nitro-build/github-action-nitro-ios@v1 action (specifying only one argument for the config name used by Detox to determine which build command will execute).

You can find the full configuration file for this example on Github @ https://github.com/jpgarcia/matchimals.fun/blob/main/.detoxrc.js

Run the tests using Detox’s command line using the run action.
Upload the build artifacts with the actions/upload-artifacts@v3 action setting thepathinput argument with the output variable nitro-output-dir exposed by Nitro’s Github Action.

Take a look at Nitro’s docs in case you want to run Advanced Scenarios or if you need to Troubleshoot things.

Let’s trigger the first workflow on Github by committing and pushing the nitro-detox-ios.yml file to the origin repository.

git commit -am "configure detox github ios workflow"
git push origin main

Go to your Github repository dashboard. Click the Actions tab and you’ll see the workflow running (that’s because the on [push] option in the nitro-detox-ios.yml file that triggered the build automatically on each push)

Once the build has finished, we can go the to Run tests with Detox step and verify our tests are ✅ passing.

As this is the initial run we should expect build time as usual. In this case it took around 25 minutes to build the app 🦥

Let’s perform a simple JS code change in the App.jsfile and push the changes to trigger a new build.

git commit -am "update background color"
git push origin main

here is where the magic happens! ✨

We reduced the overall workflow time from ~27 minutes to ~5 minutes. That’s 4x faster which is awesome!

Conclusion

End-to-end tests are essential to ensure that a mobile application works correctly in a production environment. However, writing and running e2e tests can be a challenge due to high build times. Using the Nitro tool, it is possible to significantly reduce build times and make e2e tests more efficient. This means that developers can write and run e2e tests faster and more efficiently.

In summary, Nitro is a valuable tool for any mobile application development team that is looking to ensure the quality and stability of their application through the implementation of e2e tests. There are no more excuses for not implementing e2e tests and thus ensuring a more robust application.