refactor: reuse common mock for native module - simplify hooks

Author: kieran-osgood-shopify

modules/@shopify/checkout-sheet-kit/src/components/ShopifyCheckout.tsx

@@ -22,27 +22,21 @@ import React, {
   useCallback,
   useImperativeHandle,
   forwardRef,
-  useEffect,
 } from 'react';
+import {UIManager, findNodeHandle, type ViewStyle} from 'react-native';
+import {useWebviewRegistration} from '../context';
 import {
-  requireNativeComponent,
-  UIManager,
-  findNodeHandle,
-  type ViewStyle,
-} from 'react-native';
-import {useShopifyCheckoutSheet} from '../context';
+  RCTCheckoutWebView,
+  type NativeShopifyCheckoutWebViewProps,
+} from '../native/RCTCheckoutWebView';
 import type {
   CheckoutAddressChangeStartEvent,
   CheckoutCompleteEvent,
   CheckoutPaymentMethodChangeStartEvent,
   CheckoutStartEvent,
   CheckoutSubmitStartEvent,
 } from '../events.d';
-import {
-  parseCheckoutError,
-  type CheckoutException,
-  type CheckoutNativeError,
-} from '../errors.d';
+import {parseCheckoutError, type CheckoutException} from '../errors.d';
 
 export interface ShopifyCheckoutProps {
   /**
@@ -123,30 +117,6 @@ export interface ShopifyCheckoutRef {
   reload: () => void;
 }
 
-interface NativeShopifyCheckoutWebViewProps {
-  checkoutUrl: string;
-  auth?: string;
-  style?: ViewStyle;
-  testID?: string;
-  onStart?: (event: {nativeEvent: CheckoutStartEvent}) => void;
-  onFail?: (event: {nativeEvent: CheckoutNativeError}) => void;
-  onComplete?: (event: {nativeEvent: CheckoutCompleteEvent}) => void;
-  onCancel?: () => void;
-  onLinkClick?: (event: {nativeEvent: {url: string}}) => void;
-  onAddressChangeStart?: (event: {
-    nativeEvent: CheckoutAddressChangeStartEvent;
-  }) => void;
-  onSubmitStart?: (event: {nativeEvent: CheckoutSubmitStartEvent}) => void;
-  onPaymentMethodChangeStart?: (event: {
-    nativeEvent: CheckoutPaymentMethodChangeStartEvent;
-  }) => void;
-}
-
-const RCTCheckoutWebView =
-  requireNativeComponent<NativeShopifyCheckoutWebViewProps>(
-    'RCTCheckoutWebView',
-  );
-
 /**
  * Checkout provides a native webview component for displaying
  * Shopify checkout pages directly within your React Native app.
@@ -211,12 +181,7 @@ export const ShopifyCheckout = forwardRef<
   ) => {
     const webViewRef =
       useRef<React.ComponentRef<typeof RCTCheckoutWebView>>(null);
-    const {registerWebView, unregisterWebView} = useShopifyCheckoutSheet();
-
-    useEffect(() => {
-      registerWebView(webViewRef);
-      return () => unregisterWebView();
-    }, [registerWebView, unregisterWebView]);
+    useWebviewRegistration(webViewRef);
 
     const handleStart = useCallback<
       Required<NativeShopifyCheckoutWebViewProps>['onStart']

modules/@shopify/checkout-sheet-kit/src/context.tsx

@@ -23,7 +23,11 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SO
 
 import React, {useCallback, useMemo, useRef, useEffect, useState} from 'react';
 import type {PropsWithChildren} from 'react';
-import {type EmitterSubscription, UIManager, findNodeHandle} from 'react-native';
+import {
+  type EmitterSubscription,
+  UIManager,
+  findNodeHandle,
+} from 'react-native';
 import {ShopifyCheckoutSheet} from './index';
 import type {Features} from './index.d';
 import type {
@@ -34,13 +38,34 @@ import type {
   CheckoutOptions,
 } from './index.d';
 
-interface WebviewContextType {
+type Maybe<T> = T | undefined;
+
+interface Context {
+  acceleratedCheckoutsAvailable: boolean;
+  addEventListener: AddEventListener;
+  getConfig: () => Promise<Configuration | undefined>;
+  setConfig: (config: Configuration) => Promise<void>;
+  removeEventListeners: RemoveEventListeners;
+  preload: (checkoutUrl: string, options?: CheckoutOptions) => void;
+  present: (checkoutUrl: string, options?: CheckoutOptions) => void;
+  dismiss: () => void;
+  invalidate: () => void;
+  version: Maybe<string>;
+  respondToEvent: (eventId: string, response: any) => Promise<boolean>;
+}
+
+interface InternalContext extends Context {
+  registerWebView: (ref: React.RefObject<any>) => void;
+  unregisterWebView: () => void;
+}
+
+interface WebviewState {
   registerWebView: (ref: React.RefObject<any>) => void;
   unregisterWebView: () => void;
   respondToEvent: (eventId: string, response: any) => Promise<boolean>;
 }
 
-function useWebview(): WebviewContextType {
+function useWebview(): WebviewState {
   const webViewRef = useRef<React.RefObject<any> | null>(null);
 
   const registerWebView = useCallback((ref: React.RefObject<any>) => {
@@ -79,23 +104,8 @@ function useWebview(): WebviewContextType {
   return {registerWebView, unregisterWebView, respondToEvent};
 }
 
-type Maybe<T> = T | undefined;
-
-interface Context extends WebviewContextType {
-  acceleratedCheckoutsAvailable: boolean;
-  addEventListener: AddEventListener;
-  getConfig: () => Promise<Configuration | undefined>;
-  setConfig: (config: Configuration) => Promise<void>;
-  removeEventListeners: RemoveEventListeners;
-  preload: (checkoutUrl: string, options?: CheckoutOptions) => void;
-  present: (checkoutUrl: string, options?: CheckoutOptions) => void;
-  dismiss: () => void;
-  invalidate: () => void;
-  version: Maybe<string>;
-}
-
-const ShopifyCheckoutSheetContext = React.createContext<Context>(
-  null as unknown as Context,
+const ShopifyCheckoutSheetContext = React.createContext<InternalContext>(
+  null as unknown as InternalContext,
 );
 
 interface Props {
@@ -124,7 +134,8 @@ export function ShopifyCheckoutSheetProvider({
       }
 
       await instance.current?.setConfig(configuration);
-      const isAvailable = await instance.current.isAcceleratedCheckoutAvailable();
+      const isAvailable =
+        await instance.current.isAcceleratedCheckoutAvailable();
       setAcceleratedCheckoutsAvailable(isAvailable);
     }
 
@@ -142,18 +153,23 @@ export function ShopifyCheckoutSheetProvider({
     instance.current?.removeEventListeners(eventName);
   }, []);
 
-  const present = useCallback((checkoutUrl: string, options?: CheckoutOptions) => {
-    if (checkoutUrl) {
-      instance.current?.present(checkoutUrl, options
-      );
-    }
-  }, []);
+  const present = useCallback(
+    (checkoutUrl: string, options?: CheckoutOptions) => {
+      if (checkoutUrl) {
+        instance.current?.present(checkoutUrl, options);
+      }
+    },
+    [],
+  );
 
-  const preload = useCallback((checkoutUrl: string, options?: CheckoutOptions) => {
-    if (checkoutUrl) {
-      instance.current?.preload(checkoutUrl, options);
-    }
-  }, []);
+  const preload = useCallback(
+    (checkoutUrl: string, options?: CheckoutOptions) => {
+      if (checkoutUrl) {
+        instance.current?.preload(checkoutUrl, options);
+      }
+    },
+    [],
+  );
 
   const invalidate = useCallback(() => {
     instance.current?.invalidate();
@@ -171,7 +187,7 @@ export function ShopifyCheckoutSheetProvider({
     return instance.current?.getConfig();
   }, []);
 
-  const context = useMemo((): Context => {
+  const context = useMemo((): InternalContext => {
     return {
       acceleratedCheckoutsAvailable,
       addEventListener,
@@ -209,14 +225,31 @@ export function ShopifyCheckoutSheetProvider({
   );
 }
 
-export function useShopifyCheckoutSheet() {
+export function useShopifyCheckoutSheet(): Context {
   const context = React.useContext(ShopifyCheckoutSheetContext);
   if (!context) {
     throw new Error(
       'useShopifyCheckoutSheet must be used from within a ShopifyCheckoutSheetContext',
     );
   }
-  return context;
+  return useMemo(() => {
+    const {registerWebView, unregisterWebView, ...publicContext} = context;
+    return publicContext;
+  }, [context]);
+}
+
+export function useWebviewRegistration(webViewRef: React.RefObject<any>) {
+  const context = React.useContext(ShopifyCheckoutSheetContext);
+  if (!context) {
+    throw new Error(
+      'useWebviewRegistration must be used within ShopifyCheckoutSheetProvider',
+    );
+  }
+
+  useEffect(() => {
+    context.registerWebView(webViewRef);
+    return () => context.unregisterWebView();
+  }, [context, webViewRef]);
 }
 
 export function useShopifyEvent(eventId: string) {

modules/@shopify/checkout-sheet-kit/src/native/RCTCheckoutWebView.ts

@@ -0,0 +1,34 @@
+import {requireNativeComponent} from 'react-native';
+import type {ViewStyle} from 'react-native';
+import type {
+  CheckoutStartEvent,
+  CheckoutCompleteEvent,
+  CheckoutAddressChangeStartEvent,
+  CheckoutSubmitStartEvent,
+  CheckoutPaymentMethodChangeStartEvent,
+} from '../events.d';
+import type {CheckoutNativeError} from '../errors.d';
+
+export interface NativeShopifyCheckoutWebViewProps {
+  checkoutUrl: string;
+  auth?: string;
+  style?: ViewStyle;
+  testID?: string;
+  onStart?: (event: {nativeEvent: CheckoutStartEvent}) => void;
+  onFail?: (event: {nativeEvent: CheckoutNativeError}) => void;
+  onComplete?: (event: {nativeEvent: CheckoutCompleteEvent}) => void;
+  onCancel?: () => void;
+  onLinkClick?: (event: {nativeEvent: {url: string}}) => void;
+  onAddressChangeStart?: (event: {
+    nativeEvent: CheckoutAddressChangeStartEvent;
+  }) => void;
+  onSubmitStart?: (event: {nativeEvent: CheckoutSubmitStartEvent}) => void;
+  onPaymentMethodChangeStart?: (event: {
+    nativeEvent: CheckoutPaymentMethodChangeStartEvent;
+  }) => void;
+}
+
+export const RCTCheckoutWebView =
+  requireNativeComponent<NativeShopifyCheckoutWebViewProps>(
+    'RCTCheckoutWebView',
+  );

modules/@shopify/checkout-sheet-kit/src/native/__mocks__/RCTCheckoutWebView.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+
+export const RCTCheckoutWebView = (props: any) =>
+  React.createElement('View', props);

modules/@shopify/checkout-sheet-kit/tests/CheckoutAddressChange.test.tsx

@@ -1,39 +1,5 @@
-// Mock the native view component BEFORE imports
-jest.mock('react-native', () => {
-  const RN = jest.requireActual('react-native');
-  const React = jest.requireActual('react');
-
-  RN.UIManager.getViewManagerConfig = jest.fn(() => ({
-    Commands: {},
-  }));
-
-  RN.NativeModules.ShopifyCheckoutSheetKit = {
-    version: '0.7.0',
-    preload: jest.fn(),
-    present: jest.fn(),
-    dismiss: jest.fn(),
-    invalidateCache: jest.fn(),
-    getConfig: jest.fn(async () => ({preloading: true})),
-    setConfig: jest.fn(),
-    addEventListener: jest.fn(),
-    removeEventListeners: jest.fn(),
-    initiateGeolocationRequest: jest.fn(),
-    configureAcceleratedCheckouts: jest.fn(),
-    isAcceleratedCheckoutAvailable: jest.fn(),
-  };
-
-  // Create mock component
-  const MockRCTCheckoutWebView = (props: any) => {
-    return React.createElement('View', props);
-  };
-
-  return Object.setPrototypeOf(
-    {
-      requireNativeComponent: jest.fn(() => MockRCTCheckoutWebView),
-    },
-    RN,
-  );
-});
+jest.mock('../src/native/RCTCheckoutWebView');
+jest.mock('react-native');
 
 import React from 'react';
 import {render, act} from '@testing-library/react-native';
@@ -86,7 +52,10 @@ describe('Checkout Component - Address Change Events', () => {
 
   it('does not crash when onAddressChangeStart prop is not provided', () => {
     const {getByTestId} = render(
-      <ShopifyCheckout checkoutUrl={mockCheckoutUrl} testID="checkout-webview" />,
+      <ShopifyCheckout
+        checkoutUrl={mockCheckoutUrl}
+        testID="checkout-webview"
+      />,
       {wrapper: Wrapper},
     );
 

modules/@shopify/checkout-sheet-kit/tests/CheckoutComplete.test.tsx

@@ -1,39 +1,5 @@
-// Mock the native view component BEFORE imports
-jest.mock('react-native', () => {
-  const RN = jest.requireActual('react-native');
-  const React = jest.requireActual('react');
-
-  RN.UIManager.getViewManagerConfig = jest.fn(() => ({
-    Commands: {},
-  }));
-
-  RN.NativeModules.ShopifyCheckoutSheetKit = {
-    version: '0.7.0',
-    preload: jest.fn(),
-    present: jest.fn(),
-    dismiss: jest.fn(),
-    invalidateCache: jest.fn(),
-    getConfig: jest.fn(async () => ({preloading: true})),
-    setConfig: jest.fn(),
-    addEventListener: jest.fn(),
-    removeEventListeners: jest.fn(),
-    initiateGeolocationRequest: jest.fn(),
-    configureAcceleratedCheckouts: jest.fn(),
-    isAcceleratedCheckoutAvailable: jest.fn(),
-  };
-
-  // Create mock component
-  const MockRCTCheckoutWebView = (props: any) => {
-    return React.createElement('View', props);
-  };
-
-  return Object.setPrototypeOf(
-    {
-      requireNativeComponent: jest.fn(() => MockRCTCheckoutWebView),
-    },
-    RN,
-  );
-});
+jest.mock('../src/native/RCTCheckoutWebView');
+jest.mock('react-native');
 
 import React from 'react';
 import {render, act} from '@testing-library/react-native';
@@ -185,7 +151,10 @@ describe('Checkout Component - Complete Events', () => {
 
   it('does not crash when onComplete prop is not provided', () => {
     const {getByTestId} = render(
-      <ShopifyCheckout checkoutUrl={mockCheckoutUrl} testID="checkout-webview" />,
+      <ShopifyCheckout
+        checkoutUrl={mockCheckoutUrl}
+        testID="checkout-webview"
+      />,
       {wrapper: Wrapper},
     );