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"
@@ -349,27 +353,21 @@ commands:
         long_desc: |
           Runs unit tests across all three React Native targets:
             - JS:      Jest tests in `platforms/react-native/modules/@shopify/checkout-kit-react-native/tests/`
-            - iOS:     Swift Package protocol tests plus bridge tests in `platforms/react-native/modules/@shopify/checkout-kit-react-native/ios-tests/`
+            - iOS:     Swift Package tests at `platforms/react-native/modules/@shopify/checkout-kit-react-native/ios/`
             - Android: Gradle JVM tests for `:shopify_checkout-kit-react-native`
         run: |
           set -e
           cd platforms/react-native && pnpm test
           cd modules/@shopify/checkout-kit-react-native/ios && swift test
-          cd ../ios-tests && ./test
           cd ../../../..
           pnpm sample test:android -- --refresh-dependencies
         subcommands:
           js:
             desc: Run JS unit tests via jest
             run: cd platforms/react-native && pnpm test
           ios:
-            desc: Run native iOS unit tests (Swift Package protocol tests + CocoaPods bridge fixture)
-            run: |
-              set -e
-              cd platforms/react-native/modules/@shopify/checkout-kit-react-native/ios
-              swift test
-              cd ../ios-tests
-              ./test
+            desc: Run native iOS unit tests via Swift Package
+            run: cd platforms/react-native/modules/@shopify/checkout-kit-react-native/ios && swift test
           android:
             desc: Run native Android unit tests for the RN module
             run: |
@@ -437,10 +435,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.
@@ -468,17 +466,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',