Speed Up your React Native builds on Bitrise with Nitro to run Detox e2e tests
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 Bitrise.
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.
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.
- Keep it safe as we will need it in further steps.
Create a new Bitrise app
If you feel confortable with YAML configuration files, you can find the full Bitirse configuration file covering all the scenarios here https://github.com/jpgarcia/matchimals.fun/blob/main/bitrise.yml.
In this section, we will create a new Bitrise app just with the very basic stuff.
- Go to the Bitrise dashboard.
- Create a new app by clicking the Add new app button > WebUI option and follow the wizard.
- Select your project visibility, connect your repository, and choose a default branch to build.
- Select Manual option and the latest 14.2.x Xcode Stack in the Project build configuration step.
- Finish the setup by clicking this button.
- Bitrise will trigger a simple build that basically clone the repo. If everything went fine we should see something like this.
Setup Bitrise workflow with Nitro and Detox
Now we’re going to add to the existing workflow a Nitro step to actually build the React Native app.
In addition we will provide the configuration name used by Detox to determine which build command will execute in this case it will be ios.sim.release
You can find the full configuration file for this example on Github @ https://github.com/jpgarcia/matchimals.fun/blob/main/.detoxrc.js
- Click the Edit workflow button to configure the actual app build.
- Remove the Do anything with Script step.
- Click the + icon between the Git clone Repository and Deploy to Bitrise.io steps
- Search for Yarn and select the Run yarn command item to setup Detox dependencies using yarn.
- Set the “The yarn command to run” argument to install the node modules Detox requires to run globally.
global add detox-cli react-native-cli
- Click the + icon between the Run yarn command and Deploy to Bitrise.io steps.
- Search for Brew and select the Brew install item.
In this step we will install the applesimutils (A collection of utils for Apple simulators) required by Detox to run tests on iOS Simulators.
- Select the Brew install step and configure the step as depicted below:
Notice that we created a Brewfile in Github to simplify the process Detox dependencies for iOS. You can find the Brewfile @ https://github.com/jpgarcia/matchimals.fun/blob/main/e2e/Brewfile
- Now it’s time to setup the Nitro for iOS step to build the app. Click the + icon between the Brew Install and Deploy to Bitrise.io steps.
- Search for Nitro for iOS step by clicking the ALL tab first and add the step to the workflow.
In this post, we’ll focus primarily on the iOS platform, which typically has the longest build time.
- Locate the Nitro API key step argument.
- Create a new secret variable NITRO_API_KEY and set the value with the Nitro API Key we obtained in the steps above.
Click the CHANGE ↓ right icon to show the Select secret variable button
- Go to the Nitro step Advanced section to specify which configuration will be used to build the project. In this case:
ios.sim.release
You can find the full configuration file for this example on Github https://github.com/jpgarcia/matchimals.fun/blob/main/.detoxrc.js
Take a look at Nitro’s docs in case you want to run Advanced Scenarios or if you need to Troubleshoot things.
- Click the + icon between the Brew install and Deploy to Bitrise.io steps.
- Search for Script and add the step to the workflow.
- Use the the following snippet to run Detox tests on the iOS Simulator.
Make sure the
— configurationargument matches with the one defined in the Nitro step.
#!/usr/bin/env bash
# fail if any commands fails
set -e
detox test --configuration ios.sim.release --cleanup- Save the workflow.
- Go to the main page and press the Rebuild button.
- As this is the initial run we should expect build time as usual.
- Let’s Click the Rebuild button again and here is where the magic happens! ✨
We reduced the build time from ~19 minutes to ~5 minutes. That’s 4x faster which is awesome!
- Nitro step for Bitrise comes with good defaults so if you navigate to the Artifacts tab, you’ll find the app is ready for download to be installed on the iOS Simulator, as well as the build log files and summary.
- Finally, if we go to the build logs we can see that test are passing ✅
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.
