Skip to content

Comments

Add a testing library for ui-extensions#3899

Open
kumar303 wants to merge 1 commit into2026-04-rcfrom
02-11-create_a_testing_library_for_ui-extensions_proof_of_concept_
Open

Add a testing library for ui-extensions#3899
kumar303 wants to merge 1 commit into2026-04-rcfrom
02-11-create_a_testing_library_for_ui-extensions_proof_of_concept_

Conversation

@kumar303
Copy link
Contributor

@kumar303 kumar303 commented Feb 11, 2026

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

All stacks

👁️ How to review this PR

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

Copy link
Contributor Author

kumar303 commented Feb 11, 2026

@kumar303 kumar303 force-pushed the 02-11-create_a_testing_library_for_ui-extensions_proof_of_concept_ branch 24 times, most recently from 3d22f8d to 1f8f47e Compare February 12, 2026 11:53
@kumar303 kumar303 force-pushed the 02-11-create_a_testing_library_for_ui-extensions_proof_of_concept_ branch from 1f8f47e to 562a606 Compare February 13, 2026 15:11
@kumar303 kumar303 force-pushed the 02-11-create_a_testing_library_for_ui-extensions_proof_of_concept_ branch 2 times, most recently from 12135fb to 148cced Compare February 16, 2026 11:34
@kumar303 kumar303 changed the title Create a testing library for ui-extensions (proof of concept) Add a testing library for ui-extensions Feb 17, 2026
@kumar303 kumar303 force-pushed the 02-11-create_a_testing_library_for_ui-extensions_proof_of_concept_ branch 14 times, most recently from b51dc56 to e98803a Compare February 24, 2026 11:29
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can ignore this file. The full checkout API gets added in another stack.

@kumar303 kumar303 force-pushed the 02-11-create_a_testing_library_for_ui-extensions_proof_of_concept_ branch 2 times, most recently from bdf2921 to 2388be3 Compare February 24, 2026 14:11
@kumar303 kumar303 marked this pull request as ready for review February 24, 2026 14:26
@kumar303 kumar303 force-pushed the 02-11-create_a_testing_library_for_ui-extensions_proof_of_concept_ branch from 2388be3 to 4961fee Compare February 24, 2026 15:35
@@ -0,0 +1,363 @@
# 🧪 @shopify/ui-extensions-tester
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: naming. Random thoughts without much merit:

  • ui-extensions-testing-library - similar to React Testing Library
  • ui-extensions-test- shorter for no good reason

Comment on lines +140 to +147
const configSearchDir =
options?.configSearchDir ?? path.dirname(getCallerFile());
const tomlPath = findToml(configSearchDir);
const tomlDir = path.dirname(tomlPath);
const tomlContent = fs.readFileSync(tomlPath, 'utf-8');
validateApiVersion(tomlContent);
const modulePath = parseTargetModule(tomlContent, target);
const resolvedModule = path.resolve(tomlDir, modulePath);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fail fast here or wait until calling .render()?

@kumar303 kumar303 force-pushed the 02-11-create_a_testing_library_for_ui-extensions_proof_of_concept_ branch from 4961fee to 6e9d610 Compare February 24, 2026 16:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants