@shopify/ui-extensions 2025.10.0-rc.45 → 2025.10.0-rc.47

package/src/surfaces/checkout/preact/tests/market.test.tsx

@@ -1,19 +1,29 @@
 import {useLocalizationMarket} from '../market';
 
-import {mount, createMockStatefulRemoteSubscribable} from './mount';
+// See __mocks__/preact/hooks
+jest.mock('preact/hooks');
+
+import {
+  mount,
+  createMockSubscribableSignalLike,
+  setupGlobalShopifyMock,
+  tearDownGlobalShopifyMock,
+} from './mount';
+
+describe('useLocalizationMarket', () => {
+  afterEach(tearDownGlobalShopifyMock);
 
-describe.skip('useLocalizationMarket', () => {
   it('returns market from the api', () => {
     const market = {id: 'gid://shopify/Market/123', handle: 'apac'};
 
-    const {value} = mount.hook(() => useLocalizationMarket(), {
-      extensionApi: {
-        localization: {
-          market: createMockStatefulRemoteSubscribable(market),
-        },
+    setupGlobalShopifyMock({
+      localization: {
+        market: createMockSubscribableSignalLike(market),
       },
     });
 
+    const {value} = mount.hook(() => useLocalizationMarket());
+
     expect(value).toStrictEqual(market);
   });
 });

package/src/surfaces/checkout/preact/tests/metafield.test.tsx

@@ -1,15 +1,21 @@
 import {faker} from '@faker-js/faker';
 
-import type {Metafield} from '@shopify/ui-extensions/checkout';
+import type {Metafield} from '../../api/standard/standard';
 
 import {useMetafield} from '../metafield';
 
-import {createMockStatefulRemoteSubscribable, mount} from './mount';
+import {
+  createMockSubscribableSignalLike,
+  mount,
+  setupGlobalShopifyMock,
+  tearDownGlobalShopifyMock,
+} from './mount';
 
-describe.skip('useMetafields', () => {
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
+// See __mocks__/preact/hooks
+jest.mock('preact/hooks');
+
+describe('useMetafields', () => {
+  afterEach(tearDownGlobalShopifyMock);
 
   function createMetafield(props: Partial<Metafield> = {}): Metafield {
     return {
@@ -28,18 +34,16 @@ describe.skip('useMetafields', () => {
   it('returns undefined metafield', () => {
     const metafieldCount = 10;
 
-    const extensionApi = {
-      metafields: createMockStatefulRemoteSubscribable(
+    setupGlobalShopifyMock({
+      metafields: createMockSubscribableSignalLike(
         createMetafields(metafieldCount),
-      ),
-    };
+      ) as any,
+    });
 
     const namespace = 'test_namespace';
     const key = 'test_key';
 
-    const {value} = mount.hook(() => useMetafield({namespace, key}), {
-      extensionApi,
-    });
+    const {value} = mount.hook(() => useMetafield({namespace, key}));
 
     expect(value).toBeUndefined();
   });
@@ -51,12 +55,12 @@ describe.skip('useMetafields', () => {
 
     const metafields = [newNamespace, ...createMetafields()];
 
-    const {value} = mount.hook(() => useMetafield({namespace, key}), {
-      extensionApi: {
-        metafields: createMockStatefulRemoteSubscribable(metafields),
-      },
+    setupGlobalShopifyMock({
+      metafields: createMockSubscribableSignalLike(metafields),
     });
 
+    const {value} = mount.hook(() => useMetafield({namespace, key}));
+
     expect(value?.namespace).toStrictEqual(namespace);
     expect(value?.key).toStrictEqual(key);
   });
@@ -64,21 +68,16 @@ describe.skip('useMetafields', () => {
   it('throws an error if no namespace is provided with key', () => {
     jest.spyOn(console, 'error').mockImplementation();
 
-    const extensionApi = {
-      metafields: createMockStatefulRemoteSubscribable(createMetafields()),
-    };
+    setupGlobalShopifyMock({
+      metafields: createMockSubscribableSignalLike(createMetafields()) as any,
+    });
 
     expect(() =>
-      mount.hook(
-        () =>
-          useMetafield({
-            // @ts-expect-error: expected to fail
-            namespace: undefined,
-            key: 'test_key',
-          }),
-        {
-          extensionApi,
-        },
+      mount.hook(() =>
+        useMetafield({
+          namespace: undefined as unknown as string,
+          key: 'test_key',
+        }),
       ),
     ).toThrow('You must pass in both a namespace and key');
   });
@@ -86,16 +85,14 @@ describe.skip('useMetafields', () => {
   it('throws an error if no key is provided with namespace', () => {
     jest.spyOn(console, 'error').mockImplementation();
 
-    const extensionApi = {
-      metafields: createMockStatefulRemoteSubscribable(createMetafields()),
-    };
+    setupGlobalShopifyMock({
+      metafields: createMockSubscribableSignalLike(createMetafields()) as any,
+    });
 
     const key = undefined as unknown as string;
 
     expect(() =>
-      mount.hook(() => useMetafield({namespace: 'test_namespace', key}), {
-        extensionApi,
-      }),
+      mount.hook(() => useMetafield({namespace: 'test_namespace', key})),
     ).toThrow('You must pass in both a namespace and key');
   });
 });

package/src/surfaces/checkout/preact/tests/metafields.test.tsx

@@ -1,15 +1,21 @@
 import {faker} from '@faker-js/faker';
 
-import type {Metafield} from '@shopify/ui-extensions/checkout';
+import type {Metafield} from '../../api/standard/standard';
 
 import {useMetafields} from '../metafields';
 
-import {createMockStatefulRemoteSubscribable, mount} from './mount';
+import {
+  createMockSubscribableSignalLike,
+  mount,
+  setupGlobalShopifyMock,
+  tearDownGlobalShopifyMock,
+} from './mount';
 
-describe.skip('useMetafields', () => {
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
+// See __mocks__/preact/hooks
+jest.mock('preact/hooks');
+
+describe('useMetafields', () => {
+  afterEach(tearDownGlobalShopifyMock);
 
   function createMetafield(props: Partial<Metafield> = {}): Metafield {
     return {
@@ -28,14 +34,14 @@ describe.skip('useMetafields', () => {
   it('returns all metafields', () => {
     const metafieldCount = 10;
 
-    const {value} = mount.hook(() => useMetafields(), {
-      extensionApi: {
-        metafields: createMockStatefulRemoteSubscribable(
-          createMetafields(metafieldCount),
-        ),
-      },
+    setupGlobalShopifyMock({
+      metafields: createMockSubscribableSignalLike(
+        createMetafields(metafieldCount),
+      ) as any,
     });
 
+    const {value} = mount.hook(() => useMetafields());
+
     expect(value).toHaveLength(metafieldCount);
   });
 
@@ -49,18 +55,18 @@ describe.skip('useMetafields', () => {
 
     const metafields = [newNamespace, newNamespace2, ...createMetafields()];
 
-    const {value} = mount.hook(() => useMetafields({namespace}), {
-      extensionApi: {
-        metafields: createMockStatefulRemoteSubscribable(metafields),
-      },
+    setupGlobalShopifyMock({
+      metafields: createMockSubscribableSignalLike(metafields),
     });
 
+    const {value} = mount.hook(() => useMetafields({namespace}));
+
     expect(value).toHaveLength(2);
 
     expect(value[0].namespace).toStrictEqual(namespace);
-    expect(value[1].namespace).toStrictEqual(namespace);
-
     expect(value[0].key).toStrictEqual(key);
+
+    expect(value[1].namespace).toStrictEqual(namespace);
     expect(value[1].key).toStrictEqual(key2);
   });
 
@@ -69,54 +75,31 @@ describe.skip('useMetafields', () => {
     const key = 'test_key';
     const newNamespace = createMetafield({namespace, key});
 
-    const metafields = [newNamespace, ...createMetafields()];
+    const key2 = 'test_key2';
+    const newNamespace2 = createMetafield({namespace, key: key2});
 
-    const {value} = mount.hook(() => useMetafields({namespace, key}), {
-      extensionApi: {
-        metafields: createMockStatefulRemoteSubscribable(metafields),
-      },
+    const metafields = [newNamespace, newNamespace2, ...createMetafields()];
+
+    setupGlobalShopifyMock({
+      metafields: createMockSubscribableSignalLike(metafields),
     });
 
+    const {value} = mount.hook(() => useMetafields({namespace, key}));
+
     expect(value).toHaveLength(1);
     expect(value[0].namespace).toStrictEqual(namespace);
     expect(value[0].key).toStrictEqual(key);
   });
 
-  it('returns an empty array if no matches are found', () => {
-    const namespace = 'test_namespace';
-    const key = 'test_key';
-
-    const metafields = createMetafields();
-
-    const extensionApi = {
-      metafields: createMockStatefulRemoteSubscribable(metafields),
-    };
-
-    const namespaceSearch = mount.hook(() => useMetafields({namespace}), {
-      extensionApi,
-    });
-
-    const keySearch = mount.hook(() => useMetafields({namespace, key}), {
-      extensionApi,
-    });
-
-    expect(namespaceSearch.value).toHaveLength(0);
-    expect(keySearch.value).toHaveLength(0);
-  });
-
   it('throws an error if no namespace is provided with key', () => {
     jest.spyOn(console, 'error').mockImplementation();
 
-    const extensionApi = {
-      metafields: createMockStatefulRemoteSubscribable(createMetafields()),
-    };
-
-    const namespace = undefined as unknown as string;
+    setupGlobalShopifyMock({
+      metafields: createMockSubscribableSignalLike(createMetafields()) as any,
+    });
 
     expect(() =>
-      mount.hook(() => useMetafields({namespace, key: 'test_key'}), {
-        extensionApi,
-      }),
+      mount.hook(() => useMetafields({key: 'test_key'} as any)),
     ).toThrow('You must pass in a namespace with a key');
   });
 });

package/src/surfaces/checkout/preact/tests/mount.tsx

@@ -1,27 +1,28 @@
 import {createRender} from '@quilted/react-testing';
 import type {SubscribableSignalLike} from '../../shared';
+import type {ExtensionTargets} from '../../extension-targets';
 
 import type {
   ApiForExtension,
   RenderExtensionTarget,
-} from '@shopify/ui-extensions/checkout';
+} from '../../extension-targets';
+import type {Extension} from '../../api/standard/standard';
 
-// eslint-disable-next-line no-warning-comments
-// TODO: remove the context and change all tests to use a mock
-// version of the shopify global API in beforeEach().
-import {ExtensionApiContext} from '../../context';
+declare global {
+  namespace NodeJS {
+    interface Global {
+      shopify: any;
+    }
+  }
+}
 
 export const mount = createRender<Options, Options>({
-  context(options) {
+  context(options: Options) {
     return options;
   },
 
-  render(element, {extensionApi}) {
-    return (
-      <ExtensionApiContext.Provider value={extensionApi as any}>
-        {element}
-      </ExtensionApiContext.Provider>
-    );
+  render(element: any) {
+    return element;
   },
 });
 
@@ -33,20 +34,62 @@ export type PartialExtensionApi = DeepPartial<
   ApiForExtension<RenderExtensionTarget>
 >;
 
-interface Options {
-  extensionApi?: PartialExtensionApi;
-}
+interface Options {}
 
-export function createMockStatefulRemoteSubscribable<T>(
+export function createMockSubscribableSignalLike<T>(
   value: T,
 ): SubscribableSignalLike<T> {
   const subscribable: SubscribableSignalLike<T> = {
     get current() {
       return value;
     },
-    subscribe: jest.fn(),
+    get value() {
+      return value;
+    },
+    subscribe: jest.fn(() => () => {}),
     destroy: jest.fn(),
   };
 
   return subscribable;
 }
+
+/**
+ * Helper function to set up the global shopify mock with type safety
+ * @param mockData Deep partial mock data for the API
+ */
+export function setupGlobalShopifyMock<
+  Target extends RenderExtensionTarget = 'purchase.checkout.block.render',
+>(mockData: DeepPartial<ExtensionTargets[Target]['api']>): void {
+  const finalMockData = {
+    extension: createMockExtension<Target>(
+      'purchase.checkout.block.render' as Target,
+    ),
+    ...mockData,
+  } as DeepPartial<ExtensionTargets[Target]['api']>;
+
+  (globalThis as any).shopify = finalMockData;
+}
+
+/**
+ * Helper function to tear down the global shopify mock
+ * Call this in afterEach() to clean up the global shopify object and clear all mocks
+ */
+export function tearDownGlobalShopifyMock(): void {
+  delete (globalThis as any).shopify;
+  jest.clearAllMocks();
+}
+
+/**
+ * Helper function to create a minimal extension object for testing
+ */
+export function createMockExtension<Target extends RenderExtensionTarget>(
+  target: Target,
+): Extension<Target> {
+  return {
+    target,
+    apiVersion: '2023-07',
+    capabilities: createMockSubscribableSignalLike([]),
+    rendered: createMockSubscribableSignalLike(true),
+    scriptUrl: 'https://example.com/script.js',
+  };
+}

package/src/surfaces/checkout/preact/tests/notes.test.tsx

@@ -1,15 +1,25 @@
 import {useNote} from '../note';
 
-import {mount, createMockStatefulRemoteSubscribable} from './mount';
+// See __mocks__/preact/hooks
+jest.mock('preact/hooks');
+
+import {
+  mount,
+  createMockSubscribableSignalLike,
+  setupGlobalShopifyMock,
+  tearDownGlobalShopifyMock,
+} from './mount';
+
+describe('useNote', () => {
+  afterEach(tearDownGlobalShopifyMock);
 
-describe.skip('useNote', () => {
   it('returns the current order note', async () => {
     const note = 'the note';
-    const extensionApi = {
-      note: createMockStatefulRemoteSubscribable(note),
-    };
+    setupGlobalShopifyMock({
+      note: createMockSubscribableSignalLike(note),
+    });
 
-    const {value} = mount.hook(() => useNote(), {extensionApi});
+    const {value} = mount.hook(() => useNote());
 
     expect(value).toBe(note);
   });

package/src/surfaces/checkout/preact/tests/payment-method.test.ts

@@ -1,116 +1,143 @@
-import type {ExtensionTarget} from '@shopify/ui-extensions/checkout';
+import type {ExtensionTarget} from '../../extension-targets';
+
+// See __mocks__/preact/hooks
+jest.mock('preact/hooks');
 
 import {
   useApplyPaymentMethodAttributesChange,
   usePaymentMethodAttributeValues,
   usePaymentMethodAttributes,
 } from '../payment-method';
-import {ExtensionHasNoMethodError, ScopeNotGrantedError} from '../../errors';
+import {
+  createMockSubscribableSignalLike,
+  mount,
+  setupGlobalShopifyMock,
+  tearDownGlobalShopifyMock,
+  createMockExtension,
+} from './mount';
 
-import {createMockStatefulRemoteSubscribable, mount} from './mount';
+describe('Payment Method API hooks', () => {
+  afterEach(tearDownGlobalShopifyMock);
 
-describe.skip('Payment Method API hooks', () => {
   describe('usePaymentMethodAttributes', () => {
     const paymentMethodAttributes = [{key: 'test_key', value: 'test_value'}];
 
     it('returns the paymentMethodAttributes value', async () => {
-      const {value} = mount.hook(() => usePaymentMethodAttributes(), {
-        extensionApi: {
-          paymentMethodAttributes: createMockStatefulRemoteSubscribable(
-            paymentMethodAttributes,
-          ),
-        },
+      const target =
+        'purchase.checkout.payment-option-item.details.render' as const;
+      setupGlobalShopifyMock<typeof target>({
+        paymentMethodAttributes: createMockSubscribableSignalLike(
+          paymentMethodAttributes,
+        ),
+        extension: createMockExtension(target),
       });
+
+      const {value} = mount.hook(() => usePaymentMethodAttributes());
       expect(value).toBe(paymentMethodAttributes);
     });
 
     it('raises when paymentMethodAttributes is not available', async () => {
-      const runner = async () => {
-        return mount.hook(() => usePaymentMethodAttributes(), {
-          extensionApi: {},
-        });
-      };
-      await expect(runner).rejects.toThrow(ScopeNotGrantedError);
+      setupGlobalShopifyMock({});
+
+      expect(() => {
+        mount.hook(() => usePaymentMethodAttributes());
+      }).toThrow(
+        expect.objectContaining({
+          name: 'ScopeNotGrantedError',
+        }),
+      );
     });
   });
 
   describe('usePaymentMethodAttributeValues', () => {
     const paymentMethodAttributes = [{key: 'test_key', value: 'test_value'}];
-    const extensionApi = {
-      paymentMethodAttributes: createMockStatefulRemoteSubscribable(
-        paymentMethodAttributes,
-      ),
-    };
 
     it('returns the paymentMethodAttributes values', async () => {
-      const {value} = mount.hook(
-        () => usePaymentMethodAttributeValues(['test_key']),
-        {extensionApi},
+      const target =
+        'purchase.checkout.payment-option-item.details.render' as const;
+      setupGlobalShopifyMock<typeof target>({
+        paymentMethodAttributes: createMockSubscribableSignalLike(
+          paymentMethodAttributes,
+        ),
+        extension: createMockExtension(target),
+      });
+
+      const {value} = mount.hook(() =>
+        usePaymentMethodAttributeValues(['test_key']),
       );
       expect(value).toStrictEqual(['test_value']);
     });
 
     it('returns undefined for not found keys', async () => {
-      const {value} = mount.hook(
-        () => usePaymentMethodAttributeValues(['test_key', 'test_key3']),
-        {extensionApi},
+      const target =
+        'purchase.checkout.payment-option-item.details.render' as const;
+      setupGlobalShopifyMock<typeof target>({
+        paymentMethodAttributes: createMockSubscribableSignalLike(
+          paymentMethodAttributes,
+        ),
+        extension: createMockExtension(target),
+      });
+
+      const {value} = mount.hook(() =>
+        usePaymentMethodAttributeValues(['test_key', 'test_key3']),
       );
       expect(value).toStrictEqual(['test_value', undefined]);
     });
 
     it('returns an empty array if payment attributes object is undefined', async () => {
-      const {value} = mount.hook(
-        () => usePaymentMethodAttributeValues(['test_key', 'test_key3']),
+      setupGlobalShopifyMock<'purchase.checkout.payment-option-item.details.render'>(
         {
-          extensionApi: {
-            paymentMethodAttributes:
-              createMockStatefulRemoteSubscribable(undefined),
-          },
+          paymentMethodAttributes: createMockSubscribableSignalLike(undefined),
         },
       );
+
+      const {value} = mount.hook(() =>
+        usePaymentMethodAttributeValues(['test_key', 'test_key3']),
+      );
       expect(value).toStrictEqual([]);
     });
 
     it('returns an empty array if payment attributes object is an empty array', async () => {
-      const {value} = mount.hook(
-        () => usePaymentMethodAttributeValues(['test_key', 'test_key3']),
+      setupGlobalShopifyMock<'purchase.checkout.payment-option-item.details.render'>(
         {
-          extensionApi: {
-            paymentMethodAttributes: createMockStatefulRemoteSubscribable([]),
-          },
+          paymentMethodAttributes: createMockSubscribableSignalLike([]),
         },
       );
+
+      const {value} = mount.hook(() =>
+        usePaymentMethodAttributeValues(['test_key', 'test_key3']),
+      );
       expect(value).toStrictEqual([]);
     });
   });
 
   describe('useApplyPaymentMethodAttributesChange()', () => {
     it('returns the applyPaymentMethodAttributesChange function', async () => {
-      const target: ExtensionTarget =
-        'purchase.checkout.payment-option-item.details.render';
-      const extensionApi = {
-        applyPaymentMethodAttributesChange: jest.fn,
-        extension: {target},
-      };
-      const {value} = mount.hook(
-        () => useApplyPaymentMethodAttributesChange(),
-        {
-          extensionApi,
-        },
-      );
-      expect(value).toBe(jest.fn);
+      const target =
+        'purchase.checkout.payment-option-item.details.render' as const;
+      const applyPaymentMethodAttributesChange = jest.fn();
+      setupGlobalShopifyMock<typeof target>({
+        applyPaymentMethodAttributesChange,
+        extension: createMockExtension(target),
+      });
+
+      const {value} = mount.hook(() => useApplyPaymentMethodAttributesChange());
+      expect(value).toBe(applyPaymentMethodAttributesChange);
     });
 
     it('raises when applyPaymentMethodAttributesChange is not available', async () => {
-      const runner = async () => {
-        const target: ExtensionTarget = 'purchase.checkout.block.render';
-        return mount.hook(() => useApplyPaymentMethodAttributesChange(), {
-          extensionApi: {
-            extension: {target},
-          },
-        });
-      };
-      await expect(runner).rejects.toThrow(ExtensionHasNoMethodError);
+      const target: ExtensionTarget = 'purchase.checkout.block.render';
+      setupGlobalShopifyMock({
+        extension: createMockExtension(target),
+      });
+
+      expect(() => {
+        mount.hook(() => useApplyPaymentMethodAttributesChange());
+      }).toThrow(
+        expect.objectContaining({
+          name: 'ExtensionHasNoMethodError',
+        }),
+      );
     });
   });
 });