Migrate React Native Jest setup to Expo

Assisted-By: devx/2d0344dc-43dd-4535-baf2-409ff9e93de5

Author: kieran-osgood-shopify

dev.yml

@@ -27,6 +27,10 @@ up:
       name: Run Checkout Kit workspace setup
       met?: ./scripts/setup_dev_workspace --check --skip-optional-prompts
       meet: ./scripts/setup_dev_workspace --skip-optional-prompts
+  - custom:
+      name: Prebuild React Native sample native projects
+      met?: "false"
+      meet: cd platforms/react-native && pnpm run prebuild -- all -- --clean
 
 open:
   "GitHub": "https://github.com/Shopify/checkout-kit"
@@ -441,10 +445,10 @@ commands:
           fi
           echo "Cleaned root, module and sample workspaces"
 
-      server:
+      start:
         desc: Start Metro development server
-        aliases: [s]
-        run: cd platforms/react-native && pnpm sample start --reset-cache
+        aliases: [s, server]
+        run: cd platforms/react-native && pnpm sample start "$@"
 
       ios:
         desc: Run the iOS sample app in the simulator.
@@ -472,17 +476,19 @@ commands:
         desc: Prebuild generated native sample projects.
         long_desc: |
           Runs Expo prebuild for the React Native sample and prepares platform-specific native dependencies.
+          Existing native folders are preserved unless Expo's --clean arg is passed through.
 
-            dev rn prebuild                 Prebuild iOS and Android
-            dev rn prebuild ios             Prebuild iOS and install CocoaPods
-            dev rn prebuild android         Prebuild Android
-            dev rn prebuild ios --local     Prebuild iOS against in-repo Swift SDK sources
-            dev rn prebuild android --local Prebuild Android against in-repo Android SDK artifacts
+            dev rn prebuild                         Prebuild iOS and Android
+            dev rn prebuild ios                     Prebuild iOS and install CocoaPods
+            dev rn prebuild android                 Prebuild Android
+            dev rn prebuild all -- --clean          Regenerate iOS and Android native projects
+            dev rn prebuild ios --local             Prebuild iOS against in-repo Swift SDK sources
+            dev rn prebuild android --local         Prebuild Android against in-repo Android SDK artifacts
 
           --local
             Use in-repo native SDKs where supported.
         syntax:
-          optional: "[ios|android|all] [--local]"
+          optional: "[ios|android|all] [--local] [-- <expo prebuild args>]"
         run: cd platforms/react-native && pnpm run prebuild -- "$@"
 
       open:

platforms/react-native/README.md

