Create mocks for the entire checkout extension API

Author: kumar303

examples/testing/checkout-basic-testing-example/.gitignore

@@ -0,0 +1,29 @@
+# Environment Configuration
+.env
+.env.*
+
+# Dependency directory
+node_modules
+
+# Test coverage directory
+coverage
+
+# Ignore Apple macOS Desktop Services Store
+.DS_Store
+
+# Logs
+logs
+*.log
+
+# extensions build output
+extensions/*/build
+extensions/*/dist
+
+# lock files
+
+
+
+
+# Ignore shopify files created during app dev
+.shopify/*
+.shopify.lock

examples/testing/checkout-basic-testing-example/.graphqlrc.js

@@ -0,0 +1,30 @@
+const fs = require("node:fs");
+
+function getConfig() {
+  const config = {
+    projects: {},
+  };
+
+  let extensions = [];
+  try {
+    extensions = fs.readdirSync("./extensions");
+  } catch {
+    // ignore if no extensions
+  }
+
+  for (const entry of extensions) {
+    const extensionPath = `./extensions/${entry}`;
+    const schema = `${extensionPath}/schema.graphql`;
+    if (!fs.existsSync(schema)) {
+      continue;
+    }
+    config.projects[entry] = {
+      schema,
+      documents: [`${extensionPath}/**/*.graphql`],
+    };
+  }
+
+  return config;
+}
+
+module.exports = getConfig();

examples/testing/checkout-basic-testing-example/README.md

@@ -0,0 +1,16 @@
+This extension was created with:
+
+```
+shopify app init --name checkout-basic-testing-example
+cd checkout-basic-testing-example
+shopify app generate extension
+# I chose 'Checkout UI'
+```
+
+See it in action:
+
+```
+npm install
+npm run typecheck
+npm test
+```

examples/testing/checkout-basic-testing-example/extensions/.gitkeep

@@ -0,0 +1 @@
+Instructions are in [app's README](../../)

examples/testing/checkout-basic-testing-example/extensions/checkout-basic-testing-example/README.md

@@ -0,0 +1,6 @@
+{
+  "welcome": "Welcome to the {{target}} extension!",
+  "iWouldLikeAFreeGiftWithMyOrder": "I would like to receive a free gift with my order",
+  "addAFreeGiftToMyOrder": "Add a free gift to my order",
+  "attributeChangesAreNotSupported": "Attribute changes are not supported in this checkout"
+}

examples/testing/checkout-basic-testing-example/extensions/checkout-basic-testing-example/locales/en.default.json

@@ -0,0 +1,6 @@
+{
+  "welcome": "Bienvenue dans l'extension {{target}}!",
+  "iWouldLikeAFreeGiftWithMyOrder": "Je souhaite recevoir un cadeau gratuit avec ma commande",
+  "addAFreeGiftToMyOrder": "Ajouter un cadeau gratuit à ma commande",
+  "attributeChangesAreNotSupported": "Les modifications d'attribut ne sont pas prises en charge dans cette commande"
+}

examples/testing/checkout-basic-testing-example/extensions/checkout-basic-testing-example/locales/fr.json

@@ -0,0 +1,11 @@
+{
+  "name": "checkout-basic-testing-example",
+  "private": true,
+  "version": "1.0.0",
+  "license": "UNLICENSED",
+  "dependencies": {
+    "preact": "^10.10.x",
+    "@preact/signals": "^2.3.x",
+    "@shopify/ui-extensions": "2026.1.x"
+  }
+}

examples/testing/checkout-basic-testing-example/extensions/checkout-basic-testing-example/package.json

@@ -0,0 +1,8 @@
+import '@shopify/ui-extensions';
+/// <reference path="../../node_modules/@shopify/ui-extensions/build/ts/surfaces/checkout/targets/purchase.checkout.block.render.d.ts" />
+
+//@ts-ignore
+declare module './src/Checkout.jsx' {
+  const shopify: import('@shopify/ui-extensions/purchase.checkout.block.render').Api;
+  const globalThis: { shopify: typeof shopify };
+}

examples/testing/checkout-basic-testing-example/extensions/checkout-basic-testing-example/shopify.d.ts

@@ -0,0 +1,52 @@
+# Learn more about configuring your checkout UI extension:
+# https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration
+
+# The version of APIs your extension will receive. Learn more:
+# https://shopify.dev/docs/api/usage/versioning
+api_version = "2026-01"
+
+[[extensions]]
+name = "checkout-basic-testing-example"
+handle = "checkout-basic-testing-example"
+type = "ui_extension"
+uid = "4aeff854-b3f4-8d93-1398-b0fa7256818fc0502641"
+
+# Controls where in Shopify your extension will be injected,
+# and the file that contains your extension’s source code. Learn more:
+# https://shopify.dev/docs/api/checkout-ui-extensions/latest/extension-targets-overview
+
+[[extensions.targeting]]
+module = "./src/Checkout.jsx"
+target = "purchase.checkout.block.render"
+
+[extensions.capabilities]
+# Gives your extension access to directly query Shopify’s storefront API.
+# https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#api-access
+api_access = true
+
+# Gives your extension access to make external network calls, using the
+# JavaScript `fetch()` API. Learn more:
+# https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#network-access
+# network_access = true
+
+# Loads metafields on checkout resources, including the cart,
+# products, customers, and more. Learn more:
+# https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#metafields
+
+# [[extensions.metafields]]
+# namespace = "my_namespace"
+# key = "my_key"
+# [[extensions.metafields]]
+# namespace = "my_namespace"
+# key = "my_other_key"
+
+# Defines settings that will be collected from merchants installing
+# your extension. Learn more:
+# https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#settings-definition
+
+# [extensions.settings]
+# [[extensions.settings.fields]]
+# key = "banner_title"
+# type = "single_line_text_field"
+# name = "Banner title"
+# description = "Enter a title for the banner"