How to Add Calabash to React Native iOS for Xamarin.UITest

Question

How can I add the Calabash Framework to an iOS app built in React Native?

We are moving the codebase of our iOS app from Swift to React Native, and I have an existing suite of UITests built in C# using Xamarin.UITest.

I'd like to continue using my Xamarin.UITest suite for the React Native iOS app, but I know that Xamarin.UITest requires the Calabash framework to be linked in the app's source code.

Xamarin has documentation on how to link Calabash for an iOS app built in Xcode, but I cannot find any documentation on how to link Calabash for an iOS app built in React Native.

Is there any similar documentation that shows how to link Calabash to a React Native iOS app?

Answer 1

iOS apps built in React Native automatically create an .xcodeproj file and rely on an Xcode project for build/deploy. Here is an image of a newly initialized React Native Project.

Xamarin.UITest requires that the Calabash Framework be linked to the iOS app. Because React Native iOS apps rely on an .xcodeproj, we can inject Calabash following the same steps as if the app was written in Swift/ObjC. To accomplish, follow this Tutorial: Link Calabash in Debug config.

In the JavaScript source code, add a unique identifier to each on-screen element using the accessibilityLabel property. In this example we've identified our TextInput as "TextInputAccessibilityId".

In the Xamarin.UITest, we can now create a field, readonly Query TextInput, and initialize it using the same property: TextInput = x => x.Marked("TextInputAccessibilityId");. Now we can interact with this on-screen element in our Xamarin.UITest!

All tests were verified in Xamarin Test Cloud, and the results are viewable here.

Answer 2

Injecting Calabash into IPA using Xamarin Test Recorder

One option you can use is using the Xamarin Test Recorder to inject Calabash into your IPA: https://developer.xamarin.com/guides/testcloud/testrecorder/

This method is framework agnostic as far as what was used to build the original IPA, since it injects it into the compiled IPA. The Xamarin Test Recorder does this after you set up the app to work with the recorder: https://developer.xamarin.com/guides/testcloud/testrecorder/#Recording_a_Test

At this point, you can use the test recorder itself to create UITests and export them: https://developer.xamarin.com/guides/testcloud/testrecorder/#Exporting_the_Recorded_Test. Or you can just take the resigned IPA which will be in the same location as the original IPA, with the name prepended with "xtr-" like so:

• myAwesomeApp.ipa (original IPA)
• xtr-myAwesomeApp.ipa (IPA with Calabash)

Things to watch out for

• IPA is resigned by Test Recorder - In order for Xamarin Test Recorder to inject Calabash, it also needs to resign the IPA. For this the system doing the resigning needs to have a valid signing identity and provisioning profile that is valid, including entitlements the app uses.

• Any IPA containing Calabash will be rejected by the iOS app store - This is true no matter what method is used to add Calabash to the IPA, but it's important to remember. In the example above, you would test with xtr-myAwesomeApp.ipa and submit myAwesomeApp.ipa itself to the app store.

• Recorded Tests must be exported as a separate .cs file to be used - Even if you recorded some tests, those are not contained in the IPA itself directly, but Test Recorder can export them as a .cs file, structured in the same way as how you would handwrite Xamarin.UITests.