@@ -223,7 +223,10 @@ Here's an example of how to get started with Apollo:
 
 ```tsx
 import {ApolloClient, gql, ApolloProvider} from '@apollo/client';
-import {API_VERSION, STOREFRONT_DOMAIN, STOREFRONT_ACCESS_TOKEN} from '@env';
+
+const API_VERSION = '2026-04';
+const STOREFRONT_DOMAIN = 'your-store.myshopify.com';
+const STOREFRONT_ACCESS_TOKEN = 'your-public-storefront-access-token';
 
 // Create a new instance of the ApolloClient
 const client = new ApolloClient({

platforms/react-native/__mocks__/react-native.ts

@@ -106,6 +106,12 @@ module.exports = {
   requireNativeComponent,
   codegenNativeComponent,
   TurboModuleRegistry: {
+    get: jest.fn((name: string) => {
+      if (name === 'ShopifyCheckoutKit') {
+        return ShopifyCheckoutKit;
+      }
+      return null;
+    }),
     getEnforcing: jest.fn((name: string) => {
       if (name === 'ShopifyCheckoutKit') {
         return ShopifyCheckoutKit;

platforms/react-native/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['module:@react-native/babel-preset'],
+  presets: ['babel-preset-expo'],
 };

platforms/react-native/jest.config.js

@@ -1,21 +1,13 @@
 module.exports = {
-  preset: '@react-native/jest-preset',
+  preset: 'jest-expo',
   modulePathIgnorePatterns: ['modules/@shopify/checkout-kit-react-native/lib'],
   modulePaths: ['<rootDir>/node_modules', '<rootDir>/sample/node_modules'],
   moduleNameMapper: {
     '^react$': '<rootDir>/node_modules/react',
-    '^react-test-renderer$': '<rootDir>/node_modules/react-test-renderer',
     '^react-native$': '<rootDir>/__mocks__/react-native.ts',
   },
   setupFiles: ['<rootDir>/jest.setup.ts'],
   transform: {
     '\\.[jt]sx?$': 'babel-jest',
   },
-  globals: {
-    'ts-jest': {
-      tsConfig: {
-        importHelpers: true,
-      },
-    },
-  },
 };

platforms/react-native/jest.setup.ts

@@ -2,8 +2,6 @@ declare global {
   var __fbBatchedBridgeConfig: unknown;
 }
 
-jest.mock('react-native');
-
 const platformConstants = {
   forceTouchAvailable: false,
   interfaceIdiom: 'phone',

platforms/react-native/modules/@shopify/checkout-kit-react-native/ios/AcceleratedCheckoutButtons.swift

@@ -7,29 +7,6 @@ import UIKit
 
 // MARK: - AcceleratedCheckout Components
 
-@available(iOS 16.0, *)
-class AcceleratedCheckoutConfiguration {
-    static let shared = AcceleratedCheckoutConfiguration()
-    var configuration: ShopifyAcceleratedCheckouts.Configuration?
-    var applePayConfiguration: ShopifyAcceleratedCheckouts.ApplePayConfiguration?
-
-    var available: Bool {
-        if #available(iOS 16.0, *) {
-            return configuration != nil
-        } else {
-            return false
-        }
-    }
-
-    var applePayAvailable: Bool {
-        if #available(iOS 16.0, *) {
-            return applePayConfiguration != nil
-        } else {
-            return false
-        }
-    }
-}
-
 @objc(RCTAcceleratedCheckoutButtonsManager)
 class RCTAcceleratedCheckoutButtonsManager: RCTViewManager {
     /// Internal property used in tests to simulate legacy devices

platforms/react-native/modules/@shopify/checkout-kit-react-native/ios/AcceleratedCheckoutConfiguration.swift

@@ -0,0 +1,25 @@
+import Foundation
+import ShopifyCheckoutKit
+
+@available(iOS 16.0, *)
+class AcceleratedCheckoutConfiguration {
+    static let shared = AcceleratedCheckoutConfiguration()
+    var configuration: ShopifyAcceleratedCheckouts.Configuration?
+    var applePayConfiguration: ShopifyAcceleratedCheckouts.ApplePayConfiguration?
+
+    var available: Bool {
+        if #available(iOS 16.0, *) {
+            return configuration != nil
+        } else {
+            return false
+        }
+    }
+
+    var applePayAvailable: Bool {
+        if #available(iOS 16.0, *) {
+            return applePayConfiguration != nil
+        } else {
+            return false
+        }
+    }
+}

platforms/react-native/modules/@shopify/checkout-kit-react-native/ios/ShopifyCheckoutKit.swift

@@ -1,6 +1,8 @@
 import Foundation
 import PassKit
-import React
+#if canImport(React)
+    import React
+#endif
 import ShopifyCheckoutKit
 import SwiftUI
 import UIKit
@@ -258,7 +260,7 @@ class RCTShopifyCheckoutKit: NSObject {
     @available(iOS 16.0, *)
     private func contactFieldsToRequiredContactFields(_ contactFields: [String]) throws -> [ShopifyAcceleratedCheckouts.RequiredContactFields] {
         return try contactFields.compactMap {
-            guard let field = ShopifyAcceleratedCheckouts.RequiredContactFields(rawValue: $0), field != nil else {
+            guard let field = ShopifyAcceleratedCheckouts.RequiredContactFields(rawValue: $0) else {
                 let message = "Unknown contactField option: \(String(describing: $0))"
                 print("[ShopifyCheckoutKit] \(message)")
                 throw NSError(domain: "ShopifyCheckoutKit", code: 1, userInfo: ["message": message])
@@ -325,7 +327,9 @@ extension RCTShopifyCheckoutKit: CheckoutDelegate {
 
 extension RCTShopifyCheckoutKit {
     private func emitDispatchEvent(_ json: String) {
-        perform(NSSelectorFromString("emitOnDispatchFromSwift:"), with: json)
+        let selector = NSSelectorFromString("emitOnDispatchFromSwift:")
+        guard responds(to: selector) else { return }
+        perform(selector, with: json)
     }
 
     /// Builds a `{ "type": ..., "payload": ... }` envelope and forwards

platforms/react-native/modules/@shopify/checkout-kit-react-native/package.json

@@ -70,9 +70,7 @@
     "@shopify/checkout-kit-protocol": "workspace:*",
     "@microsoft/api-extractor": "^7.58.7",
     "react-native-builder-bob": "^0.23.2",
-    "typescript": "^5.9.2",
-    "react": "19.2.3",
-    "react-native": "0.85.3"
+    "typescript": "^5.9.2"
   },
   "codegenConfig": {
     "name": "RNShopifyCheckoutKitSpec",