Search code examples
react-nativecalabashxamarin.uitest

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

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?

Solution

  • 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.

    enter image description here

    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.