Create mocks for the entire Customer Account extension API

[kumar303]

Follow up to #3899 that adds a complete, type-safe mock of the Customer Account extension API

👁️ How to review this PR

• 📖 Read the main developer-facing documentation
• 📖 Read the Customer Account specific documentation
• Try running tests in the example app on this branch

[kumar303]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• Create mocks for the entire Admin extension API #3914
• Create mocks for the entire Customer Account extension API #3905 👈 (View in Graphite)
• Create mocks for the entire point-of-sale extension API #3904
• Create mocks for the entire checkout extension API #3902
• Add a testing library for ui-extensions #3899
• 2026-04-rc

This stack of pull requests is managed by Graphite. Learn more about stacking.

[robin-drexler]

Should we also add the navigation api? https://shopify.dev/docs/api/customer-account-ui-extensions/latest/apis/navigation

navigate is available in all targets, full page extensions have more properties available

[kumar303]

oh yeah. Is this available for Admin, too? I can't tell.

[kumar303]

I added a mock for all surfaces (on the base branch). Good call, thanks!

[robin-drexler]

Why all surfaces? 😅 Checkout doesn't have it, right?

[kumar303]

if at least two surfaces include it then I think it's good to include it everywhere. We could make navigate() throw an error if the extension under test is in an unsupported target.

[robin-drexler]

Tried to run tests, but it failed to resolve the package.
Any other commands I gotta run despite yarn in the main package and npm i in the test example app?

 extensions/customer-account-testing-example/tests/OrderStatusBlock.test.ts [ extensions/customer-account-testing-example/tests/OrderStatusBlock.test.ts ]
Error: Failed to resolve entry for package "@shopify/ui-extensions-tester". The package may have incorrect main/module/exports specified in its package.json.
  Plugin: vite:import-analysis
  File: /Users/robindrexler/src/github.com/Shopify/ui-extensions/examples/testing/customer-account-testing-example/extensions/customer-account-testing-example/tests/OrderStatusBlock.test.ts:5:27
  1  |  import { expect, test, beforeEach, afterEach } from "vitest";
  2  |  import { getExtension } from "@shopify/ui-extensions-tester";
     |                                ^
  3  |  const extension = getExtension(
  4  |    "customer-account.order-status.block.render"
 ❯ packageEntryFailure node_modules/vite/dist/node/chunks/config.js:32816:32
 ❯ resolvePackageEntry node_modules/vite/dist/node/chunks/config.js:32813:2
 ❯ tryNodeResolve node_modules/vite/dist/node/chunks/config.js:32716:70
 ❯ ResolveIdContext.handler node_modules/vite/dist/node/chunks/config.js:32555:16
 ❯ EnvironmentPluginContainer.resolveId node_modules/vite/dist/node/chunks/config.js:28717:56
 ❯ TransformPluginContext.resolve node_modules/vite/dist/node/chunks/config.js:28929:13
 ❯ normalizeUrl node_modules/vite/dist/node/chunks/config.js:27111:22
 ❯ node_modules/vite/dist/node/chunks/config.js:27177:32

[kumar303]

Hmm, this is working for me. Is this what you did?

yarn build
pushd examples/testing/customer-account-testing-example
npm install
npm test

[robin-drexler]

Hmm, this is working for me. Is this what you did?

yarn build
pushd examples/testing/customer-account-testing-example
npm install
npm test

ah nope, didn't run the yarn build step. 🤦‍♂️ Thanks

[robin-drexler]

Not sure if expected, after running yarn, I have diff in the yarn.lock

diff --git a/yarn.lock b/yarn.lock
index ecd4402ac..9094c8db4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2024,6 +2024,13 @@
   resolved "https://registry.npmjs.org/@shopify/typescript-configs/-/typescript-configs-5.1.0.tgz"
   integrity sha512-RywGBTR+nQyJLxcrUcihPkHPIG3pIQI6i0YwMrM5rs9nWJ0+9A5HKEcboyGPLH+8V08EXGfFQ6H820O9ajyk4A==

+"@shopify/ui-extensions@*":
+  version "2026.1.2"
+  resolved "https://npm.shopify.io/node/@shopify/ui-extensions/-/ui-extensions-2026.1.2.tgz#2599a6bf6063640f467a3c3ff2ab80afbd2de9d0"
+  integrity sha512-lngck7uPBcpMrL36cw/7NJCBsagIleB6dw/hrxEtW600PdPoOUoUyhOnsjM4J5NCheNGD4Ar2h/a0zh2ki9QXw==
+  dependencies:
+    ts-morph "^25.0.1"
+
 "@sinclair/typebox@^0.24.1":
   version "0.24.51"
   resolved "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz"

[robin-drexler]

@kumar303 why did you choose to have all those examples be packages that use npm and handle their own locks etc?

Why not make them part of the workspaces for easier dependency management?

[kumar303]

I updated all the example readmes to specify the build step. As for yarn.lock, that's probably because you're not at the top of the stack. I might have to fix yarn.local after it all merges anyway.

[kumar303]

Why not make them part of the workspaces

probably no good reason. I didn't think I could make nested example directories part of the workspace.

[kumar303]

and yarn is weird

[robin-drexler]

This is amazing. I haven't (yet) looked into how the sausage is made exactly, but the test experience looks good at a glance!

[robin-drexler]

nit: why not setup?