Move common mocks to __mocks__ directory (#239)

Author: markmur

__mocks__/react-native.ts

@@ -0,0 +1,69 @@
+type Listener = {eventName: string; callback: (data: any) => void};
+
+function createMockEmitter() {
+  let listeners: Listener[] = [];
+
+  const addListener = jest.fn(
+    (eventName: string, callback: (data: any) => void) => {
+      listeners.push({eventName, callback});
+      return {remove: jest.fn()};
+    },
+  );
+
+  const removeAllListeners = jest.fn((eventName?: string) => {
+    if (eventName) {
+      listeners = listeners.filter(l => l.eventName !== eventName);
+    } else {
+      listeners = [];
+    }
+  });
+
+  const emit = jest.fn((eventName: string, data: any) => {
+    const callbacks = listeners
+      .filter(l => l.eventName === eventName)
+      .map(l => l.callback);
+    callbacks.forEach(cb => cb(data));
+    // Clear listeners after emit to avoid cross-test leakage
+    listeners = [];
+  });
+
+  return {addListener, removeAllListeners, emit};
+}
+
+const requireNativeComponent = (..._args: any[]) => {
+  const React = require('react');
+  return (props: any) => React.createElement('View', props);
+};
+
+const exampleConfig = {preloading: true};
+
+const ShopifyCheckoutSheetKit = {
+  version: '0.7.0',
+  preload: jest.fn(),
+  present: jest.fn(),
+  dismiss: jest.fn(),
+  invalidateCache: jest.fn(),
+  getConfig: jest.fn(async () => exampleConfig),
+  setConfig: jest.fn(),
+  addEventListener: jest.fn(),
+  removeEventListeners: jest.fn(),
+  initiateGeolocationRequest: jest.fn(),
+  configureAcceleratedCheckouts: jest.fn(),
+  isAcceleratedCheckoutAvailable: jest.fn(),
+};
+
+// CommonJS export for Jest manual mock resolution
+module.exports = {
+  Platform: {OS: 'ios'},
+  PermissionsAndroid: {
+    requestMultiple: jest.fn(async () => ({})),
+  },
+  NativeEventEmitter: jest.fn(() => createMockEmitter()),
+  requireNativeComponent,
+  NativeModules: {
+    ShopifyCheckoutSheetKit: {
+      ...ShopifyCheckoutSheetKit,
+      eventEmitter: createMockEmitter(),
+    },
+  },
+};

jest.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   preset: 'react-native',
   modulePathIgnorePatterns: ['modules/@shopify/checkout-sheet-kit/lib'],
+  setupFiles: ['<rootDir>/jest.setup.ts'],
   transform: {
     '\\.[jt]sx?$': 'babel-jest',
   },

jest.setup.ts

@@ -0,0 +1,8 @@
+/**
+ * Ensure Jest picks up manual mocks written in TypeScript.
+ * Jest resolves __mocks__/react-native automatically when a test calls jest.mock('react-native')
+ * or when the module is required and a manual mock exists. No runtime code needed here.
+ * This file exists to ensure TypeScript is part of Jest's setupFiles and compiled.
+ */
+
+export {};

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

@@ -12,57 +12,8 @@ const config: Configuration = {
   colorScheme: ColorScheme.automatic,
 };
 
-jest.mock('react-native', () => {
-  let listeners: (typeof jest.fn)[] = [];
-
-  const NativeEventEmitter = jest.fn(() => ({
-    addListener: jest.fn((_, callback) => {
-      listeners.push(callback);
-      return {remove: jest.fn()};
-    }),
-    removeAllListeners: jest.fn(() => {
-      listeners = [];
-    }),
-    emit: jest.fn((_, data: any) => {
-      for (const listener of listeners) {
-        listener(data);
-      }
-      listeners = [];
-    }),
-  }));
-
-  const exampleConfig = {
-    preloading: true,
-  };
-
-  const ShopifyCheckoutSheetKit = {
-    eventEmitter: NativeEventEmitter(),
-    version: '0.7.0',
-    preload: jest.fn(),
-    present: jest.fn(),
-    dismiss: jest.fn(),
-    invalidateCache: jest.fn(),
-    getConfig: jest.fn(async () => exampleConfig),
-    setConfig: jest.fn(),
-    addEventListener: jest.fn(),
-    removeEventListeners: jest.fn(),
-    initiateGeolocationRequest: jest.fn(),
-  };
-
-  return {
-    Platform: {
-      OS: 'ios',
-    },
-    PermissionsAndroid: {
-      requestMultiple: jest.fn(),
-    },
-    _listeners: listeners,
-    NativeEventEmitter,
-    NativeModules: {
-      ShopifyCheckoutSheetKit,
-    },
-  };
-});
+// Use the shared manual mock. Individual tests can override if needed.
+jest.mock('react-native');
 
 // Helper component to test the hook
 const HookTestComponent = ({
@@ -394,7 +345,9 @@ describe('ShopifyCheckoutSheetContext without provider', () => {
     // Test all the noop functions to ensure they don't throw
     expect(() => hookValue.addEventListener('close', jest.fn())).not.toThrow();
     expect(() => hookValue.removeEventListeners('close')).not.toThrow();
-    expect(() => hookValue.setConfig({colorScheme: ColorScheme.automatic})).not.toThrow();
+    expect(() =>
+      hookValue.setConfig({colorScheme: ColorScheme.automatic}),
+    ).not.toThrow();
     expect(() => hookValue.preload('test-url')).not.toThrow();
     expect(() => hookValue.present('test-url')).not.toThrow();
     expect(() => hookValue.invalidate()).not.toThrow();

modules/@shopify/checkout-sheet-kit/tests/index.test.ts

@@ -19,58 +19,8 @@ const config: Configuration = {
   colorScheme: ColorScheme.automatic,
 };
 
-jest.mock('react-native', () => {
-  let listeners: (typeof jest.fn)[] = [];
-
-  const NativeEventEmitter = jest.fn(() => ({
-    addListener: jest.fn((_, callback) => {
-      listeners.push(callback);
-    }),
-    removeAllListeners: jest.fn(() => {
-      listeners = [];
-    }),
-    emit: jest.fn((_, data: any) => {
-      for (const listener of listeners) {
-        listener(data);
-      }
-
-      // clear listeners
-      listeners = [];
-    }),
-  }));
-
-  const exampleConfig = {
-    preloading: true,
-  };
-
-  const ShopifyCheckoutSheetKit = {
-    eventEmitter: NativeEventEmitter(),
-    version: '0.7.0',
-    preload: jest.fn(),
-    present: jest.fn(),
-    dismiss: jest.fn(),
-    invalidateCache: jest.fn(),
-    getConfig: jest.fn(async () => exampleConfig),
-    setConfig: jest.fn(),
-    addEventListener: jest.fn(),
-    removeEventListeners: jest.fn(),
-    initiateGeolocationRequest: jest.fn(),
-  };
-
-  return {
-    Platform: {
-      OS: 'ios',
-    },
-    PermissionsAndroid: {
-      requestMultiple: jest.fn(),
-    },
-    _listeners: listeners,
-    NativeEventEmitter,
-    NativeModules: {
-      ShopifyCheckoutSheetKit,
-    },
-  };
-});
+// Use the shared manual mock. Individual tests can override if needed.
+jest.mock('react-native');
 
 global.console = {
   ...global.console,
@@ -429,27 +379,36 @@ describe('ShopifyCheckoutSheetKit', () => {
         {error: clientError, constructor: CheckoutClientError},
         {error: networkError, constructor: CheckoutHTTPError},
         {error: expiredError, constructor: CheckoutExpiredError},
-      ])(`correctly parses error $error`, ({error, constructor}) => {
-        const instance = new ShopifyCheckoutSheet();
-        const eventName = 'error';
-        const callback = jest.fn();
-        instance.addEventListener(eventName, callback);
-        NativeModules.ShopifyCheckoutSheetKit.addEventListener(
-          eventName,
-          callback,
-        );
-        expect(eventEmitter.addListener).toHaveBeenCalledWith(
-          'error',
-          expect.any(Function),
-        );
-        eventEmitter.emit('error', error);
-        const calledWith = callback.mock.calls[0][0];
-        expect(calledWith).toBeInstanceOf(constructor);
-        expect(calledWith).not.toHaveProperty('__typename');
-        expect(calledWith).toHaveProperty('code');
-        expect(calledWith).toHaveProperty('message');
-        expect(calledWith).toHaveProperty('recoverable');
-      });
+      ])(
+        `correctly parses error $error`,
+        ({
+          error,
+          constructor,
+        }: {
+          error: any;
+          constructor: new (...args: any[]) => any;
+        }) => {
+          const instance = new ShopifyCheckoutSheet();
+          const eventName = 'error';
+          const callback = jest.fn();
+          instance.addEventListener(eventName, callback);
+          NativeModules.ShopifyCheckoutSheetKit.addEventListener(
+            eventName,
+            callback,
+          );
+          expect(eventEmitter.addListener).toHaveBeenCalledWith(
+            'error',
+            expect.any(Function),
+          );
+          eventEmitter.emit('error', error);
+          const calledWith = callback.mock.calls[0][0];
+          expect(calledWith).toBeInstanceOf(constructor);
+          expect(calledWith).not.toHaveProperty('__typename');
+          expect(calledWith).toHaveProperty('code');
+          expect(calledWith).toHaveProperty('message');
+          expect(calledWith).toHaveProperty('recoverable');
+        },
+      );
 
       it('returns an unknown generic error if the error cannot be parsed', () => {
         const instance = new ShopifyCheckoutSheet();
@@ -535,9 +494,11 @@ describe('ShopifyCheckoutSheetKit', () => {
           'android.permission.ACCESS_FINE_LOCATION': 'denied',
         };
 
-        (PermissionsAndroid.requestMultiple as jest.Mock).mockResolvedValue(
-          mockPermissions,
-        );
+        (
+          PermissionsAndroid.requestMultiple as unknown as {
+            mockResolvedValue: (v: any) => void;
+          }
+        ).mockResolvedValue(mockPermissions);
 
         new ShopifyCheckoutSheet();
 
@@ -558,9 +519,11 @@ describe('ShopifyCheckoutSheetKit', () => {
           'android.permission.ACCESS_FINE_LOCATION': 'denied',
         };
 
-        (PermissionsAndroid.requestMultiple as jest.Mock).mockResolvedValue(
-          mockPermissions,
-        );
+        (
+          PermissionsAndroid.requestMultiple as unknown as {
+            mockResolvedValue: (v: any) => void;
+          }
+        ).mockResolvedValue(mockPermissions);
 
         new ShopifyCheckoutSheet();