Add a testing library for ui-extensions

[kumar303]

This adds a new ui-extensions-tester library, built during Hack Days (internal Shopify link).

All stacks

• 🥞 ui-extensions-tester package setup <-- you are here
• 🥞 A complete mock checkout API
• 🥞 A complete mock point-of-sale API
• 🥞 A complete mock customer-account API
• 🥞 A complete mock Admin API

👁️ How to review this PR

• 📖 Read the developer-facing documentation
• See one of the stacks above to view surface-specific mocks

Example

Here's what it looks like so far in something like your-app/extensions/your-ui-extension/tests/Extension.test.ts:

import {expect, test, beforeEach, afterEach} from 'vitest';
import {setUpExtension} from '@shopify/ui-extensions-tester';

// This reads from ../shopify.extension.toml
const extension = getExtension('purchase.checkout.block.render');

beforeEach(() => {
  extension.setUp();
});

afterEach(() => {
  extension.tearDown();
});

test('renders an Enter button', async () => {
  await extension.render();
  const button = extension.querySelector('s-button');
  expect(button!.textContent).toEqual('Enter');
});

More complete example: checkout-basic-testing-example/tests/Checkout.test.ts

---

Run it like this after checking out the branch for this PR:

yarn build
pushd examples/testing/checkout-basic-testing-example
npm install
npm test

[kumar303]

• Create mocks for the entire Admin extension API #3914
• Create mocks for the entire Customer Account extension API #3905
• 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 👈 (View in Graphite)
• 2026-04-rc

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