diff --git a/packages/v4/migration/Accordion/Accordion.spec.ts b/packages/v4/migration/Accordion/Accordion.spec.ts
index 1bb4bb6e..ab97d5e2 100644
--- a/packages/v4/migration/Accordion/Accordion.spec.ts
+++ b/packages/v4/migration/Accordion/Accordion.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponent } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { resetDom, settle } from '../../src/test/index.js';
 import { Accordion } from './Accordion.js';
 import { AccordionItem } from './AccordionItem.js';
 
diff --git a/packages/v4/migration/Action/Action.spec.ts b/packages/v4/migration/Action/Action.spec.ts
index f275c693..fad610f5 100644
--- a/packages/v4/migration/Action/Action.spec.ts
+++ b/packages/v4/migration/Action/Action.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { Base, registerComponents, swap, SWAP_MODES, type BaseConfig } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { mount, resetDom, settle } from '../../src/test/index.js';
 import { Dialog } from '../Dialog/Dialog.js';
 import { Action } from './Action.js';
 import { ActionEvent } from './ActionEvent.js';
@@ -35,14 +36,6 @@ registerComponents(Action, Target, Foo, Bar, Dialog, MountProbe);
 
 afterEach(resetDom);
 
-async function render(html: string): Promise<HTMLElement> {
-  const root = document.createElement('div');
-  root.innerHTML = html;
-  document.body.append(root);
-  await settle();
-  return root;
-}
-
 function at<T extends Base>(root: ParentNode, selector: string, name: string): T {
   return getInstance<T>(root.querySelector(selector), name);
 }
@@ -57,7 +50,7 @@ const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
 describe('ActionEvent — parsing and the effect evaluator', () => {
   it('compiles a callable effect from the effect definition', async () => {
-    const root = await render('<div id="action" data-component="Action"></div>');
+    const root = await mount('<div id="action" data-component="Action"></div>');
     const action = at<Action>(root, '#action', 'Action');
     const spy = vi.spyOn(console, 'log').mockImplementation(() => {});
 
@@ -70,7 +63,7 @@ describe('ActionEvent — parsing and the effect evaluator', () => {
   });
 
   it('returns a callable function from the effect property', async () => {
-    const root = await render('<div id="action" data-component="Action"></div>');
+    const root = await mount('<div id="action" data-component="Action"></div>');
     const action = at<Action>(root, '#action', 'Action');
     const spy = vi.spyOn(console, 'log').mockImplementation(() => {});
 
@@ -85,7 +78,7 @@ describe('ActionEvent — parsing and the effect evaluator', () => {
   });
 
   it('parses modifiers and the debounce delay', async () => {
-    const root = await render('<div id="action" data-component="Action"></div>');
+    const root = await mount('<div id="action" data-component="Action"></div>');
     const action = at<Action>(root, '#action', 'Action');
 
     const plain = new ActionEvent(action, 'click.prevent.stop', 'target');
@@ -101,7 +94,7 @@ describe('ActionEvent — parsing and the effect evaluator', () => {
   });
 
   it('splits the target definition from the effect', async () => {
-    const root = await render('<div id="action" data-component="Action"></div>');
+    const root = await mount('<div id="action" data-component="Action"></div>');
     const action = at<Action>(root, '#action', 'Action');
 
     const actionEvent = new ActionEvent(action, 'click', ' Target(#a) Foo -> target.fn() ');
@@ -112,7 +105,7 @@ describe('ActionEvent — parsing and the effect evaluator', () => {
 
 describe('ActionEvent — target resolution', () => {
   it('resolves the target to the action itself when no target is set', async () => {
-    const root = await render('<div id="action" data-component="Action"></div>');
+    const root = await mount('<div id="action" data-component="Action"></div>');
     const action = at<Action>(root, '#action', 'Action');
 
     const actionEvent = new ActionEvent(action, 'click', '(...args) => args');
@@ -120,7 +113,7 @@ describe('ActionEvent — target resolution', () => {
   });
 
   it('resolves a single target', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="action" data-component="Action"></div>
       <div id="target" data-component="Target"></div>
     `);
@@ -132,7 +125,7 @@ describe('ActionEvent — target resolution', () => {
   });
 
   it('resolves multiple targets', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="action" data-component="Action"></div>
       <div id="target" data-component="Target"></div>
       <div id="foo" data-component="Foo"></div>
@@ -146,7 +139,7 @@ describe('ActionEvent — target resolution', () => {
   });
 
   it('resolves targets narrowed by a selector', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="action" data-component="Action"></div>
       <div id="a" data-component="Target"></div>
       <div id="b" data-component="Target"></div>
@@ -159,7 +152,7 @@ describe('ActionEvent — target resolution', () => {
   });
 
   it('ignores a target part it cannot parse', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="action" data-component="Action"></div>
       <div id="target" data-component="Target"></div>
     `);
@@ -171,7 +164,7 @@ describe('ActionEvent — target resolution', () => {
   });
 
   it('reaches a target that is neither a descendant nor an ancestor', async () => {
-    const root = await render(`
+    const root = await mount(`
       <section><button id="action" data-component="Action"
         data-on:click="Foo -> target.fn('far')"></button></section>
       <section><div><div id="foo" data-component="Foo"></div></div></section>
@@ -183,7 +176,7 @@ describe('ActionEvent — target resolution', () => {
   });
 
   it('resolves targets at event time, so a target mounting later is reached', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action" data-on:click="Foo -> target.fn()"></button>
     `);
 
@@ -200,7 +193,7 @@ describe('ActionEvent — target resolution', () => {
   });
 
   it('stops targeting a component once it is unmounted', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action" data-on:click="Foo -> target.fn()"></button>
       <div id="foo" data-component="Foo"></div>
     `);
@@ -219,7 +212,7 @@ describe('ActionEvent — target resolution', () => {
 
 describe('ActionEvent — modifiers', () => {
   it('prevents default and stops propagation', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="outer">
         <button id="action" data-component="Action"
           data-on:click.prevent.stop="Foo -> target.fn()"></button>
@@ -239,7 +232,7 @@ describe('ActionEvent — modifiers', () => {
   });
 
   it('forwards capture, once and passive to the listener options', async () => {
-    const root = await render('<div id="action" data-component="Action"></div>');
+    const root = await mount('<div id="action" data-component="Action"></div>');
     const action = at<Action>(root, '#action', 'Action');
     const spy = vi.spyOn(action.$el, 'addEventListener');
 
@@ -256,7 +249,7 @@ describe('ActionEvent — modifiers', () => {
   });
 
   it('runs a `once` binding exactly once', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action" data-on:click.once="Foo -> target.fn()"></button>
       <div id="foo" data-component="Foo"></div>
     `);
@@ -269,7 +262,7 @@ describe('ActionEvent — modifiers', () => {
   });
 
   it('debounces with the default delay', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action"
         data-on:click.debounce="Foo -> target.fn()"></button>
       <div id="foo" data-component="Foo"></div>
@@ -290,7 +283,7 @@ describe('ActionEvent — modifiers', () => {
   });
 
   it('debounces with a custom delay', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action"
         data-on:click.debounce300="Foo -> target.fn()"></button>
       <div id="foo" data-component="Foo"></div>
@@ -307,7 +300,7 @@ describe('ActionEvent — modifiers', () => {
   });
 
   it('drops a pending debounced effect when the action is unmounted', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action"
         data-on:click.debounce50="Foo -> target.fn()"></button>
       <div id="foo" data-component="Foo"></div>
@@ -325,7 +318,7 @@ describe('ActionEvent — modifiers', () => {
 
 describe('Action — the component', () => {
   it('reacts on click by default', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action"
         data-option-target="Foo" data-option-effect="target.fn()"></button>
       <div id="foo" data-component="Foo"></div>
@@ -336,7 +329,7 @@ describe('Action — the component', () => {
   });
 
   it('reacts on the event given by the `on` option', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action" data-option-on="mouseenter"
         data-option-target="Foo" data-option-effect="(ctx) => ctx.Foo.fn()"></button>
       <div id="foo" data-component="Foo"></div>
@@ -350,7 +343,7 @@ describe('Action — the component', () => {
   });
 
   it('does nothing when `on` is set without an `effect`', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action" data-option-on="click"
         data-option-target="Foo"></button>
       <div id="foo" data-component="Foo"></div>
@@ -363,7 +356,7 @@ describe('Action — the component', () => {
   });
 
   it('calls the effect with the documented arguments', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action" data-option-target="Foo"
         data-option-effect="target.fn(this, ...arguments)"></button>
       <div id="foo" data-component="Foo"></div>
@@ -381,7 +374,7 @@ describe('Action — the component', () => {
   });
 
   it('calls a returned function with the same arguments', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action" data-option-target="Foo"
         data-option-effect="function() { target.fn(this, ...arguments); }"></button>
       <div id="foo" data-component="Foo"></div>
@@ -397,7 +390,7 @@ describe('Action — the component', () => {
   });
 
   it('exposes the instances mounted on its own element by name', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action Bar" data-option-target="Foo"
         data-option-effect="target.fn(Action, Bar)"></button>
       <div id="foo" data-component="Foo"></div>
@@ -410,7 +403,7 @@ describe('Action — the component', () => {
   });
 
   it('sees an instance mounted on the action element after it', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action" data-option-target="Foo"
         data-option-effect="target.fn(typeof Bar === 'undefined' ? null : Bar)"></button>
       <div id="foo" data-component="Foo"></div>
@@ -429,7 +422,7 @@ describe('Action — the component', () => {
   });
 
   it('binds every `data-on:<event>` attribute', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="action" data-component="Action"
         data-on:click="target.$el.id = 'clicked'"
         data-on:mouseenter="Foo -> target.fn('hovered')"></div>
@@ -445,7 +438,7 @@ describe('Action — the component', () => {
   });
 
   it('accepts a multiline binding', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="bar" data-component="Action" data-on:click="
         Action(#bar)
         ->
@@ -462,7 +455,7 @@ describe('Action — the component', () => {
   });
 
   it('reports on the diagnostic channel instead of throwing when the effect fails', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="action" data-component="Action" data-on:click="() => consol.log()"></div>
     `);
     const details: Array<Record<string, unknown>> = [];
@@ -491,7 +484,7 @@ describe('Action — the component', () => {
 
 describe('Action — the v4 lifecycle', () => {
   it('releases its listeners when the element leaves the DOM', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action" data-on:click="Foo -> target.fn()"></button>
       <div id="foo" data-component="Foo"></div>
     `);
@@ -509,7 +502,7 @@ describe('Action — the v4 lifecycle', () => {
   });
 
   it('re-reads its bindings on every mount cycle', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="a"><button id="action" data-component="Action"
         data-on:click="Foo -> target.fn('before')"></button></div>
       <div id="b"></div>
@@ -530,7 +523,7 @@ describe('Action — the v4 lifecycle', () => {
   });
 
   it('binds once per cycle, not once per remount', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="a"><button id="action" data-component="Action"
         data-on:click="Foo -> target.fn()"></button></div>
       <div id="b"></div>
@@ -551,7 +544,7 @@ describe('Action — the v4 lifecycle', () => {
 
 describe('Action — live rebinding through watchAttributes', () => {
   it('rebinds when a `data-on:*` attribute is rewritten in place', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action"
         data-on:click="Foo -> target.fn('before')"></button>
       <div id="foo" data-component="Foo"></div>
@@ -567,7 +560,7 @@ describe('Action — live rebinding through watchAttributes', () => {
   });
 
   it('detaches the binding when its attribute is removed', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action"
         data-on:click="Foo -> target.fn()"
         data-on:mouseenter="Foo -> target.fn('hover')"></button>
@@ -591,7 +584,7 @@ describe('Action — live rebinding through watchAttributes', () => {
   });
 
   it('attaches a binding for an attribute added after mount', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action"></button>
       <div id="foo" data-component="Foo"></div>
     `);
@@ -609,7 +602,7 @@ describe('Action — live rebinding through watchAttributes', () => {
   });
 
   it('applies only the final value when one batch writes several times', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action"
         data-on:click="Foo -> target.fn('a')"></button>
       <div id="foo" data-component="Foo"></div>
@@ -626,7 +619,7 @@ describe('Action — live rebinding through watchAttributes', () => {
   });
 
   it('keeps the binding through a rewrite that nets out', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action"
         data-on:click="Foo -> target.fn('a')"></button>
       <div id="foo" data-component="Foo"></div>
@@ -643,7 +636,7 @@ describe('Action — live rebinding through watchAttributes', () => {
   });
 
   it('rebinds after a morph rewrites the attribute', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="host">
         <button id="action" data-component="Action MountProbe"
           data-on:click="Foo -> target.fn('before')"></button>
@@ -672,7 +665,7 @@ describe('Action — live rebinding through watchAttributes', () => {
   });
 
   it('stops watching once the element leaves the DOM', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action"
         data-on:click="Foo -> target.fn()"></button>
       <div id="foo" data-component="Foo"></div>
@@ -696,7 +689,7 @@ describe('Action — live rebinding through watchAttributes', () => {
 
 describe('Action — live rebinding of the option triple', () => {
   it('rebinds when the `effect` option changes', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action" data-option-target="Foo"
         data-option-effect="target.fn('before')"></button>
       <div id="foo" data-component="Foo"></div>
@@ -712,7 +705,7 @@ describe('Action — live rebinding of the option triple', () => {
   });
 
   it('rebinds to the new event when the `on` option changes', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action" data-option-target="Foo"
         data-option-effect="target.fn()"></button>
       <div id="foo" data-component="Foo"></div>
@@ -732,7 +725,7 @@ describe('Action — live rebinding of the option triple', () => {
   });
 
   it('rebinds to the new target when the `target` option changes', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action" data-option-target="Foo(#foo)"
         data-option-effect="target.fn()"></button>
       <div id="foo" data-component="Foo"></div>
@@ -751,7 +744,7 @@ describe('Action — live rebinding of the option triple', () => {
   });
 
   it('detaches when the `effect` option is removed', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action" data-option-target="Foo"
         data-option-effect="target.fn()"></button>
       <div id="foo" data-component="Foo"></div>
@@ -771,7 +764,7 @@ describe('Action — live rebinding of the option triple', () => {
   });
 
   it('attaches when an `effect` option is added after mount', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action"></button>
       <div id="foo" data-component="Foo"></div>
     `);
@@ -787,7 +780,7 @@ describe('Action — live rebinding of the option triple', () => {
   });
 
   it('produces one binding when two of the three options change together', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action" data-option-target="Foo"
         data-option-effect="target.fn('before')"></button>
       <div id="foo" data-component="Foo"></div>
@@ -807,7 +800,7 @@ describe('Action — live rebinding of the option triple', () => {
   });
 
   it('leaves the option binding alone when a `data-on:*` attribute changes', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="action" data-component="Action" data-option-target="Foo"
         data-option-effect="target.fn('option')"
         data-on:click="Foo -> target.fn('attribute')"></button>
@@ -828,7 +821,7 @@ describe('Action — interop with the ported Dialog', () => {
   let root: HTMLElement;
 
   beforeEach(async () => {
-    root = await render(`
+    root = await mount(`
       <button id="open" data-component="Action"
         data-on:click="Dialog(#modal) -> target.open()"></button>
       <button id="close" data-component="Action"
diff --git a/packages/v4/migration/AnchorNav/AnchorNav.spec.ts b/packages/v4/migration/AnchorNav/AnchorNav.spec.ts
index ed84c8cb..cb59abbc 100644
--- a/packages/v4/migration/AnchorNav/AnchorNav.spec.ts
+++ b/packages/v4/migration/AnchorNav/AnchorNav.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { mount, resetDom, settle, waitFor } from '../../src/test/index.js';
 import { AnchorNav } from './AnchorNav.js';
 import { AnchorNavLink } from './AnchorNavLink.js';
 import { AnchorNavTarget } from './AnchorNavTarget.js';
@@ -12,37 +13,12 @@ registerComponents(AnchorNav, AnchorNavLink, AnchorNavTarget);
 
 afterEach(resetDom);
 
-async function observed(): Promise<void> {
-  for (let i = 0; i < 6; i += 1) {
-    await settle();
-  }
-}
-
-/**
- * `AnchorNav` fire-and-forgets the link's transition, and a kept end state
- * lands a few frames after that — so the class is polled rather than assumed
- * present once the observer has delivered. `MenuList`'s spec has the same
- * helper for the same reason, after this shape flaked under full-suite load.
- */
-async function waitForClass(el: HTMLElement, className: string, timeout = 1000): Promise<void> {
-  const deadline = Date.now() + timeout;
-  while (!el.classList.contains(className)) {
-    if (Date.now() > deadline) {
-      throw new Error(`waitForClass: "${className}" never landed on the element`);
-    }
-    await new Promise((resolve) => setTimeout(resolve, 10));
-  }
-}
-
 async function render(): Promise<{ root: HTMLElement; target: HTMLElement }> {
-  const root = document.createElement('div');
-  root.innerHTML = `
+  const root = await mount(`
     <div data-component="AnchorNav">
       <a data-component="AnchorNavLink" href="#one" data-option-enter-to="active" data-option-enter-keep="true"></a>
       <div id="one" data-component="AnchorNavTarget" style="${OFFSCREEN}"></div>
-    </div>`;
-  document.body.append(root);
-  await settle();
+    </div>`);
   return { root, target: root.querySelector('#one') as HTMLElement };
 }
 
@@ -55,10 +31,12 @@ describe('AnchorNav', () => {
     );
 
     target.setAttribute('style', ONSCREEN);
-    await observed();
+    await waitFor(() => link.state === 'entering');
 
     expect(link.state).toBe('entering');
-    await waitForClass(link.$el, 'active');
+    // `AnchorNav` fire-and-forgets the transition, so the kept end state lands
+    // a few frames after the state change and has to be polled for.
+    await waitFor(() => link.$el.classList.contains('active'));
   });
 
   it('leaves the matching link once its target scrolls back out of view', async () => {
@@ -69,11 +47,13 @@ describe('AnchorNav', () => {
     );
 
     target.setAttribute('style', ONSCREEN);
-    await observed();
+    await waitFor(() => link.state === 'entering');
     target.setAttribute('style', OFFSCREEN);
-    await observed();
+    await waitFor(() => link.state === 'leaving');
 
     expect(link.state).toBe('leaving');
+    // A removal is asserted directly, never polled for: `leaveTransition()`
+    // clears the other direction's class before its first await.
     expect(link.$el.classList.contains('active')).toBe(false);
   });
 
@@ -93,7 +73,10 @@ describe('AnchorNav', () => {
     const target = root.querySelector('#one') as HTMLElement;
 
     target.setAttribute('style', ONSCREEN);
-    await observed();
+    // An absence cannot be polled for, so this keeps a bounded quiet period.
+    for (let i = 0; i < 6; i += 1) {
+      await settle();
+    }
 
     expect(link.state).toBeNull();
   });
diff --git a/packages/v4/migration/AnchorNav/AnchorNavLink.spec.ts b/packages/v4/migration/AnchorNav/AnchorNavLink.spec.ts
index 81d7770d..4c0c1b30 100644
--- a/packages/v4/migration/AnchorNav/AnchorNavLink.spec.ts
+++ b/packages/v4/migration/AnchorNav/AnchorNavLink.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { resetDom, settle } from '../../src/test/index.js';
 import { AnchorNavLink } from './AnchorNavLink.js';
 
 registerComponents(AnchorNavLink);
diff --git a/packages/v4/migration/AnchorNav/AnchorNavTarget.spec.ts b/packages/v4/migration/AnchorNav/AnchorNavTarget.spec.ts
index e7dc5a0c..f52a39b3 100644
--- a/packages/v4/migration/AnchorNav/AnchorNavTarget.spec.ts
+++ b/packages/v4/migration/AnchorNav/AnchorNavTarget.spec.ts
@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponents } from '../../src/index.js';
 import { INSTANCES } from '../../src/protocol-symbols.js';
-import { resetDom, settle } from '../../src/test-utils.js';
+import { resetDom, settle, waitFor } from '../../src/test/index.js';
 import { AnchorNavTarget } from './AnchorNavTarget.js';
 
 const OFFSCREEN = 'position:absolute;top:300vh;left:0;width:50px;height:50px';
@@ -11,12 +11,15 @@ registerComponents(AnchorNavTarget);
 
 afterEach(resetDom);
 
-async function observed(): Promise<void> {
+/** A bounded quiet period, for the assertion that nothing has mounted yet. */
+async function quiet(): Promise<void> {
   for (let i = 0; i < 6; i += 1) {
     await settle();
   }
 }
 
+const mountedState = (el: HTMLElement) => el[INSTANCES]?.get('AnchorNavTarget')?.$isMounted;
+
 function render(style: string): HTMLElement {
   const el = document.createElement('div');
   el.setAttribute('data-component', 'AnchorNavTarget');
@@ -28,21 +31,21 @@ function render(style: string): HTMLElement {
 describe('AnchorNavTarget', () => {
   it('mounts once scrolled into view', async () => {
     const el = render(OFFSCREEN);
-    await observed();
-    expect(el[INSTANCES]?.get('AnchorNavTarget')?.$isMounted).toBeUndefined();
+    await quiet();
+    expect(mountedState(el)).toBeUndefined();
 
     el.setAttribute('style', ONSCREEN);
-    await observed();
-    expect(el[INSTANCES]?.get('AnchorNavTarget')?.$isMounted).toBe(true);
+    await waitFor(() => mountedState(el));
+    expect(mountedState(el)).toBe(true);
   });
 
   it('unmounts once scrolled back out of view', async () => {
     const el = render(ONSCREEN);
-    await observed();
-    expect(el[INSTANCES]?.get('AnchorNavTarget')?.$isMounted).toBe(true);
+    await waitFor(() => mountedState(el));
+    expect(mountedState(el)).toBe(true);
 
     el.setAttribute('style', OFFSCREEN);
-    await observed();
-    expect(el[INSTANCES]?.get('AnchorNavTarget')?.$isMounted).toBe(false);
+    await waitFor(() => mountedState(el) === false);
+    expect(mountedState(el)).toBe(false);
   });
 });
diff --git a/packages/v4/migration/Carousel/Carousel.spec.ts b/packages/v4/migration/Carousel/Carousel.spec.ts
index b454565c..3fb280c9 100644
--- a/packages/v4/migration/Carousel/Carousel.spec.ts
+++ b/packages/v4/migration/Carousel/Carousel.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { resetDom, settle, waitFor } from '../../src/test/index.js';
 import { Carousel } from './Carousel.js';
 import { CarouselBtn } from './CarouselBtn.js';
 import { CarouselDrag } from './CarouselDrag.js';
@@ -53,8 +54,12 @@ async function render({
   };
 }
 
-/** Let the scheduler, the frame loop and the smooth scroll settle. */
-async function settled(count = 10): Promise<void> {
+/**
+ * A bounded quiet period, for the states this file asserts are *unchanged* —
+ * a button still enabled, a scroll that never moved, a frame loop that never
+ * started. Everything positive is polled for with `waitFor` instead.
+ */
+async function quiet(count = 10): Promise<void> {
   for (let i = 0; i < count; i += 1) {
     await settle();
   }
@@ -164,7 +169,7 @@ describe('Carousel — the index', () => {
 describe('Carousel — the controls', () => {
   it('marks the first slide active on mount, with no navigation at all', async () => {
     const { el } = await render({ count: 3 });
-    await settled();
+    await waitFor(() => activeFlags(el)[0] === '1');
 
     expect(activeFlags(el)).toEqual(['1', '0', '0']);
   });
@@ -173,7 +178,7 @@ describe('Carousel — the controls', () => {
     const { el, carousel } = await render({ count: 3 });
 
     await carousel.goTo(2);
-    await settled();
+    await waitFor(() => activeFlags(el)[2] === '1');
 
     expect(activeFlags(el)).toEqual(['0', '0', '1']);
   });
@@ -185,13 +190,12 @@ describe('Carousel — the controls', () => {
         <button data-component="CarouselBtn" data-option-action="prev"></button>
         <button data-component="CarouselBtn" data-option-action="next"></button>`,
     });
-    await settled();
-
     const [prev, next] = [...el.querySelectorAll('button')];
+    await waitFor(() => prev.disabled);
     expect([prev.disabled, next.disabled]).toEqual([true, false]);
 
     await carousel.goTo(2);
-    await settled();
+    await waitFor(() => next.disabled);
 
     expect([prev.disabled, next.disabled]).toEqual([false, true]);
   });
@@ -202,7 +206,7 @@ describe('Carousel — the controls', () => {
       attributes: 'data-option-boundary="loop"',
       buttons: `<button data-component="CarouselBtn" data-option-action="prev"></button>`,
     });
-    await settled();
+    await quiet();
 
     expect(el.querySelector('button')?.disabled).toBe(false);
   });
@@ -212,7 +216,7 @@ describe('Carousel — the controls', () => {
       count: 3,
       buttons: `<button data-component="CarouselBtn" data-option-action="next"></button>`,
     });
-    await settled();
+    await waitFor(() => el.querySelector('button'));
 
     el.querySelector('button')?.click();
 
@@ -224,7 +228,7 @@ describe('Carousel — the controls', () => {
       count: 4,
       buttons: `<button data-component="CarouselBtn" data-option-action="2"></button>`,
     });
-    await settled();
+    await waitFor(() => el.querySelector('button'));
 
     el.querySelector('button')?.click();
 
@@ -243,7 +247,7 @@ describe('Carousel — the controls', () => {
         <button data-component="CarouselBtn" data-option-action="prev"></button>
       </div>`;
     document.body.append(root);
-    await settled();
+    await quiet();
 
     const button = root.querySelector('button') as HTMLButtonElement;
     expect(button.disabled).toBe(false);
@@ -255,7 +259,7 @@ describe('Carousel — the controls', () => {
       'afterbegin',
       `<div data-component="CarouselWrapper" style="${WRAPPER_STYLE}">${slides(3)}</div>`,
     );
-    await settled();
+    await waitFor(() => button.disabled);
 
     expect(button.disabled).toBe(true);
   });
@@ -265,13 +269,12 @@ describe('Carousel — the controls', () => {
       count: 3,
       buttons: `<button data-component="CarouselBtn" data-option-action="next"></button>`,
     });
-    await settled();
-    const button = el.querySelector('button') as HTMLButtonElement;
+    const button = await waitFor(() => el.querySelector('button'));
 
     button.remove();
-    await settled();
+    await settle();
     await carousel.goTo(2);
-    await settled();
+    await quiet();
 
     // Still the state it had when it left, rather than a post-teardown write.
     expect(button.disabled).toBe(false);
@@ -281,14 +284,14 @@ describe('Carousel — the controls', () => {
 describe('Carousel — live slides', () => {
   it('picks up a slide added after mount', async () => {
     const { el, carousel, wrapper } = await render({ count: 2 });
-    await settled();
+    await waitFor(() => carousel.length === 2);
     expect(carousel.length).toBe(2);
 
     wrapper.insertAdjacentHTML(
       'beforeend',
       `<div data-component="CarouselItem" style="${ITEM_STYLE}"></div>`,
     );
-    await settled();
+    await waitFor(() => carousel.length === 3);
 
     expect(carousel.length).toBe(3);
     expect(activeFlags(el)).toEqual(['1', '0', '0']);
@@ -297,11 +300,11 @@ describe('Carousel — live slides', () => {
   it('re-normalises the index when the slide it points at is removed', async () => {
     const { carousel, wrapper } = await render({ count: 3 });
     await carousel.goTo(2);
-    await settled();
+    await waitFor(() => carousel.currentIndex === 2);
     expect(carousel.currentIndex).toBe(2);
 
     wrapper.lastElementChild?.remove();
-    await settled();
+    await waitFor(() => carousel.length === 2);
 
     expect(carousel.length).toBe(2);
     expect(carousel.currentIndex).toBe(1);
@@ -313,29 +316,29 @@ describe('Carousel — live slides', () => {
       buttons: `<button data-component="CarouselBtn" data-option-action="next"></button>`,
     });
     await carousel.goTo(1);
-    await settled();
     const next = el.querySelector('button') as HTMLButtonElement;
+    await waitFor(() => next.disabled);
     expect(next.disabled).toBe(true);
 
     wrapper.insertAdjacentHTML(
       'beforeend',
       `<div data-component="CarouselItem" style="${ITEM_STYLE}"></div>`,
     );
-    await settled();
+    await waitFor(() => !next.disabled);
 
     expect(next.disabled).toBe(false);
   });
 
   it('re-measures the slide positions when the list changes', async () => {
     const { carousel, wrapper } = await render({ count: 2 });
-    await settled();
+    await waitFor(() => carousel.positions.length === 2);
     expect(carousel.positions).toHaveLength(2);
 
     wrapper.insertAdjacentHTML(
       'beforeend',
       `<div data-component="CarouselItem" style="${ITEM_STYLE}"></div>`,
     );
-    await settled();
+    await waitFor(() => carousel.positions.length === 3);
 
     expect(carousel.positions.map(({ left }) => left)).toEqual([0, 200, 400]);
   });
@@ -346,17 +349,17 @@ describe('Carousel — the wrapper', () => {
     const { carousel, wrapper } = await render({ count: 3 });
 
     await carousel.goTo(2);
-    await settled(20);
+    await waitFor(() => wrapper.scrollLeft === 400, { timeout: 2000 });
 
     expect(wrapper.scrollLeft).toBe(400);
   });
 
   it('reports the closest slide on a scroll, without scrolling back', async () => {
     const { carousel, wrapper } = await render({ count: 3 });
-    await settled();
+    await waitFor(() => carousel.positions.length === 3);
 
     wrapper.scrollTo({ left: 400, behavior: 'instant' });
-    await settled();
+    await waitFor(() => carousel.currentIndex === 2);
 
     expect(carousel.currentIndex).toBe(2);
     expect(wrapper.scrollLeft).toBe(400);
@@ -364,11 +367,13 @@ describe('Carousel — the wrapper', () => {
 
   it('publishes its progress from 0 to 1', async () => {
     const { el, carousel, wrapper } = await render({ count: 3 });
-    await settled();
+    await waitFor(() => carousel.positions.length === 3);
     expect(carousel.progress).toBe(0);
 
     wrapper.scrollTo({ left: 400, behavior: 'instant' });
-    await settled();
+    // The custom property is written a lane after the value it mirrors, so it
+    // is the later of the two and the one worth polling for.
+    await waitFor(() => el.style.getPropertyValue('--carousel-progress') === '1');
 
     expect(carousel.progress).toBe(1);
     expect(el.style.getPropertyValue('--carousel-progress')).toBe('1');
@@ -376,14 +381,14 @@ describe('Carousel — the wrapper', () => {
 
   it('emits `progress` while it changes and stops the loop once it settles', async () => {
     const { el, carousel, wrapper } = await render({ count: 3 });
-    await settled();
+    await waitFor(() => carousel.positions.length === 3);
     const seen: number[] = [];
     el.addEventListener('progress', (event) => {
       seen.push((event as unknown as CustomEvent<{ progress: number }>).detail.progress);
     });
 
     wrapper.scrollTo({ left: 200, behavior: 'instant' });
-    await settled();
+    await waitFor(() => seen.length > 0 && !carousel.$services.ticked.isActive);
 
     expect(seen.at(-1)).toBeCloseTo(0.5, 5);
     expect(carousel.$services.ticked.isActive).toBe(false);
@@ -391,17 +396,17 @@ describe('Carousel — the wrapper', () => {
 
   it('holds no frame loop once the progress has settled', async () => {
     const { carousel } = await render({ count: 3 });
-    await settled();
+    await quiet();
 
     expect(carousel.$services.ticked.isActive).toBe(false);
   });
 
   it('does nothing on `scrollToIndex` for a slide that does not exist', async () => {
     const { carousel, wrapper } = await render({ count: 2 });
-    await settled();
+    await waitFor(() => carousel.wrapper);
 
     carousel.wrapper?.scrollToIndex(9);
-    await settled();
+    await quiet();
 
     expect(wrapper.scrollLeft).toBe(0);
   });
@@ -424,7 +429,7 @@ describe('Carousel — the drag track', () => {
         <div data-component="CarouselWrapper CarouselDrag" style="${WRAPPER_STYLE}">${slides(3)}</div>
       </div>`;
     document.body.append(root);
-    await settled();
+    await quiet();
 
     const track = root.querySelector('[data-component~="CarouselDrag"]') as HTMLElement;
     const matches = window.matchMedia('(pointer: fine)').matches;
@@ -448,10 +453,11 @@ describe('Carousel — orientation', () => {
 
   it('hands the orientation to its children through the context', async () => {
     const { el } = await render({ count: 3, attributes: 'data-option-axis="y"' });
-    await settled();
-    const wrapper = getInstance<CarouselWrapper>(
-      el.querySelector('[data-component~="CarouselWrapper"]') as HTMLElement,
-      'CarouselWrapper',
+    const wrapper = await waitFor(() =>
+      getInstance<CarouselWrapper>(
+        el.querySelector('[data-component~="CarouselWrapper"]') as HTMLElement,
+        'CarouselWrapper',
+      ),
     );
 
     expect(wrapper.isVertical).toBe(true);
@@ -461,11 +467,8 @@ describe('Carousel — orientation', () => {
     const root = document.createElement('div');
     root.innerHTML = `<div data-component="CarouselWrapper" style="${WRAPPER_STYLE}"></div>`;
     document.body.append(root);
-    await settled();
-
-    const wrapper = getInstance<CarouselWrapper>(
-      root.firstElementChild as HTMLElement,
-      'CarouselWrapper',
+    const wrapper = await waitFor(() =>
+      getInstance<CarouselWrapper>(root.firstElementChild as HTMLElement, 'CarouselWrapper'),
     );
     expect(wrapper.isHorizontal).toBe(true);
     expect(wrapper.carousel).toBeUndefined();
diff --git a/packages/v4/migration/ClickOutside/ClickOutside.spec.ts b/packages/v4/migration/ClickOutside/ClickOutside.spec.ts
index ec51bdd6..9c9d366d 100644
--- a/packages/v4/migration/ClickOutside/ClickOutside.spec.ts
+++ b/packages/v4/migration/ClickOutside/ClickOutside.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { Base, registerComponents, type BaseConfig, type DelegatedEvent } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { resetDom, settle } from '../../src/test/index.js';
 import { ClickOutside } from './ClickOutside.js';
 
 /** Parent probe for delegated `click-outside` events. */
diff --git a/packages/v4/migration/Cursor/Cursor.spec.ts b/packages/v4/migration/Cursor/Cursor.spec.ts
index 774c0204..c6d9aa12 100644
--- a/packages/v4/migration/Cursor/Cursor.spec.ts
+++ b/packages/v4/migration/Cursor/Cursor.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { countRequestedFrames, getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { countRequestedFrames, getInstance } from '../../src/test-utils.js';
+import { mount, resetDom, settle, waitFor } from '../../src/test/index.js';
 import { Cursor } from './Cursor.js';
 
 registerComponents(Cursor);
@@ -11,19 +12,11 @@ afterEach(async () => {
   await resetDom();
 });
 
-async function render(html: string): Promise<HTMLElement> {
-  const root = document.createElement('div');
-  root.innerHTML = html;
-  document.body.append(root);
-  await settle();
-  return root;
-}
-
 async function mountCursor(
   attributes = '',
   inner = '',
 ): Promise<{ root: HTMLElement; instance: Cursor }> {
-  const root = await render(
+  const root = await mount(
     `<div data-component="Cursor" style="position:fixed;top:0;left:0;width:20px;height:20px" ${attributes}>${inner}</div>`,
   );
   return { root, instance: getInstance<Cursor>(root.firstElementChild as HTMLElement, 'Cursor') };
@@ -41,8 +34,8 @@ function movePointer(target: EventTarget, x: number, y: number, buttons = 0): vo
   );
 }
 
-/** Let the frame loop run for a few frames. */
-async function ticked(count = 12): Promise<void> {
+/** A bounded quiet period, for the assertion that no frame was requested. */
+async function quiet(count = 12): Promise<void> {
   for (let i = 0; i < count; i += 1) {
     await settle();
   }
@@ -75,7 +68,7 @@ describe('Cursor', () => {
     expect(instance.motion().x).toBeGreaterThan(0);
     expect(instance.motion().x).toBeLessThan(200);
 
-    await ticked();
+    await waitFor(() => !instance.motion.isMoving);
 
     expect(instance.motion().x).toBe(200);
     expect(instance.motion().y).toBe(100);
@@ -149,7 +142,7 @@ describe('Cursor', () => {
     await settle();
     expect(instance.motion.isMoving).toBe(true);
 
-    await ticked();
+    await waitFor(() => !instance.motion.isMoving);
 
     expect(instance.motion.isMoving).toBe(false);
   });
@@ -158,7 +151,7 @@ describe('Cursor', () => {
     await mountCursor();
 
     const requested = await countRequestedFrames(async () => {
-      await ticked(4);
+      await quiet(4);
     });
 
     expect(requested).toBe(0);
@@ -181,7 +174,7 @@ describe('Cursor', () => {
     const { instance } = await mountCursor('data-option-scale="1"');
 
     movePointer(document, 50, 25);
-    await ticked();
+    await waitFor(() => instance.$el.style.transform.includes('matrix(1, 0, 0, 1, 50, 25)'));
 
     expect(instance.$el.style.transform).toContain('matrix(1, 0, 0, 1, 50, 25)');
   });
@@ -189,7 +182,7 @@ describe('Cursor', () => {
   it('resets its state when the component mounts again', async () => {
     const { root, instance } = await mountCursor();
     movePointer(document, 90, 90);
-    await ticked();
+    await waitFor(() => instance.motion().x === 90);
     expect(instance.motion().x).toBe(90);
 
     const other = document.createElement('section');
diff --git a/packages/v4/migration/Data/DataBind.spec.ts b/packages/v4/migration/Data/DataBind.spec.ts
index ebcfc57d..e047d88e 100644
--- a/packages/v4/migration/Data/DataBind.spec.ts
+++ b/packages/v4/migration/Data/DataBind.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { EVENTS, registerComponents } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { captureDiagnostics, mount, resetDom, settle } from '../../src/test/index.js';
 import { DataBind } from './DataBind.js';
 import { DataComputed } from './DataComputed.js';
 import { DataEffect } from './DataEffect.js';
@@ -48,20 +49,20 @@ registerComponents(
 
 afterEach(resetDom);
 
+/**
+ * Isolate tests from one another. The registry that survives `resetDom()` here
+ * is the page-wide `DataRegistry` — the one `resolveDataRegistry()` provides on
+ * the root context — and its group records keep their values and their latest
+ * payload after the elements are gone. `resetRegistry()` clears the *component*
+ * registry and does not touch it, so a unique group name per test is what keeps
+ * these apart.
+ */
 let counter = 0;
 function uniqueGroup(name: string): string {
   counter += 1;
   return `${name}-${counter}`;
 }
 
-async function render(html: string): Promise<HTMLElement> {
-  const root = document.createElement('div');
-  root.innerHTML = html;
-  document.body.append(root);
-  await settle();
-  return root;
-}
-
 function el<T extends HTMLElement = HTMLElement>(root: HTMLElement, selector: string): T {
   return root.querySelector<T>(selector) as T;
 }
@@ -72,7 +73,7 @@ function at<T>(root: HTMLElement, selector: string, name: string): T {
 
 describe('DataBind — the element half', () => {
   it('binds textContent by default and a named property on demand', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="text" data-component="DataBind" data-option-group="${uniqueGroup('t')}"></div>
       <div id="named" data-component="DataBind" data-option-prop="title" data-option-group="${uniqueGroup('t')}"></div>
     `);
@@ -91,7 +92,7 @@ describe('DataBind — the element half', () => {
   });
 
   it('reads and writes typed input properties', async () => {
-    const root = await render(`
+    const root = await mount(`
       <input id="number" type="number" value="1" data-component="DataBind" data-option-group="${uniqueGroup('n')}">
       <input id="date" type="date" value="2025-01-01" data-component="DataBind" data-option-group="${uniqueGroup('d')}">
       <input id="check" type="checkbox" data-component="DataBind" data-option-group="${uniqueGroup('c')}">
@@ -124,7 +125,7 @@ describe('DataBind — the element half', () => {
 
   it('unions the checked values of a [] checkbox group', async () => {
     const group = `${uniqueGroup('checkbox')}[]`;
-    const root = await render(`
+    const root = await mount(`
       <input id="a" type="checkbox" value="foo" data-component="DataBind" data-option-group="${group}">
       <input id="b" type="checkbox" value="bar" data-component="DataBind" data-option-group="${group}">
     `);
@@ -142,7 +143,7 @@ describe('DataBind — the element half', () => {
   it('selects one or several options of a select', async () => {
     const single = uniqueGroup('select');
     const multi = `${uniqueGroup('select')}[]`;
-    const root = await render(`
+    const root = await mount(`
       <select id="one" data-component="DataBind" data-option-group="${single}">
         <option value="foo">Foo</option><option value="bar">Bar</option>
       </select>
@@ -164,7 +165,7 @@ describe('DataBind — the element half', () => {
   });
 
   it('applies every virtual binding kind', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="btn" data-component="DataBind" data-option-group="${uniqueGroup('v')}"
         data-bind:prop.disabled="!value"
         data-bind:prop.tab-index="value ? 0 : -1"
@@ -186,7 +187,7 @@ describe('DataBind — the element half', () => {
   });
 
   it('passes the raw value through empty expressions and clears on nullish', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="d" data-component="DataBind" data-option-group="${uniqueGroup('v')}"
         data-bind:prop.title="" data-bind:attr.data-value="" data-bind:class.selected=""
         data-bind:style.--state="" data-bind:text=""></div>
@@ -211,7 +212,7 @@ describe('DataBind — the element half', () => {
   });
 
   it('retains the raw value a virtual binding was fed, not what it wrote', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button id="b" data-component="DataBind" data-option-group="${uniqueGroup('v')}"
         data-bind:attr.aria-expanded="String(value === 'open')"></button>
     `);
@@ -227,7 +228,7 @@ describe('DataBind — the element half', () => {
   });
 
   it('follows a virtual binding rewritten in place', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="d" data-component="DataBind" data-option-group="${uniqueGroup('v')}"
         data-bind:text="\`was: \${value}\`"></div>
     `);
@@ -248,7 +249,7 @@ describe('DataBind — the element half', () => {
   });
 
   it('picks up a virtual binding added after mount, and drops a removed one', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="d" data-component="DataBind" data-option-group="${uniqueGroup('v')}"
         data-bind:text="value"></div>
     `);
@@ -282,7 +283,7 @@ describe('DataBind — the element half', () => {
     };
     document.addEventListener(EVENTS.diagnostic, listener);
 
-    const root = await render(`
+    const root = await mount(`
       <div id="d" data-component="DataBind" data-option-group="${uniqueGroup('v')}"
         data-bind:txet="value"></div>
     `);
@@ -296,7 +297,7 @@ describe('DataBind — the element half', () => {
 
   it('fails quietly when a virtual expression throws', async () => {
     const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {});
-    const root = await render(`
+    const root = await mount(`
       <div id="d" data-component="DataBind" data-option-group="${uniqueGroup('v')}"
         data-bind:attr.title="missing.value" data-bind:text="\`Value: \${value}\`"></div>
     `);
@@ -309,7 +310,7 @@ describe('DataBind — the element half', () => {
   });
 
   it('toggles, increments and cycles', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="state" data-component="DataBind" data-option-group="${uniqueGroup('m')}"></div>
       <div id="count" data-component="DataBind" data-option-group="${uniqueGroup('m')}">2</div>
       <div id="cycle" data-component="DataBind" data-option-group="${uniqueGroup('m')}">one</div>
@@ -343,8 +344,8 @@ describe('DataBind — the element half', () => {
   });
 
   it('refuses the mutation helpers on computed values and effects', async () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-    const root = await render(`
+    const log = captureDiagnostics();
+    const root = await mount(`
       <div id="c" data-component="DataComputed" data-option-compute="value"
            data-option-group="${uniqueGroup('m')}">current</div>
       <div id="e" data-component="DataEffect" data-option-effect="target.dataset.called = 'true'"
@@ -356,15 +357,15 @@ describe('DataBind — the element half', () => {
 
     at<DataEffect>(root, '#e', 'DataEffect').increment();
     expect(el(root, '#e').dataset.called).toBeUndefined();
-    expect(warn).toHaveBeenCalledTimes(2);
-    warn.mockRestore();
+    expect(log.codes).toEqual(['data-bind.unsupported-mutation', 'data-bind.unsupported-mutation']);
+    log.stop();
   });
 });
 
 describe('DataBind — the group half', () => {
   it('dispatches a value to every peer of an unscoped group', async () => {
     const group = uniqueGroup('a');
-    const root = await render(`
+    const root = await mount(`
       <div id="one" data-component="DataBind" data-option-group="${group}">foo</div>
       <div id="two" data-component="DataBind" data-option-group="${group}">foo</div>
       <div id="three" data-component="DataComputed" data-option-group="${group}"
@@ -386,7 +387,7 @@ describe('DataBind — the group half', () => {
 
   it('delivers through the public set method, with dispatch false', async () => {
     const group = uniqueGroup('delivery');
-    const root = await render(`
+    const root = await mount(`
       <div id="src" data-component="DataBind" data-option-group="${group}"></div>
       <div id="sub" data-component="RecordingBind" data-option-group="${group}"></div>
     `);
@@ -400,7 +401,7 @@ describe('DataBind — the group half', () => {
 
   it('gives every peer the same page-wide channel when no scope is above them', async () => {
     const group = uniqueGroup('page');
-    const root = await render(`
+    const root = await mount(`
       <div id="a" data-component="DataBind" data-option-group="${group}"></div>
       <section><article><div id="b" data-component="DataBind" data-option-group="${group}"></div></article></section>
     `);
@@ -417,7 +418,7 @@ describe('DataBind — the group half', () => {
   it('preserves the latest value during reentrant group updates', async () => {
     // A nested write must prevent later subscribers from receiving the superseded frame.
     const group = uniqueGroup('reentrant');
-    const root = await render(`
+    const root = await mount(`
       <div id="src" data-component="DataBind" data-option-group="${group}"></div>
       <div id="reentrant" data-component="ReentrantBind" data-option-group="${group}"></div>
       <div id="out" data-component="DataBind" data-option-group="${group}"></div>
@@ -436,7 +437,7 @@ describe('DataBind — the group half', () => {
 
   it('leaves and rejoins its group across unmount/mount cycles', async () => {
     const group = uniqueGroup('lifecycle');
-    const root = await render(`
+    const root = await mount(`
       <div id="src" data-component="DataBind" data-option-group="${group}"></div>
       <div id="wrap"><div id="eff" data-component="DataEffect" data-option-group="${group}"
         data-option-effect="target.dataset.calls = String(Number(target.dataset.calls || 0) + 1)"></div></div>
@@ -461,7 +462,7 @@ describe('DataBind — the group half', () => {
 
   it('forgets peers that left the document, synchronously', async () => {
     const group = `${uniqueGroup('checkbox')}[]`;
-    const root = await render(`
+    const root = await mount(`
       <input id="a" type="checkbox" value="foo" checked data-component="DataBind" data-option-group="${group}">
       <input id="b" type="checkbox" value="bar" checked data-component="DataBind" data-option-group="${group}">
     `);
@@ -476,7 +477,7 @@ describe('DataBind — the group half', () => {
 
   it('propagates its own value on mount when immediate is set', async () => {
     const group = uniqueGroup('immediate');
-    const root = await render(`
+    const root = await mount(`
       <input id="a" type="text" value="foo" data-option-immediate data-component="DataBind" data-option-group="${group}">
       <input id="b" type="text" data-component="DataBind" data-option-group="${group}">
     `);
@@ -487,7 +488,7 @@ describe('DataBind — the group half', () => {
   it('runs an effect on mount only when immediate is set', async () => {
     const passive = uniqueGroup('passive');
     const immediate = uniqueGroup('immediate');
-    const root = await render(`
+    const root = await mount(`
       <div id="passive" data-component="DataEffect" data-option-group="${passive}"
            data-option-effect="target.dataset.called = 'true'"></div>
       <div id="immediate" data-component="DataEffect" data-option-group="${immediate}" data-option-immediate
@@ -500,7 +501,7 @@ describe('DataBind — the group half', () => {
 
   it('updates a virtual subscriber even when its own value already matches', async () => {
     const group = uniqueGroup('equal');
-    const root = await render(`
+    const root = await mount(`
       <div id="src" data-component="DataBind" data-option-group="${group}">foo</div>
       <button id="sub" data-component="DataBind" data-option-group="${group}"
               data-bind:attr.data-value="value">foo</button>
@@ -512,7 +513,7 @@ describe('DataBind — the group half', () => {
 
   it('uses the scoped $data inside virtual expressions', async () => {
     const group = uniqueGroup('tabs');
-    const root = await render(`
+    const root = await mount(`
       <div id="scope" data-component="DataScope" data-option-group="${group}">
         <button id="btn" data-component="DataBind"
                 data-bind:attr.aria-selected="$data.active === value"
@@ -529,7 +530,7 @@ describe('DataBind — the group half', () => {
 
   it('syncs a late immediate keyed subscriber with the current scoped value', async () => {
     const group = uniqueGroup('late');
-    const root = await render(`
+    const root = await mount(`
       <div id="scope" data-component="DataScope" data-option-group="${group}">
         <input id="model" data-component="DataModel" name="query" value="initial">
       </div>
@@ -553,7 +554,7 @@ describe('DataBind — the group half', () => {
 describe('DataBind — the data-bind:if template protocol', () => {
   it('toggles the presence of template content', async () => {
     const group = uniqueGroup('if');
-    const root = await render(`
+    const root = await mount(`
       <div id="host">
         <template id="tpl" data-component="DataBind" data-option-group="${group}"
                   data-bind:if="value === 'open'"><p>Hello</p></template>
@@ -577,7 +578,7 @@ describe('DataBind — the data-bind:if template protocol', () => {
 
   it('lets an EVENTS.dom.update listener defer the insertion', async () => {
     const group = uniqueGroup('if');
-    const root = await render(`
+    const root = await mount(`
       <div id="host">
         <template id="tpl" data-component="DataBind" data-option-group="${group}"
                   data-bind:if=""><p>Hello</p></template>
@@ -607,14 +608,14 @@ describe('DataBind — the data-bind:if template protocol', () => {
   });
 
   it('warns when the if binding sits on something other than a template', async () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-    const root = await render(`
+    const log = captureDiagnostics();
+    const root = await mount(`
       <div id="d" data-component="DataBind" data-option-group="${uniqueGroup('if')}"
            data-bind:if="value"></div>
     `);
 
     at<DataBind>(root, '#d', 'DataBind').set(true);
-    expect(warn).toHaveBeenCalledTimes(1);
-    warn.mockRestore();
+    expect(log.codes).toEqual(['data-bind.invalid-if-target']);
+    log.stop();
   });
 });
diff --git a/packages/v4/migration/Data/DataDerived.spec.ts b/packages/v4/migration/Data/DataDerived.spec.ts
index cdea5e4a..6f24cff7 100644
--- a/packages/v4/migration/Data/DataDerived.spec.ts
+++ b/packages/v4/migration/Data/DataDerived.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { mount, resetDom } from '../../src/test/index.js';
 import { DataBind } from './DataBind.js';
 import { DataComputed } from './DataComputed.js';
 import { DataEffect } from './DataEffect.js';
@@ -11,20 +12,20 @@ registerComponents(DataScope, DataBind, DataModel, DataComputed, DataEffect);
 
 afterEach(resetDom);
 
+/**
+ * Isolate tests from one another. The registry that survives `resetDom()` here
+ * is the page-wide `DataRegistry` — the one `resolveDataRegistry()` provides on
+ * the root context — and its group records keep their values and their latest
+ * payload after the elements are gone. `resetRegistry()` clears the *component*
+ * registry and does not touch it, so a unique group name per test is what keeps
+ * these apart.
+ */
 let counter = 0;
 function uniqueGroup(name: string): string {
   counter += 1;
   return `${name}-${counter}`;
 }
 
-async function render(html: string): Promise<HTMLElement> {
-  const root = document.createElement('div');
-  root.innerHTML = html;
-  document.body.append(root);
-  await settle();
-  return root;
-}
-
 function el<T extends HTMLElement = HTMLElement>(root: HTMLElement, selector: string): T {
   return root.querySelector<T>(selector) as T;
 }
@@ -36,7 +37,7 @@ function at<T>(root: HTMLElement, selector: string, name: string): T {
 describe('DataModel', () => {
   it('publishes what the user types to every peer', async () => {
     const group = uniqueGroup('model');
-    const root = await render(`
+    const root = await mount(`
       <input id="a" value="foo" data-component="DataModel" data-option-group="${group}">
       <input id="b" value="foo" data-component="DataModel" data-option-group="${group}">
     `);
@@ -54,7 +55,7 @@ describe('DataModel', () => {
 
   it('keeps grouped checkboxes in sync by value, not by element', async () => {
     const group = `${uniqueGroup('check')}[]`;
-    const root = await render(`
+    const root = await mount(`
       <input id="a1" type="checkbox" value="a" data-component="DataModel" data-option-group="${group}">
       <input id="a2" type="checkbox" value="a" data-component="DataModel" data-option-group="${group}">
       <input id="b1" type="checkbox" value="b" data-component="DataModel" data-option-group="${group}">
@@ -84,7 +85,7 @@ describe('DataModel', () => {
 
 describe('DataComputed', () => {
   it('sets the value returned by the compute expression', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="c" data-component="DataComputed" data-option-group="${uniqueGroup('c')}"
            data-option-compute="value.length"></div>
     `);
@@ -95,7 +96,7 @@ describe('DataComputed', () => {
 
   it('fails quietly and keeps the incoming value when the expression throws', async () => {
     const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {});
-    const root = await render(`
+    const root = await mount(`
       <div id="c" data-component="DataComputed" data-option-group="${uniqueGroup('c')}"
            data-option-compute="valuee.length"></div>
     `);
@@ -110,7 +111,7 @@ describe('DataComputed', () => {
 
 describe('DataEffect', () => {
   it('runs the expression and writes nothing back', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="e" data-component="DataEffect" data-option-group="${uniqueGroup('e')}"
            data-option-effect="target.setAttribute('title', value)"></div>
     `);
@@ -122,7 +123,7 @@ describe('DataEffect', () => {
 
   it('fails quietly when the expression throws', async () => {
     const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {});
-    const root = await render(`
+    const root = await mount(`
       <div id="e" data-component="DataEffect" data-option-group="${uniqueGroup('e')}"
            data-option-effect="targett.setAttribute('id', value)"></div>
     `);
diff --git a/packages/v4/migration/Data/DataScope.spec.ts b/packages/v4/migration/Data/DataScope.spec.ts
index b1512f87..b86ed6ee 100644
--- a/packages/v4/migration/Data/DataScope.spec.ts
+++ b/packages/v4/migration/Data/DataScope.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { mount, resetDom, settle } from '../../src/test/index.js';
 import { DataBind } from './DataBind.js';
 import { DataComputed } from './DataComputed.js';
 import { DataEffect } from './DataEffect.js';
@@ -12,21 +13,20 @@ registerComponents(DataScope, DataBind, DataModel, DataComputed, DataEffect);
 
 afterEach(resetDom);
 
-/** Isolate tests because the page-wide registry survives `resetDom()`. */
+/**
+ * Isolate tests from one another. The registry that survives `resetDom()` here
+ * is the page-wide `DataRegistry` — the one `resolveDataRegistry()` provides on
+ * the root context — and its group records keep their values and their latest
+ * payload after the elements are gone. `resetRegistry()` clears the *component*
+ * registry and does not touch it, so a unique group name per test is what keeps
+ * these apart.
+ */
 let counter = 0;
 function uniqueGroup(name: string): string {
   counter += 1;
   return `${name}-${counter}`;
 }
 
-async function render(html: string): Promise<HTMLElement> {
-  const root = document.createElement('div');
-  root.innerHTML = html;
-  document.body.append(root);
-  await settle();
-  return root;
-}
-
 function at<T>(root: HTMLElement, selector: string, name: string): T {
   return getInstance<never>(root.querySelector(selector), name) as T;
 }
@@ -38,7 +38,7 @@ function el<T extends HTMLElement = HTMLElement>(root: HTMLElement, selector: st
 describe('DataScope', () => {
   it('gives descendants its group and lets one override it', async () => {
     const group = uniqueGroup('scoped');
-    const root = await render(`
+    const root = await mount(`
       <div data-component="DataScope" data-option-group="${group}">
         <div id="a" data-component="DataBind"></div>
         <div id="b" data-component="DataBind"></div>
@@ -60,7 +60,7 @@ describe('DataScope', () => {
 
   it('isolates sibling scopes and resolves the nearest nested one', async () => {
     const group = uniqueGroup('shared');
-    const root = await render(`
+    const root = await mount(`
       <div id="outer" data-component="DataScope" data-option-group="${group}">
         <div id="outer-bind" data-component="DataBind"></div>
         <div id="nested" data-component="DataScope" data-option-group="${group}">
@@ -88,7 +88,7 @@ describe('DataScope', () => {
 
   it('keeps keyed values independent and synchronizes equal keys', async () => {
     const group = uniqueGroup('person');
-    const root = await render(`
+    const root = await mount(`
       <div data-component="DataScope" data-option-group="${group}">
         <input id="first" data-component="DataModel" name="first" value="Ada">
         <input id="last" data-component="DataModel" name="last" value="Lovelace">
@@ -113,9 +113,7 @@ describe('DataScope', () => {
 
   it('clones and freezes mutable snapshot values', async () => {
     const group = uniqueGroup('values');
-    const root = await render(
-      `<div data-component="DataScope" data-option-group="${group}"></div>`,
-    );
+    const root = await mount(`<div data-component="DataScope" data-option-group="${group}"></div>`);
     const scope = at<DataScope>(root, '[data-component="DataScope"]', 'DataScope');
 
     const items = ['one'];
@@ -144,7 +142,7 @@ describe('DataScope', () => {
 
   it('hydrates every immediate source before notifying subscribers', async () => {
     const group = uniqueGroup('person');
-    const root = await render(`
+    const root = await mount(`
       <div data-component="DataScope" data-option-group="${group}">
         <input data-component="DataModel" name="first" value="Ada" data-option-immediate>
         <input data-component="DataModel" name="last" value="Lovelace" data-option-immediate>
@@ -170,7 +168,7 @@ describe('DataScope', () => {
 
   it('notifies once when several immediate sources share a key', async () => {
     const group = uniqueGroup('person');
-    const root = await render(`
+    const root = await mount(`
       <div data-component="DataScope" data-option-group="${group}">
         <input data-component="DataModel" name="first" value="Ada" data-option-immediate>
         <input data-component="DataModel" name="first" value="Ada" data-option-immediate>
@@ -188,7 +186,7 @@ describe('DataScope', () => {
 
   it('drops a keyed value when its last source leaves the document', async () => {
     const group = uniqueGroup('person');
-    const root = await render(`
+    const root = await mount(`
       <div data-component="DataScope" data-option-group="${group}">
         <input id="input" data-component="DataModel" name="first" value="Ada" data-option-immediate>
         <div id="computed" data-component="DataComputed"
@@ -210,7 +208,7 @@ describe('DataScope', () => {
 
   it('recomputes a [] group when one of its checkbox sources is removed', async () => {
     const group = uniqueGroup('choices');
-    const root = await render(`
+    const root = await mount(`
       <div data-component="DataScope" data-option-group="${group}[]">
         <input id="one" data-component="DataModel" type="checkbox" name="items" value="first" checked data-option-immediate>
         <input id="two" data-component="DataModel" type="checkbox" name="items" value="second" checked data-option-immediate>
@@ -231,7 +229,7 @@ describe('DataScope', () => {
 
   it('hydrates and tracks only the checked radio', async () => {
     const group = uniqueGroup('tabs');
-    const root = await render(`
+    const root = await mount(`
       <div data-component="DataScope" data-option-group="${group}">
         <input id="overview" data-component="DataModel" type="radio" name="tab" value="overview" checked data-option-immediate>
         <input id="details" data-component="DataModel" type="radio" name="tab" value="details" data-option-immediate>
@@ -249,7 +247,7 @@ describe('DataScope', () => {
 
   it('notifies subscribers again when the same value is written twice', async () => {
     const group = uniqueGroup('person');
-    const root = await render(`
+    const root = await mount(`
       <div data-component="DataScope" data-option-group="${group}">
         <input id="input" data-component="DataModel" name="first">
         <div id="out" data-component="DataBind" data-option-key="first"></div>
@@ -276,7 +274,7 @@ describe('DataScope', () => {
 
   it('recomputes unkeyed subscribers on every keyed update', async () => {
     const group = uniqueGroup('values');
-    const root = await render(`
+    const root = await mount(`
       <div data-component="DataScope" data-option-group="${group}">
         <input id="first" data-component="DataModel" name="first" value="A" data-option-immediate>
         <input data-component="DataModel" name="last" value="B" data-option-immediate>
@@ -296,7 +294,7 @@ describe('DataScope', () => {
 
   it('rebinds descendants when a scope is wrapped around existing content', async () => {
     const group = uniqueGroup('wrapped');
-    const root = await render(`
+    const root = await mount(`
       <div id="bind" data-component="DataBind" data-option-key="first"></div>
     `);
     const bind = at<DataBind>(root, '#bind', 'DataBind');
@@ -318,7 +316,7 @@ describe('DataScope', () => {
 
   it('reclaims descendants when the scope mounts around content that already resolved', async () => {
     const group = uniqueGroup('late');
-    const root = await render(`
+    const root = await mount(`
       <div id="scope" data-option-group="${group}">
         <div id="bind" data-component="DataBind" data-option-key="first"></div>
       </div>
@@ -341,7 +339,7 @@ describe('DataScope', () => {
   it('leaves nested members with their nearest scope when an outer one arrives late', async () => {
     const outerGroup = uniqueGroup('outer');
     const innerGroup = uniqueGroup('inner');
-    const root = await render(`
+    const root = await mount(`
       <div id="outer" data-option-group="${outerGroup}">
         <div id="inner" data-component="DataScope" data-option-group="${innerGroup}">
           <div id="bind" data-component="DataBind"></div>
diff --git a/packages/v4/migration/Dialog/Dialog.spec.ts b/packages/v4/migration/Dialog/Dialog.spec.ts
index 09c7e464..7b5eac6c 100644
--- a/packages/v4/migration/Dialog/Dialog.spec.ts
+++ b/packages/v4/migration/Dialog/Dialog.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { registerComponent } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { resetDom, settle } from '../../src/test/index.js';
 import { Transition } from '../Transition/Transition.js';
 import { Dialog } from './Dialog.js';
 
diff --git a/packages/v4/migration/Draggable/Draggable.spec.ts b/packages/v4/migration/Draggable/Draggable.spec.ts
index 98c5219f..a7c328fa 100644
--- a/packages/v4/migration/Draggable/Draggable.spec.ts
+++ b/packages/v4/migration/Draggable/Draggable.spec.ts
@@ -1,7 +1,8 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
-import { Draggable, type DraggablePosition } from './Draggable.js';
+import { getInstance } from '../../src/test-utils.js';
+import { recordEvents, resetDom, settle, waitFor } from '../../src/test/index.js';
+import { Draggable } from './Draggable.js';
 
 registerComponents(Draggable);
 
@@ -63,31 +64,23 @@ function release(): void {
   window.dispatchEvent(new PointerEvent('pointerup'));
 }
 
-/** Let the drag service, the frame loop and the scheduler lanes run. */
-async function settled(count = 12): Promise<void> {
+/** A bounded quiet period, for the states that are asserted as unchanged. */
+async function quiet(count = 12): Promise<void> {
   for (let i = 0; i < count; i += 1) {
     await settle();
   }
 }
 
-/** Collect the drag lifecycle events the component emits. */
-function record(root: EventTarget): Array<{ type: string; detail: DraggablePosition }> {
-  const events: Array<{ type: string; detail: DraggablePosition }> = [];
-  for (const type of [
-    'drag-start',
-    'drag-drag',
-    'drag-drop',
-    'drag-inertia',
-    'drag-stop',
-    'drag-fit',
-    'drag-render',
-  ]) {
-    root.addEventListener(type, (event) => {
-      events.push({ type, detail: { ...(event as CustomEvent<DraggablePosition>).detail } });
-    });
-  }
-  return events;
-}
+/** The drag lifecycle the component emits, in no particular order. */
+const DRAG_EVENTS = [
+  'drag-start',
+  'drag-drag',
+  'drag-drop',
+  'drag-inertia',
+  'drag-stop',
+  'drag-fit',
+  'drag-render',
+];
 
 describe('Draggable — geometry', () => {
   it('reads a single margin value into all four sides', async () => {
@@ -156,7 +149,7 @@ describe('Draggable — geometry', () => {
     const other = document.createElement('div');
     document.body.append(other);
     other.append(el);
-    await settled();
+    await waitFor(() => getInstance<Draggable>(el, 'Draggable')?.bounds.xMax === 200);
 
     expect(getInstance<Draggable>(el, 'Draggable').bounds.xMax).toBe(200);
   });
@@ -165,12 +158,12 @@ describe('Draggable — geometry', () => {
 describe('Draggable — the drag', () => {
   it('emits the drag lifecycle, never the idle mode', async () => {
     const { el, target } = await render();
-    const events = record(el);
+    const { events } = recordEvents(el, ...DRAG_EVENTS);
 
     grab(target, 10, 10);
     move(60, 40);
     release();
-    await settled();
+    await waitFor(() => events.some(({ type }) => type === 'drag-drop'));
 
     const types = events.map(({ type }) => type);
     expect(types).toContain('drag-start');
@@ -184,7 +177,7 @@ describe('Draggable — the drag', () => {
 
     grab(target, 10, 10);
     move(90, 60);
-    await settled();
+    await waitFor(() => instance.props.x === 80);
 
     expect(instance.props.x).toBe(80);
     expect(instance.props.y).toBe(50);
@@ -197,12 +190,12 @@ describe('Draggable — the drag', () => {
     grab(target, 10, 10);
     move(60, 10);
     release();
-    await settled();
+    await waitFor(() => instance.props.x === 50);
     const afterFirst = instance.props.x;
 
     grab(target, 0, 0);
     move(20, 0);
-    await settled();
+    await waitFor(() => instance.props.x === afterFirst + 20);
 
     expect(instance.props.x).toBe(afterFirst + 20);
     release();
@@ -213,7 +206,9 @@ describe('Draggable — the drag', () => {
 
     grab(target, 10, 10);
     move(110, 10);
-    await settled();
+    // The damped value lands a lane before the DOM write it feeds, so the
+    // written transform is the state worth polling for.
+    await waitFor(() => target.style.transform.includes('translate3d('));
 
     expect(target.style.transform).toContain('translate3d(');
     expect(instance.props.dampedX).toBeGreaterThan(0);
@@ -225,7 +220,7 @@ describe('Draggable — the drag', () => {
 
     grab(target, 10, 10);
     move(110, 110);
-    await settled();
+    await quiet();
 
     expect(target.style.transform).toContain('0px, 0px)');
     release();
@@ -236,7 +231,7 @@ describe('Draggable — the drag', () => {
 
     grab(target, 0, 0);
     move(150, 125);
-    await settled();
+    await waitFor(() => instance.props.progressX > 0);
 
     expect(instance.props.progressX).toBeCloseTo(0.5, 5);
     expect(instance.props.progressY).toBeCloseTo(0.5, 5);
@@ -250,7 +245,7 @@ describe('Draggable — the bounds', () => {
 
     grab(target, 0, 0);
     move(900, 900);
-    await settled();
+    await waitFor(() => instance.props.x === 300);
 
     expect(instance.props.x).toBe(300);
     expect(instance.props.y).toBe(250);
@@ -262,7 +257,7 @@ describe('Draggable — the bounds', () => {
 
     grab(target, 0, 0);
     move(900, 0);
-    await settled();
+    await waitFor(() => instance.props.x === 900);
 
     expect(instance.props.x).toBe(900);
     release();
@@ -274,12 +269,12 @@ describe('Draggable — the bounds', () => {
    */
   it('animates back inside the bounds on drop with `fitBounds`', async () => {
     const { el, target, instance } = await render('data-option-fit-bounds');
-    const events = record(el);
+    const { events } = recordEvents(el, ...DRAG_EVENTS);
 
     grab(target, 0, 0);
     move(900, 0);
     release();
-    await settled(40);
+    await waitFor(() => !instance.$services.ticked.isActive, { timeout: 2000 });
 
     expect(instance.props.x).toBe(300);
     expect(instance.props.dampedX).toBe(300);
@@ -304,7 +299,7 @@ describe('Draggable — the bounds', () => {
     expect(instance.$services.ticked.isActive).toBe(true);
 
     root.remove();
-    await settled();
+    await waitFor(() => !instance.$services.ticked.isActive);
 
     expect(instance.$services.ticked.isActive).toBe(false);
   });
diff --git a/packages/v4/migration/Fetch/Fetch.spec.ts b/packages/v4/migration/Fetch/Fetch.spec.ts
index a26aca98..8fc34cb4 100644
--- a/packages/v4/migration/Fetch/Fetch.spec.ts
+++ b/packages/v4/migration/Fetch/Fetch.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { mount, recordEvents, resetDom, settle } from '../../src/test/index.js';
 import { Fetch, FETCH_EVENTS, type FetchEmits } from './Fetch.js';
 import { FetchShopifySection } from './FetchShopifySection.js';
 
@@ -34,20 +35,12 @@ afterEach(async () => {
   await resetDom();
 });
 
-async function render(html: string): Promise<HTMLElement> {
-  const root = document.createElement('div');
-  root.innerHTML = html;
-  document.body.append(root);
-  await settle();
-  return root;
-}
-
 /** Mount one `Fetch` (or subclass) from markup and hand back the instance. */
 async function mountFetch<T extends Fetch = Fetch>(
   html: string,
   name = 'Fetch',
 ): Promise<{ root: HTMLElement; instance: T }> {
-  const root = await render(html);
+  const root = await mount(html);
   const el = root.firstElementChild as HTMLElement;
   return { root, instance: getInstance<T>(el, name) };
 }
@@ -67,15 +60,6 @@ function stubClient(
 }
 
 /** Collect every `Fetch` event dispatched under `root`, in order. */
-function recordEvents(root: EventTarget): Array<{ type: string; detail: unknown }> {
-  const events: Array<{ type: string; detail: unknown }> = [];
-  for (const type of Object.values(FETCH_EVENTS)) {
-    root.addEventListener(type, (event) => {
-      events.push({ type, detail: (event as CustomEvent).detail });
-    });
-  }
-  return events;
-}
 
 /** Take over `document.startViewTransition` and count the calls. */
 function stubViewTransition(): { spy: ReturnType<typeof vi.fn>; restore: () => void } {
@@ -381,7 +365,7 @@ describe('Fetch — the request', () => {
     const { root, instance } = await mountFetch(
       `<a data-component="Fetch" href="#a" data-option-no-view-transition></a>`,
     );
-    const events = recordEvents(root);
+    const { events } = recordEvents(root, ...Object.values(FETCH_EVENTS));
 
     await instance.fetch();
     await settle();
@@ -436,7 +420,7 @@ describe('Fetch — the request', () => {
         }),
     );
     const { root, instance } = await mountFetch(`<a data-component="Fetch" href="#a"></a>`);
-    const events = recordEvents(root);
+    const { events } = recordEvents(root, ...Object.values(FETCH_EVENTS));
 
     void instance.fetch();
     await settle();
@@ -450,7 +434,7 @@ describe('Fetch — the request', () => {
   it('emits `fetch-abort` when `abort()` is called', async () => {
     stubClient(async () => new Promise<Response>(() => {}));
     const { root, instance } = await mountFetch(`<a data-component="Fetch" href="#a"></a>`);
-    const events = recordEvents(root);
+    const { events } = recordEvents(root, ...Object.values(FETCH_EVENTS));
 
     void instance.fetch();
     instance.abort('because');
@@ -462,7 +446,7 @@ describe('Fetch — the request', () => {
 
   it('evaluates the `response` option to extract the content', async () => {
     stubClient(async () => new Response(JSON.stringify({ html: '<div id="target">json</div>' })));
-    await render(`<div id="target">old</div>`);
+    await mount(`<div id="target">old</div>`);
     const { instance } = await mountFetch(
       `<a data-component="Fetch" href="#a" data-option-no-view-transition
         data-option-response="response.json().then((data) => data.html)"></a>`,
@@ -477,7 +461,7 @@ describe('Fetch — the request', () => {
   it('emits `fetch-error` when the response is not ok', async () => {
     stubClient(async () => new Response('nope', { status: 500 }));
     const { root, instance } = await mountFetch(`<a data-component="Fetch" href="#a"></a>`);
-    const events = recordEvents(root);
+    const { events } = recordEvents(root, ...Object.values(FETCH_EVENTS));
 
     await instance.fetch();
 
@@ -490,7 +474,7 @@ describe('Fetch — the request', () => {
       throw new Error('network down');
     });
     const { root, instance } = await mountFetch(`<a data-component="Fetch" href="#a"></a>`);
-    const events = recordEvents(root);
+    const { events } = recordEvents(root, ...Object.values(FETCH_EVENTS));
 
     await instance.fetch();
 
@@ -501,7 +485,7 @@ describe('Fetch — the request', () => {
 
 describe('Fetch — the DOM update', () => {
   it('replaces the matching element and leaves the rest alone', async () => {
-    await render(`<div id="target">old</div><div id="untouched">keep</div>`);
+    await mount(`<div id="target">old</div><div id="untouched">keep</div>`);
     const { instance } = await mountFetch(`<a data-component="Fetch" href="#a"></a>`);
 
     await instance.update(
@@ -516,7 +500,7 @@ describe('Fetch — the DOM update', () => {
   });
 
   it('honours the `selector` option', async () => {
-    await render(`<div id="target">old</div><section id="section">old</section>`);
+    await mount(`<div id="target">old</div><section id="section">old</section>`);
     const { instance } = await mountFetch(
       `<a data-component="Fetch" href="#a" data-option-selector="section[id]"></a>`,
     );
@@ -532,7 +516,7 @@ describe('Fetch — the DOM update', () => {
   });
 
   it('appends in `append` mode', async () => {
-    await render(`<div id="target">old</div>`);
+    await mount(`<div id="target">old</div>`);
     const { instance } = await mountFetch(
       `<a data-component="Fetch" href="#a" data-option-mode="append"></a>`,
     );
@@ -543,7 +527,7 @@ describe('Fetch — the DOM update', () => {
   });
 
   it('prepends in `prepend` mode', async () => {
-    await render(`<div id="target">old</div>`);
+    await mount(`<div id="target">old</div>`);
     const { instance } = await mountFetch(
       `<a data-component="Fetch" href="#a" data-option-mode="prepend"></a>`,
     );
@@ -558,7 +542,7 @@ describe('Fetch — the DOM update', () => {
    * with `childrenOnly`, which is why this port keeps its own update path.
    */
   it('keeps the node and updates its attributes in `morph` mode', async () => {
-    await render(`<div id="target" class="old">old</div>`);
+    await mount(`<div id="target" class="old">old</div>`);
     const before = document.getElementById('target');
     const { instance } = await mountFetch(
       `<a data-component="Fetch" href="#a" data-option-mode="morph"></a>`,
@@ -576,7 +560,7 @@ describe('Fetch — the DOM update', () => {
   });
 
   it('replaces the element itself in `replace` mode, attributes included', async () => {
-    await render(`<div id="target" class="old">old</div>`);
+    await mount(`<div id="target" class="old">old</div>`);
     const before = document.getElementById('target');
     const { instance } = await mountFetch(`<a data-component="Fetch" href="#a"></a>`);
 
@@ -592,7 +576,7 @@ describe('Fetch — the DOM update', () => {
 
   it('runs an injected script exactly once and leaves the surviving ones alone', async () => {
     window.__fetchScriptRuns = 0;
-    await render(
+    await mount(
       `<div id="target"><script id="kept">window.__fetchScriptRuns = (window.__fetchScriptRuns ?? 0) + 1;</script></div>`,
     );
     const runsAfterInitialParse = window.__fetchScriptRuns;
@@ -611,7 +595,7 @@ describe('Fetch — the DOM update', () => {
   });
 
   it('pushes history and adopts the response title when `history` is enabled', async () => {
-    await render(`<div id="target">old</div>`);
+    await mount(`<div id="target">old</div>`);
     const { instance } = await mountFetch(
       `<a data-component="Fetch" href="#a" data-option-history></a>`,
     );
@@ -629,7 +613,7 @@ describe('Fetch — the DOM update', () => {
   });
 
   it('does not push history for an update triggered by popstate', async () => {
-    await render(`<div id="target">old</div>`);
+    await mount(`<div id="target">old</div>`);
     const { instance } = await mountFetch(
       `<a data-component="Fetch" href="#a" data-option-history></a>`,
     );
@@ -645,7 +629,7 @@ describe('Fetch — the DOM update', () => {
   });
 
   it('mounts a component that arrives in the fetched content, with no `$update()`', async () => {
-    await render(`<div id="target"></div>`);
+    await mount(`<div id="target"></div>`);
     const { instance } = await mountFetch(`<a data-component="Fetch" href="#a"></a>`);
 
     await instance.update(
@@ -663,7 +647,7 @@ describe('Fetch — the DOM update', () => {
 describe('Fetch — the dom-update negotiation', () => {
   it('runs the update inside a view transition by default', async () => {
     const { spy, restore } = stubViewTransition();
-    await render(`<div id="target">old</div>`);
+    await mount(`<div id="target">old</div>`);
     const { instance } = await mountFetch(`<a data-component="Fetch" href="#a"></a>`);
 
     await instance.update(new URL('https://example.com'), {}, '<div id="target">new</div>');
@@ -675,7 +659,7 @@ describe('Fetch — the dom-update negotiation', () => {
 
   it('skips the view transition when the option is off', async () => {
     const { spy, restore } = stubViewTransition();
-    await render(`<div id="target">old</div>`);
+    await mount(`<div id="target">old</div>`);
     const { instance } = await mountFetch(
       `<a data-component="Fetch" href="#a" data-option-no-view-transition></a>`,
     );
@@ -689,7 +673,7 @@ describe('Fetch — the dom-update negotiation', () => {
 
   it('batches two simultaneous updates into one view transition', async () => {
     const { spy, restore } = stubViewTransition();
-    await render(`<div id="one">old</div><div id="two">old</div>`);
+    await mount(`<div id="one">old</div><div id="two">old</div>`);
     const { instance: a } = await mountFetch(`<a data-component="Fetch" href="#a"></a>`);
     const { instance: b } = await mountFetch(`<a data-component="Fetch" href="#b"></a>`);
 
@@ -710,7 +694,7 @@ describe('Fetch — the dom-update negotiation', () => {
    */
   it('lets an ancestor `wrap()` runner replace the default view transition', async () => {
     const { spy, restore } = stubViewTransition();
-    await render(`<div id="target">old</div>`);
+    await mount(`<div id="target">old</div>`);
     const { root, instance } = await mountFetch(`<a data-component="Fetch" href="#a"></a>`);
     const order: string[] = [];
     root.addEventListener('js-toolkit:dom:update', (event) => {
@@ -731,7 +715,7 @@ describe('Fetch — the dom-update negotiation', () => {
   });
 
   it('accepts a transitioner object exposing `update()`', async () => {
-    await render(`<div id="target">old</div>`);
+    await mount(`<div id="target">old</div>`);
     const { root, instance } = await mountFetch(
       `<a data-component="Fetch" href="#a" data-option-no-view-transition></a>`,
     );
@@ -747,7 +731,7 @@ describe('Fetch — the dom-update negotiation', () => {
   });
 
   it('applies the change anyway when a runner settles without applying it', async () => {
-    await render(`<div id="target">old</div>`);
+    await mount(`<div id="target">old</div>`);
     const { root, instance } = await mountFetch(
       `<a data-component="Fetch" href="#a" data-option-no-view-transition></a>`,
     );
@@ -762,7 +746,7 @@ describe('Fetch — the dom-update negotiation', () => {
 
   it('stops claiming the protocol once the update has finished', async () => {
     const { spy, restore } = stubViewTransition();
-    await render(`<div id="target">old</div>`);
+    await mount(`<div id="target">old</div>`);
     const { instance } = await mountFetch(`<a data-component="Fetch" href="#a"></a>`);
 
     await instance.update(new URL('https://example.com'), {}, '<div id="target">new</div>');
@@ -835,7 +819,7 @@ describe('FetchShopifySection', () => {
           }),
         ),
     );
-    await render(`<div id="header">old header</div><div id="footer">old footer</div>`);
+    await mount(`<div id="header">old header</div><div id="footer">old footer</div>`);
     const { instance } = await mountFetch<FetchShopifySection>(
       `<a data-component="FetchShopifySection" href="#a" data-option-sections="header,footer"
         data-option-no-view-transition></a>`,
@@ -854,7 +838,7 @@ describe('FetchShopifySection', () => {
       async () =>
         new Response(JSON.stringify({ header: '<div id="header">new</div>', footer: null })),
     );
-    await render(`<div id="header">old</div><div id="footer">old</div>`);
+    await mount(`<div id="header">old</div><div id="footer">old</div>`);
     const { instance } = await mountFetch<FetchShopifySection>(
       `<a data-component="FetchShopifySection" href="#a" data-option-sections="header,footer"
         data-option-no-view-transition></a>`,
@@ -870,7 +854,7 @@ describe('FetchShopifySection', () => {
 
   it('degrades to the base text response when no sections are configured', async () => {
     stubClient(async () => new Response('<div id="target">plain html</div>'));
-    await render(`<div id="target">old</div>`);
+    await mount(`<div id="target">old</div>`);
     const { instance } = await mountFetch<FetchShopifySection>(
       `<a data-component="FetchShopifySection" href="#a" data-option-no-view-transition></a>`,
       'FetchShopifySection',
@@ -885,7 +869,7 @@ describe('FetchShopifySection', () => {
 
   it('honours a custom `response` option instead of unwrapping the JSON', async () => {
     stubClient(async () => new Response(JSON.stringify({ html: '<div id="target">custom</div>' })));
-    await render(`<div id="target">old</div>`);
+    await mount(`<div id="target">old</div>`);
     const { instance } = await mountFetch<FetchShopifySection>(
       `<a data-component="FetchShopifySection" href="#a" data-option-sections="header"
         data-option-no-view-transition
@@ -914,7 +898,7 @@ describe('FetchShopifySection', () => {
   });
 
   it('keeps the sections parameter out of the pushed url', async () => {
-    await render(`<div id="target">old</div>`);
+    await mount(`<div id="target">old</div>`);
     const { instance } = await mountFetch<FetchShopifySection>(
       `<a data-component="FetchShopifySection" href="#a" data-option-sections="header"
         data-option-history></a>`,
diff --git a/packages/v4/migration/Fetch/FetchShopifyPartial.spec.ts b/packages/v4/migration/Fetch/FetchShopifyPartial.spec.ts
index 1bb9bc02..af72221d 100644
--- a/packages/v4/migration/Fetch/FetchShopifyPartial.spec.ts
+++ b/packages/v4/migration/Fetch/FetchShopifyPartial.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { recordEvents, resetDom, settle } from '../../src/test/index.js';
 import { FETCH_EVENTS } from './Fetch.js';
 import { FetchShopifyPartial } from './FetchShopifyPartial.js';
 
@@ -51,23 +52,13 @@ function stubPartials(api: {
   FetchShopifyPartial.loadPartialsModule = async () => ({ partials: api });
 }
 
-function recordEvents(root: EventTarget): Array<{ type: string; detail: unknown }> {
-  const events: Array<{ type: string; detail: unknown }> = [];
-  for (const type of Object.values(FETCH_EVENTS)) {
-    root.addEventListener(type, (event) => {
-      events.push({ type, detail: (event as CustomEvent).detail });
-    });
-  }
-  return events;
-}
-
 describe('FetchShopifyPartial', () => {
   it('falls back to the base Fetch behaviour when no partials are configured', async () => {
     const client = stubClient();
     const { root, instance } = await mount(
       `<a data-component="FetchShopifyPartial" href="/page" id="a"><div id="a">old</div></a>`,
     );
-    const events = recordEvents(root);
+    const { events } = recordEvents(root, ...Object.values(FETCH_EVENTS));
 
     await instance.fetch();
     await settle();
@@ -84,7 +75,7 @@ describe('FetchShopifyPartial', () => {
     const { root, instance } = await mount(
       `<a data-component="FetchShopifyPartial" href="/page" data-option-partials="main, header"></a>`,
     );
-    const events = recordEvents(root);
+    const { events } = recordEvents(root, ...Object.values(FETCH_EVENTS));
 
     await instance.fetch();
     await settle();
diff --git a/packages/v4/migration/Figure/AbstractFigure.spec.ts b/packages/v4/migration/Figure/AbstractFigure.spec.ts
index 74282eff..a017366e 100644
--- a/packages/v4/migration/Figure/AbstractFigure.spec.ts
+++ b/packages/v4/migration/Figure/AbstractFigure.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { resetDom, settle, waitFor } from '../../src/test/index.js';
 import { Figure } from './Figure.js';
 
 registerComponents(Figure);
@@ -14,23 +15,13 @@ const ONSCREEN = 'position:absolute;top:0;left:0;width:50px;height:50px';
 const PIXEL =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
 
-async function observed(): Promise<void> {
+/** A bounded quiet period, for the assertions that nothing has loaded. */
+async function quiet(): Promise<void> {
   for (let i = 0; i < 6; i += 1) {
     await settle();
   }
 }
 
-/** Poll for a transition's kept end state; see `MenuList.spec.ts` for why. */
-async function waitForClass(el: HTMLElement, className: string, timeout = 1000): Promise<void> {
-  const deadline = Date.now() + timeout;
-  while (!el.classList.contains(className)) {
-    if (Date.now() > deadline) {
-      throw new Error(`waitForClass: "${className}" never landed on the element`);
-    }
-    await new Promise((resolve) => setTimeout(resolve, 10));
-  }
-}
-
 // A tiny 1x1 white pixel, distinct from PIXEL, standing in for a placeholder.
 const PLACEHOLDER =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=';
@@ -58,12 +49,12 @@ describe('Figure (AbstractFigure)', () => {
     const events: unknown[] = [];
     el.addEventListener('load', () => events.push(1));
 
-    await observed();
+    await quiet();
     expect(events).toEqual([]);
     expect(img.src).toBe(PLACEHOLDER);
 
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await waitFor(() => events.length > 0);
 
     expect(events).toEqual([1]);
     expect(img.src).toBe(PIXEL);
@@ -74,7 +65,7 @@ describe('Figure (AbstractFigure)', () => {
     const events: unknown[] = [];
     el.addEventListener('load', () => events.push(1));
 
-    await observed();
+    await quiet();
 
     expect(events).toEqual([]);
   });
@@ -85,11 +76,9 @@ describe('Figure (AbstractFigure)', () => {
       'data-option-lazy="true" data-option-enter-to="visible" data-option-enter-keep="true"',
     );
 
-    await observed();
-
     // Polled, not assumed: `mounted()` fire-and-forgets the transition, and a
     // kept end state lands a few frames after the image has loaded.
-    await waitForClass(img, 'visible');
+    await waitFor(() => img.classList.contains('visible'));
     expect(getInstance<Figure>(el, 'Figure').state).toBe('entering');
   });
 });
diff --git a/packages/v4/migration/Figure/FigureShopify.spec.ts b/packages/v4/migration/Figure/FigureShopify.spec.ts
index 5ed41958..f78a2346 100644
--- a/packages/v4/migration/Figure/FigureShopify.spec.ts
+++ b/packages/v4/migration/Figure/FigureShopify.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { resetDom, settle } from '../../src/test/index.js';
 import { FigureShopify } from './FigureShopify.js';
 
 registerComponents(FigureShopify);
diff --git a/packages/v4/migration/Figure/FigureTwicpics.spec.ts b/packages/v4/migration/Figure/FigureTwicpics.spec.ts
index a165b042..2eb8fcaf 100644
--- a/packages/v4/migration/Figure/FigureTwicpics.spec.ts
+++ b/packages/v4/migration/Figure/FigureTwicpics.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { resetDom, settle } from '../../src/test/index.js';
 import { FigureTwicpics } from './FigureTwicpics.js';
 
 registerComponents(FigureTwicpics);
diff --git a/packages/v4/migration/FigureVideo/FigureVideo.spec.ts b/packages/v4/migration/FigureVideo/FigureVideo.spec.ts
index 4a16110e..4e4706d0 100644
--- a/packages/v4/migration/FigureVideo/FigureVideo.spec.ts
+++ b/packages/v4/migration/FigureVideo/FigureVideo.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { captureDiagnostics, resetDom, settle, waitFor } from '../../src/test/index.js';
 import { FigureVideo } from './FigureVideo.js';
 
 registerComponents(FigureVideo);
@@ -14,7 +15,8 @@ const ONSCREEN = 'position:absolute;top:0;left:0;width:50px;height:50px';
 const PIXEL =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
 
-async function observed(): Promise<void> {
+/** A bounded quiet period, for the assertions that nothing has loaded. */
+async function quiet(): Promise<void> {
   for (let i = 0; i < 6; i += 1) {
     await settle();
   }
@@ -52,14 +54,14 @@ describe('FigureVideo', () => {
     const events: unknown[] = [];
     el.addEventListener('load', () => events.push(1));
 
-    await observed();
+    await quiet();
     expect(events).toEqual([]);
     expect(video.querySelector('source')?.src).toBe('');
 
     el.setAttribute('style', ONSCREEN);
     await settle();
     fireLoadedData(video);
-    await observed();
+    await waitFor(() => events.length > 0);
 
     expect(events).toEqual([1]);
     expect(video.querySelector('source')?.src).toBe(PIXEL);
@@ -71,9 +73,9 @@ describe('FigureVideo', () => {
     const events: unknown[] = [];
     el.addEventListener('load', () => events.push(1));
 
-    await observed();
+    await quiet();
     fireLoadedData(video);
-    await observed();
+    await quiet();
 
     expect(events).toEqual([]);
   });
@@ -82,9 +84,11 @@ describe('FigureVideo', () => {
     const { el, video } = render(ONSCREEN);
     await settle();
     fireLoadedData(video);
-    await observed();
-
-    const instance = getInstance<FigureVideo>(el, 'FigureVideo');
+    const instance = await waitFor(() =>
+      getInstance<FigureVideo>(el, 'FigureVideo')?.hasLoaded
+        ? getInstance<FigureVideo>(el, 'FigureVideo')
+        : null,
+    );
     const spy = vi.spyOn(instance, 'load');
 
     // A later mount cycle on the same instance — the in-view strategy can
@@ -108,7 +112,7 @@ describe('FigureVideo', () => {
     // v3 waits on `loadeddata` alone, so this never settled and `mounted()`
     // never returned.
     video.dispatchEvent(new Event('error'));
-    await observed();
+    await waitFor(() => details.length > 0);
 
     expect(details.map((detail) => detail.code)).toContain('figure-video.load-failed');
     // Left un-loaded, so a later mount cycle can retry.
@@ -121,11 +125,11 @@ describe('FigureVideo', () => {
     const root = document.createElement('div');
     root.innerHTML = `<div data-component="FigureVideo" style="${ONSCREEN}" data-option-lazy="true"></div>`;
     document.body.append(root);
-    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
 
-    await expect(observed()).resolves.toBeUndefined();
+    await expect(quiet()).resolves.toBeUndefined();
 
-    expect(warnSpy).toHaveBeenCalled();
-    warnSpy.mockRestore();
+    expect(log.codes).toEqual(['figure-video.invalid-ref']);
+    log.stop();
   });
 });
diff --git a/packages/v4/migration/FigureVideo/FigureVideoTwicpics.spec.ts b/packages/v4/migration/FigureVideo/FigureVideoTwicpics.spec.ts
index b77106da..e922e9ab 100644
--- a/packages/v4/migration/FigureVideo/FigureVideoTwicpics.spec.ts
+++ b/packages/v4/migration/FigureVideo/FigureVideoTwicpics.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { resetDom, settle } from '../../src/test/index.js';
 import { FigureVideoTwicpics } from './FigureVideoTwicpics.js';
 
 registerComponents(FigureVideoTwicpics);
diff --git a/packages/v4/migration/Hoverable/Hoverable.spec.ts b/packages/v4/migration/Hoverable/Hoverable.spec.ts
index 3204a534..f9f51c09 100644
--- a/packages/v4/migration/Hoverable/Hoverable.spec.ts
+++ b/packages/v4/migration/Hoverable/Hoverable.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { registerComponents, type ElementPointerProps, type RafProps } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { resetDom, settle } from '../../src/test/index.js';
 import { Hoverable } from './Hoverable.js';
 
 registerComponents(Hoverable);
diff --git a/packages/v4/migration/InView/InView.spec.ts b/packages/v4/migration/InView/InView.spec.ts
index 96fee6fc..92c99af5 100644
--- a/packages/v4/migration/InView/InView.spec.ts
+++ b/packages/v4/migration/InView/InView.spec.ts
@@ -1,7 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { Base, registerComponents, type BaseConfig } from '../../src/index.js';
 import { INSTANCES } from '../../src/protocol-symbols.js';
-import { resetDom, settle } from '../../src/test-utils.js';
+import { recordEvents, resetDom, settle, waitFor } from '../../src/test/index.js';
 import { InView } from './InView.js';
 import { InViewOnce } from './InViewOnce.js';
 
@@ -17,8 +17,13 @@ registerComponents(InView, InViewOnce, InViewSubclass);
 
 afterEach(resetDom);
 
-/** Give the observer a few frames to deliver. */
-async function observed(): Promise<void> {
+/**
+ * A bounded quiet period. Every *positive* wait in this file polls for the
+ * event it expects, but an absence cannot be polled for — so the assertions
+ * that nothing was emitted, and that nothing was instantiated, still need a
+ * span long enough for the observer to have spoken if it were going to.
+ */
+async function quiet(): Promise<void> {
   for (let i = 0; i < 6; i += 1) {
     await settle();
   }
@@ -35,25 +40,14 @@ function render(name: string, style: string, attributes: Record<string, string>
   return el;
 }
 
-/** Record events on `document` because the component may not exist before entry. */
-function record(): { events: string[]; stop: () => void } {
-  const events: string[] = [];
-  const listener = (event: Event) => events.push(event.type);
-  document.addEventListener('in-view', listener);
-  document.addEventListener('out-of-view', listener);
-  return {
-    events,
-    stop() {
-      document.removeEventListener('in-view', listener);
-      document.removeEventListener('out-of-view', listener);
-    },
-  };
-}
+// Recorded on `document`, because the component may not exist before entry.
+let log: ReturnType<typeof recordEvents>;
 
-let log: ReturnType<typeof record>;
+/** Only the order of the names is asserted here, so the payloads drop out. */
+const types = () => log.events.map(({ type }) => type);
 
 beforeEach(() => {
-  log = record();
+  log = recordEvents(document, 'in-view', 'out-of-view');
 });
 
 afterEach(() => {
@@ -63,42 +57,42 @@ afterEach(() => {
 describe('InView', () => {
   it('emits `in-view` when the element enters the viewport', async () => {
     const el = render('InView', OFFSCREEN);
-    await observed();
-    expect(log.events).toEqual([]);
+    await quiet();
+    expect(types()).toEqual([]);
 
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await waitFor(() => log.events.length > 0);
 
-    expect(log.events).toEqual(['in-view']);
+    expect(types()).toEqual(['in-view']);
   });
 
   it('emits `out-of-view` when the element leaves the viewport', async () => {
     const el = render('InView', ONSCREEN);
-    await observed();
+    await waitFor(() => log.events.length > 0);
 
     el.setAttribute('style', OFFSCREEN);
-    await observed();
+    await waitFor(() => log.events.length > 1);
 
-    expect(log.events).toEqual(['in-view', 'out-of-view']);
+    expect(types()).toEqual(['in-view', 'out-of-view']);
   });
 
   it('re-emits `in-view` on each re-entry, from the same instance', async () => {
     const el = render('InView', ONSCREEN);
-    await observed();
+    await waitFor(() => log.events.length > 0);
     const instance = el[INSTANCES]?.get('InView');
 
     el.setAttribute('style', OFFSCREEN);
-    await observed();
+    await waitFor(() => log.events.length > 1);
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await waitFor(() => log.events.length > 2);
 
-    expect(log.events).toEqual(['in-view', 'out-of-view', 'in-view']);
+    expect(types()).toEqual(['in-view', 'out-of-view', 'in-view']);
     expect(el[INSTANCES]?.get('InView')).toBe(instance);
   });
 
   it('does not instantiate the component until it is first seen', async () => {
     const el = render('InView', OFFSCREEN);
-    await observed();
+    await quiet();
 
     expect(el[INSTANCES]?.get('InView')).toBeUndefined();
   });
@@ -107,45 +101,44 @@ describe('InView', () => {
 describe('InViewOnce', () => {
   it('emits `in-view` when the element enters the viewport', async () => {
     const el = render('InViewOnce', OFFSCREEN);
-    await observed();
+    await quiet();
 
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await waitFor(() => log.events.length > 0);
 
-    expect(log.events).toEqual(['in-view']);
+    expect(types()).toEqual(['in-view']);
   });
 
   it('never emits `out-of-view`, and does not re-emit on a later entry', async () => {
     const el = render('InViewOnce', ONSCREEN);
-    await observed();
+    await waitFor(() => log.events.length > 0);
 
     el.setAttribute('style', OFFSCREEN);
-    await observed();
+    await quiet();
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await quiet();
 
-    expect(log.events).toEqual(['in-view']);
+    expect(types()).toEqual(['in-view']);
   });
 
   it('stays mounted after leaving the viewport, where v3 terminated', async () => {
     const el = render('InViewOnce', ONSCREEN);
-    await observed();
-    const instance = el[INSTANCES]?.get('InViewOnce');
+    const instance = await waitFor(() => el[INSTANCES]?.get('InViewOnce'));
 
     el.setAttribute('style', OFFSCREEN);
-    await observed();
+    await quiet();
 
     expect(instance?.$isMounted).toBe(true);
   });
 
   it('still emits `out-of-view` never, when the element is removed from the DOM', async () => {
     const el = render('InViewOnce', ONSCREEN);
-    await observed();
+    await waitFor(() => log.events.length > 0);
 
     el.remove();
-    await observed();
+    await quiet();
 
-    expect(log.events).toEqual(['in-view']);
+    expect(types()).toEqual(['in-view']);
   });
 });
 
@@ -153,20 +146,20 @@ describe('mount strategy gaps found by the port', () => {
   /** The root margin is part of the strategy string used before instantiation. */
   it('accepts a rootMargin in the per-element strategy', async () => {
     const el = render('InView', OFFSCREEN, { 'data-mount': 'in-view:400px' });
-    await observed();
-    expect(log.events).toEqual([]);
+    await quiet();
+    expect(types()).toEqual([]);
 
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await waitFor(() => log.events.length > 0);
 
-    expect(log.events).toEqual(['in-view']);
+    expect(types()).toEqual(['in-view']);
     expect(el[INSTANCES]?.get('InView')?.$isMounted).toBe(true);
   });
 
   /** Subclasses must inherit the resolved mount strategy. */
   it('inherits the mount strategy in a subclass that declares its own config', async () => {
     const el = render('InViewSubclass', OFFSCREEN);
-    await observed();
+    await quiet();
 
     expect(el[INSTANCES]?.get('InViewSubclass')).toBeUndefined();
   });
@@ -184,19 +177,19 @@ describe('the strategy is per element, which the decorator never was', () => {
 
   it('lets `data-mount` override the class default on one element', async () => {
     const el = render('InView', OFFSCREEN, { 'data-mount': 'eager' });
-    await observed();
+    await waitFor(() => el[INSTANCES]?.get('InView')?.$isMounted);
 
     expect(el[INSTANCES]?.get('InView')?.$isMounted).toBe(true);
-    expect(log.events).toEqual(['in-view']);
+    expect(types()).toEqual(['in-view']);
   });
 
   it('lets `data-mount="in-view"` give the strategy to a component that never asked', async () => {
     const el = render('InViewEagerProbe', OFFSCREEN, { 'data-mount': 'in-view' });
-    await observed();
+    await quiet();
     expect(el[INSTANCES]?.get('InViewEagerProbe')).toBeUndefined();
 
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await waitFor(() => el[INSTANCES]?.get('InViewEagerProbe'));
     expect((el[INSTANCES]?.get('InViewEagerProbe') as Eager | undefined)?.mounts).toBe(1);
   });
 });
diff --git a/packages/v4/migration/LazyInclude/LazyInclude.spec.ts b/packages/v4/migration/LazyInclude/LazyInclude.spec.ts
index b8eb8a5f..e16683e0 100644
--- a/packages/v4/migration/LazyInclude/LazyInclude.spec.ts
+++ b/packages/v4/migration/LazyInclude/LazyInclude.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { Base, registerComponents, type BaseConfig } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { captureDiagnostics, mount, resetDom, settle, waitFor } from '../../src/test/index.js';
 import { LazyInclude } from './LazyInclude.js';
 
 /** A probe, so an injected component can prove it mounted. */
@@ -69,16 +70,11 @@ function stubFailure(): ReturnType<typeof vi.fn> {
   return client;
 }
 
-async function render(html: string): Promise<HTMLElement> {
-  const root = document.createElement('div');
-  root.innerHTML = html;
-  document.body.append(root);
-  await settle();
-  return root;
-}
-
-/** A few settles, because the include lands across several microtask turns. */
-async function included(): Promise<void> {
+/**
+ * A bounded quiet period, for the assertions that no request was made and no
+ * load was recorded. Everything else polls for the state it expects.
+ */
+async function quiet(): Promise<void> {
   for (let i = 0; i < 4; i += 1) {
     await settle();
   }
@@ -87,10 +83,10 @@ async function included(): Promise<void> {
 describe('LazyInclude', () => {
   it('fetches the `src` option on mount and injects the response', async () => {
     const client = stubFetch('<p>remote</p>');
-    const root = await render(
+    const root = await mount(
       `<div data-component="LazyInclude" data-option-src="/lazy.html"></div>`,
     );
-    await included();
+    await waitFor(() => client.mock.calls.length > 0);
 
     expect(client).toHaveBeenCalledWith('/lazy.html');
     expect(root.firstElementChild?.innerHTML.trim()).toBe('<p>remote</p>');
@@ -98,7 +94,7 @@ describe('LazyInclude', () => {
 
   it('hides the `loading` ref once the content lands', async () => {
     const deferred = deferFetch();
-    const root = await render(
+    const root = await mount(
       `<div data-component="LazyInclude" data-option-src="/lazy.html">
         <span data-ref="loading">Loading…</span>
       </div>`,
@@ -107,7 +103,7 @@ describe('LazyInclude', () => {
     expect(loading?.style.display).toBe('');
 
     deferred.resolve('<p>remote</p>');
-    await included();
+    await waitFor(() => loading?.style.display === 'none');
 
     // The ref was hidden before the swap removed it with the rest.
     expect(loading?.style.display).toBe('none');
@@ -115,12 +111,14 @@ describe('LazyInclude', () => {
 
   it('reveals the `error` ref when the request fails', async () => {
     stubFailure();
-    const root = await render(
+    const root = await mount(
       `<div data-component="LazyInclude" data-option-src="/lazy.html">
         <span data-ref="error" style="display:none">Boom</span>
       </div>`,
     );
-    await included();
+    await waitFor(
+      () => root.querySelector<HTMLElement>('[data-ref="error"]')?.style.display === 'block',
+    );
 
     expect(root.querySelector<HTMLElement>('[data-ref="error"]')?.style.display).toBe('block');
   });
@@ -131,8 +129,8 @@ describe('LazyInclude', () => {
     document.addEventListener('content', () => seen.push('content'));
     document.addEventListener('always', () => seen.push('always'));
 
-    await render(`<div data-component="LazyInclude" data-option-src="/lazy.html"></div>`);
-    await included();
+    await mount(`<div data-component="LazyInclude" data-option-src="/lazy.html"></div>`);
+    await waitFor(() => seen.length === 2);
 
     expect(seen).toEqual(['content', 'always']);
   });
@@ -144,8 +142,8 @@ describe('LazyInclude', () => {
       contentWhenAlways = (event.target as HTMLElement).innerHTML;
     });
 
-    await render(`<div data-component="LazyInclude" data-option-src="/lazy.html"></div>`);
-    await included();
+    await mount(`<div data-component="LazyInclude" data-option-src="/lazy.html"></div>`);
+    await waitFor(() => contentWhenAlways);
 
     // `$emit()` returns before an async listener has finished, so an `always`
     // announced from the fetch chain alone would arrive on an empty element.
@@ -158,8 +156,8 @@ describe('LazyInclude', () => {
     document.addEventListener('error', () => seen.push('error'));
     document.addEventListener('always', () => seen.push('always'));
 
-    await render(`<div data-component="LazyInclude" data-option-src="/lazy.html"></div>`);
-    await included();
+    await mount(`<div data-component="LazyInclude" data-option-src="/lazy.html"></div>`);
+    await waitFor(() => seen.length === 2);
 
     expect(seen).toEqual(['error', 'always']);
   });
@@ -171,22 +169,22 @@ describe('LazyInclude', () => {
       detail = (event as CustomEvent<{ content: string }>).detail;
     });
 
-    await render(`<div data-component="LazyInclude" data-option-src="/lazy.html"></div>`);
-    await included();
+    await mount(`<div data-component="LazyInclude" data-option-src="/lazy.html"></div>`);
+    await waitFor(() => detail);
 
     expect(detail?.content).toBe('<p>remote</p>');
   });
 
   it('records the load when `terminateOnLoad` is set, and stays mounted', async () => {
     const deferred = deferFetch();
-    const root = await render(
+    const root = await mount(
       `<div data-component="LazyInclude" data-option-src="/lazy.html" data-option-terminate-on-load></div>`,
     );
     const instance = getInstance<LazyInclude>(root.firstElementChild as HTMLElement, 'LazyInclude');
     expect(instance.hasLoaded).toBe(false);
 
     deferred.resolve('<p>remote</p>');
-    await included();
+    await waitFor(() => instance.hasLoaded);
 
     // The component is not ended: it remembers, which is what the option
     // means and what survives the move the next spec makes.
@@ -196,13 +194,13 @@ describe('LazyInclude', () => {
 
   it('records nothing without `terminateOnLoad`', async () => {
     const deferred = deferFetch();
-    const root = await render(
+    const root = await mount(
       `<div data-component="LazyInclude" data-option-src="/lazy.html"></div>`,
     );
     const instance = getInstance<LazyInclude>(root.firstElementChild as HTMLElement, 'LazyInclude');
 
     deferred.resolve('<p>remote</p>');
-    await included();
+    await quiet();
 
     expect(instance.hasLoaded).toBe(false);
     expect(instance.$isMounted).toBe(true);
@@ -210,14 +208,14 @@ describe('LazyInclude', () => {
 
   it('warns and fetches nothing without a `src` option', async () => {
     const client = stubFetch('<p>remote</p>');
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
 
-    await render(`<div data-component="LazyInclude"></div>`);
-    await included();
+    await mount(`<div data-component="LazyInclude"></div>`);
+    await quiet();
 
     expect(client).not.toHaveBeenCalled();
-    expect(warn).toHaveBeenCalled();
-    warn.mockRestore();
+    expect(log.codes).toEqual(['lazy-include.missing-src']);
+    log.stop();
   });
 
   /**
@@ -227,8 +225,8 @@ describe('LazyInclude', () => {
   it('runs a script that arrives with the included content', async () => {
     stubFetch('<script>window.__lazyScriptRuns = (window.__lazyScriptRuns ?? 0) + 1;</script>');
 
-    await render(`<div data-component="LazyInclude" data-option-src="/lazy.html"></div>`);
-    await included();
+    await mount(`<div data-component="LazyInclude" data-option-src="/lazy.html"></div>`);
+    await waitFor(() => window.__lazyScriptRuns === 1);
 
     expect(window.__lazyScriptRuns).toBe(1);
   });
@@ -236,8 +234,8 @@ describe('LazyInclude', () => {
   it('mounts a component that arrives with the included content', async () => {
     stubFetch('<span data-component="Probe"></span>');
 
-    await render(`<div data-component="LazyInclude" data-option-src="/lazy.html"></div>`);
-    await included();
+    await mount(`<div data-component="LazyInclude" data-option-src="/lazy.html"></div>`);
+    await waitFor(() => Probe.mounts === 1);
 
     expect(Probe.mounts).toBe(1);
   });
@@ -249,16 +247,16 @@ describe('LazyInclude', () => {
    */
   it('fetches again when the element is moved, because a move remounts', async () => {
     const client = stubFetch('<p>remote</p>');
-    const root = await render(
+    const root = await mount(
       `<div data-component="LazyInclude" data-option-src="/lazy.html"></div>`,
     );
-    await included();
+    await waitFor(() => client.mock.calls.length === 1);
     expect(client).toHaveBeenCalledTimes(1);
 
     const other = document.createElement('section');
     document.body.append(other);
     other.append(root.firstElementChild as HTMLElement);
-    await included();
+    await waitFor(() => client.mock.calls.length === 2);
 
     expect(client).toHaveBeenCalledTimes(2);
   });
@@ -271,17 +269,17 @@ describe('LazyInclude', () => {
   it('fetches again after a failed load, whatever `terminateOnLoad` says', async () => {
     const client = vi.fn().mockRejectedValue(new Error('offline'));
     vi.stubGlobal('fetch', client);
-    const root = await render(
+    const root = await mount(
       `<div data-component="LazyInclude" data-option-src="/lazy.html" data-option-terminate-on-load></div>`,
     );
     const el = root.firstElementChild as HTMLElement;
-    await included();
+    await waitFor(() => client.mock.calls.length === 1);
     expect(getInstance<LazyInclude>(el, 'LazyInclude').hasLoaded).toBe(false);
 
     const other = document.createElement('section');
     document.body.append(other);
     other.append(el);
-    await included();
+    await waitFor(() => client.mock.calls.length === 2);
 
     // A request that failed is the one worth retrying on the next mount.
     expect(client).toHaveBeenCalledTimes(2);
@@ -289,16 +287,16 @@ describe('LazyInclude', () => {
 
   it('does not fetch again once `terminateOnLoad` has been honoured', async () => {
     const client = stubFetch('<p>remote</p>');
-    const root = await render(
+    const root = await mount(
       `<div data-component="LazyInclude" data-option-src="/lazy.html" data-option-terminate-on-load></div>`,
     );
     const el = root.firstElementChild as HTMLElement;
-    await included();
+    await waitFor(() => getInstance<LazyInclude>(el, 'LazyInclude').hasLoaded);
 
     const other = document.createElement('section');
     document.body.append(other);
     other.append(el);
-    await included();
+    await quiet();
 
     expect(client).toHaveBeenCalledTimes(1);
   });
diff --git a/packages/v4/migration/Menu/Menu.spec.ts b/packages/v4/migration/Menu/Menu.spec.ts
index 6ed1f149..b3329a87 100644
--- a/packages/v4/migration/Menu/Menu.spec.ts
+++ b/packages/v4/migration/Menu/Menu.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { resetDom, settle } from '../../src/test/index.js';
 import { Menu } from './Menu.js';
 import { MenuBtn } from './MenuBtn.js';
 import { MenuList } from './MenuList.js';
diff --git a/packages/v4/migration/Menu/MenuBtn.spec.ts b/packages/v4/migration/Menu/MenuBtn.spec.ts
index 04588e81..9d4ab63d 100644
--- a/packages/v4/migration/Menu/MenuBtn.spec.ts
+++ b/packages/v4/migration/Menu/MenuBtn.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { resetDom, settle } from '../../src/test/index.js';
 import { MenuBtn } from './MenuBtn.js';
 
 registerComponents(MenuBtn);
diff --git a/packages/v4/migration/Menu/MenuList.spec.ts b/packages/v4/migration/Menu/MenuList.spec.ts
index f7f3facf..d3b05012 100644
--- a/packages/v4/migration/Menu/MenuList.spec.ts
+++ b/packages/v4/migration/Menu/MenuList.spec.ts
@@ -1,29 +1,13 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { mount, resetDom, settle, waitFor } from '../../src/test/index.js';
 import { MenuList } from './MenuList.js';
 
 registerComponents(MenuList);
 
 afterEach(resetDom);
 
-/**
- * `open()`/`close()` start their transition and do not return it, and a kept
- * end state only lands a few frames later — after `nextFrame`, the `from` and
- * `active` states, and either a `transitionend` or one more frame. A single
- * `settle()` is usually enough and is not a guarantee: under full-suite load
- * these assertions failed intermittently. Poll for the class instead.
- */
-async function waitForClass(el: HTMLElement, className: string, timeout = 1000): Promise<void> {
-  const deadline = Date.now() + timeout;
-  while (!el.classList.contains(className)) {
-    if (Date.now() > deadline) {
-      throw new Error(`waitForClass: "${className}" never landed on the element`);
-    }
-    await new Promise((resolve) => setTimeout(resolve, 10));
-  }
-}
-
 async function render(): Promise<{
   root: HTMLElement;
   outer: MenuList;
@@ -31,8 +15,7 @@ async function render(): Promise<{
   outerLink: HTMLElement;
   nestedLink: HTMLElement;
 }> {
-  const root = document.createElement('div');
-  root.innerHTML = `
+  const root = await mount(`
     <ul data-component="MenuList" data-option-enter-to="open" data-option-leave-to="closed" id="outer-list">
       <li><a href="#" id="outer-link">Link 1</a></li>
       <li>
@@ -40,9 +23,7 @@ async function render(): Promise<{
           <li><a href="#" id="nested-link">Nested link</a></li>
         </ul>
       </li>
-    </ul>`;
-  document.body.append(root);
-  await settle();
+    </ul>`);
   return {
     root,
     outer: getInstance<MenuList>(root.querySelector('#outer-list'), 'MenuList'),
@@ -65,7 +46,12 @@ describe('MenuList', () => {
     outer.$el.addEventListener('items-open', () => events.push('items-open'));
 
     outer.open();
-    await waitForClass(outer.$el, 'open');
+    // `open()`/`close()` start their transition and do not return it, and a
+    // kept end state only lands a few frames later — after `nextFrame`, the
+    // `from` and `active` states, and either a `transitionend` or one more
+    // frame. A single `settle()` is generous, not a guarantee: under
+    // full-suite load these assertions failed intermittently.
+    await waitFor(() => outer.$el.classList.contains('open'));
 
     expect(outer.isOpen).toBe(true);
     expect(outer.$el.getAttribute('aria-hidden')).toBe('false');
@@ -92,7 +78,7 @@ describe('MenuList', () => {
     });
 
     outer.close();
-    await waitForClass(outer.$el, 'closed');
+    await waitFor(() => outer.$el.classList.contains('closed'));
 
     expect(outer.isOpen).toBe(false);
     expect(outer.$el.getAttribute('aria-hidden')).toBe('true');
diff --git a/packages/v4/migration/Prefetch/Prefetch.spec.ts b/packages/v4/migration/Prefetch/Prefetch.spec.ts
index 17200815..1bd7ba3a 100644
--- a/packages/v4/migration/Prefetch/Prefetch.spec.ts
+++ b/packages/v4/migration/Prefetch/Prefetch.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { mount, resetDom, settle, waitFor } from '../../src/test/index.js';
 import { AbstractPrefetch } from './AbstractPrefetch.js';
 import { PrefetchOnInteraction } from './PrefetchOnInteraction.js';
 import { PrefetchWhenVisible } from './PrefetchWhenVisible.js';
@@ -39,16 +40,11 @@ afterEach(async () => {
   await resetDom();
 });
 
-async function render(html: string): Promise<HTMLElement> {
-  const root = document.createElement('div');
-  root.innerHTML = html;
-  document.body.append(root);
-  await settle();
-  return root;
-}
-
-/** Give the observer and the link a few frames. */
-async function observed(): Promise<void> {
+/**
+ * A bounded quiet period, for the assertions that no hint was appended and no
+ * component was instantiated. Everything positive is polled for instead.
+ */
+async function quiet(): Promise<void> {
   for (let i = 0; i < 8; i += 1) {
     await settle();
   }
@@ -57,7 +53,7 @@ async function observed(): Promise<void> {
 describe('AbstractPrefetch — is the URL prefetchable', () => {
   it('accepts a same-origin URL that is not the current page', async () => {
     const href = uniqueHref();
-    const root = await render(`<a data-component="AbstractPrefetch" href="${href}"></a>`);
+    const root = await mount(`<a data-component="AbstractPrefetch" href="${href}"></a>`);
     const instance = getInstance<AbstractPrefetch>(
       root.firstElementChild as HTMLElement,
       'AbstractPrefetch',
@@ -68,7 +64,7 @@ describe('AbstractPrefetch — is the URL prefetchable', () => {
   });
 
   it('refuses a cross-origin URL', async () => {
-    const root = await render(
+    const root = await mount(
       `<a data-component="AbstractPrefetch" href="https://example.com/other"></a>`,
     );
     const instance = getInstance<AbstractPrefetch>(
@@ -80,7 +76,7 @@ describe('AbstractPrefetch — is the URL prefetchable', () => {
   });
 
   it('refuses the current page', async () => {
-    const root = await render(
+    const root = await mount(
       `<a data-component="AbstractPrefetch" href="${window.location.href}"></a>`,
     );
     const instance = getInstance<AbstractPrefetch>(
@@ -92,7 +88,7 @@ describe('AbstractPrefetch — is the URL prefetchable', () => {
   });
 
   it('refuses an anchor into the current page', async () => {
-    const root = await render(`<a data-component="AbstractPrefetch" href="#section"></a>`);
+    const root = await mount(`<a data-component="AbstractPrefetch" href="#section"></a>`);
     const instance = getInstance<AbstractPrefetch>(
       root.firstElementChild as HTMLElement,
       'AbstractPrefetch',
@@ -102,7 +98,7 @@ describe('AbstractPrefetch — is the URL prefetchable', () => {
   });
 
   it('refuses when the `prefetch` option is off', async () => {
-    const root = await render(
+    const root = await mount(
       `<a data-component="AbstractPrefetch" href="${uniqueHref()}" data-option-no-prefetch></a>`,
     );
     const instance = getInstance<AbstractPrefetch>(
@@ -118,7 +114,7 @@ describe('AbstractPrefetch — is the URL prefetchable', () => {
    * there. Found by running the port rather than by reading it.
    */
   it('answers for an anchor with no href instead of throwing', async () => {
-    const root = await render(`<a data-component="AbstractPrefetch"></a>`);
+    const root = await mount(`<a data-component="AbstractPrefetch"></a>`);
     const instance = getInstance<AbstractPrefetch>(
       root.firstElementChild as HTMLElement,
       'AbstractPrefetch',
@@ -133,21 +129,21 @@ describe('AbstractPrefetch — is the URL prefetchable', () => {
 describe('AbstractPrefetch — the hint', () => {
   it('appends a prefetch link for a prefetchable URL', async () => {
     const href = uniqueHref();
-    const root = await render(`<a data-component="AbstractPrefetch" href="${href}"></a>`);
+    const root = await mount(`<a data-component="AbstractPrefetch" href="${href}"></a>`);
     const instance = getInstance<AbstractPrefetch>(
       root.firstElementChild as HTMLElement,
       'AbstractPrefetch',
     );
 
     instance.prefetch();
-    await observed();
+    await waitFor(() => hasPrefetchLink(href));
 
     expect(hasPrefetchLink(href)).toBe(true);
   });
 
   it('appends nothing for a URL that is not prefetchable', async () => {
     const before = prefetchLinks().length;
-    const root = await render(
+    const root = await mount(
       `<a data-component="AbstractPrefetch" href="https://example.com/other"></a>`,
     );
     const instance = getInstance<AbstractPrefetch>(
@@ -156,14 +152,14 @@ describe('AbstractPrefetch — the hint', () => {
     );
 
     instance.prefetch();
-    await observed();
+    await quiet();
 
     expect(prefetchLinks()).toHaveLength(before);
   });
 
   it('emits `prefetched` with the URL once the hint has settled', async () => {
     const href = uniqueHref();
-    const root = await render(`<a data-component="AbstractPrefetch" href="${href}"></a>`);
+    const root = await mount(`<a data-component="AbstractPrefetch" href="${href}"></a>`);
     const instance = getInstance<AbstractPrefetch>(
       root.firstElementChild as HTMLElement,
       'AbstractPrefetch',
@@ -174,7 +170,7 @@ describe('AbstractPrefetch — the hint', () => {
     });
 
     instance.prefetch();
-    await observed();
+    await waitFor(() => detail);
 
     expect(detail?.url.href).toBe(href);
   });
@@ -185,7 +181,7 @@ describe('AbstractPrefetch — the hint', () => {
    */
   it('appends one link for two components pointing at the same URL', async () => {
     const href = uniqueHref();
-    const root = await render(`
+    const root = await mount(`
       <a data-component="AbstractPrefetch" href="${href}"></a>
       <a data-component="AbstractPrefetch" href="${href}"></a>
     `);
@@ -195,7 +191,7 @@ describe('AbstractPrefetch — the hint', () => {
 
     first.prefetch();
     second.prefetch();
-    await observed();
+    await waitFor(() => hasPrefetchLink(href));
 
     expect(prefetchLinks().filter((link) => link.href === href)).toHaveLength(1);
   });
@@ -207,7 +203,7 @@ describe('AbstractPrefetch — the hint', () => {
    */
   it('still announces to the second component sharing the link', async () => {
     const href = uniqueHref();
-    const root = await render(`
+    const root = await mount(`
       <a data-component="AbstractPrefetch" href="${href}"></a>
       <a data-component="AbstractPrefetch" href="${href}"></a>
     `);
@@ -222,14 +218,14 @@ describe('AbstractPrefetch — the hint', () => {
     for (const instance of instances) {
       instance.prefetch();
     }
-    await observed();
+    await waitFor(() => count === 2);
 
     expect(count).toBe(2);
   });
 
   it('says nothing once the component has been unmounted', async () => {
     const href = uniqueHref();
-    const root = await render(`<a data-component="AbstractPrefetch" href="${href}"></a>`);
+    const root = await mount(`<a data-component="AbstractPrefetch" href="${href}"></a>`);
     const instance = getInstance<AbstractPrefetch>(
       root.firstElementChild as HTMLElement,
       'AbstractPrefetch',
@@ -241,7 +237,7 @@ describe('AbstractPrefetch — the hint', () => {
 
     instance.prefetch();
     root.remove();
-    await observed();
+    await quiet();
 
     expect(count).toBe(0);
   });
@@ -250,10 +246,10 @@ describe('AbstractPrefetch — the hint', () => {
 describe('PrefetchOnInteraction', () => {
   it('prefetches when the pointer arrives', async () => {
     const href = uniqueHref();
-    const root = await render(`<a data-component="PrefetchOnInteraction" href="${href}"></a>`);
+    const root = await mount(`<a data-component="PrefetchOnInteraction" href="${href}"></a>`);
 
     root.firstElementChild?.dispatchEvent(new PointerEvent('pointerenter'));
-    await observed();
+    await waitFor(() => hasPrefetchLink(href));
 
     expect(hasPrefetchLink(href)).toBe(true);
   });
@@ -261,7 +257,7 @@ describe('PrefetchOnInteraction', () => {
   it('prefetches for a touch and for the keyboard, which `mouseenter` never saw', async () => {
     const tapped = uniqueHref();
     const focused = uniqueHref();
-    const root = await render(
+    const root = await mount(
       `<a data-component="PrefetchOnInteraction" href="${tapped}"></a>` +
         `<a data-component="PrefetchOnInteraction" href="${focused}"></a>`,
     );
@@ -269,7 +265,7 @@ describe('PrefetchOnInteraction', () => {
 
     tap.dispatchEvent(new PointerEvent('pointerdown'));
     focus.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
-    await observed();
+    await waitFor(() => hasPrefetchLink(tapped) && hasPrefetchLink(focused));
 
     expect(hasPrefetchLink(tapped)).toBe(true);
     expect(hasPrefetchLink(focused)).toBe(true);
@@ -277,8 +273,8 @@ describe('PrefetchOnInteraction', () => {
 
   it('does not instantiate the component before the intent arrives', async () => {
     const href = uniqueHref();
-    const root = await render(`<a data-component="PrefetchOnInteraction" href="${href}"></a>`);
-    await observed();
+    const root = await mount(`<a data-component="PrefetchOnInteraction" href="${href}"></a>`);
+    await quiet();
 
     expect(
       getInstance<PrefetchOnInteraction>(
@@ -291,12 +287,12 @@ describe('PrefetchOnInteraction', () => {
 
   it('inherits the `prefetch` option from the base class config', async () => {
     const href = uniqueHref();
-    const root = await render(
+    const root = await mount(
       `<a data-component="PrefetchOnInteraction" href="${href}" data-option-no-prefetch></a>`,
     );
 
     root.firstElementChild?.dispatchEvent(new PointerEvent('pointerenter'));
-    await observed();
+    await quiet();
 
     expect(hasPrefetchLink(href)).toBe(false);
   });
@@ -305,10 +301,10 @@ describe('PrefetchOnInteraction', () => {
 describe('PrefetchWhenVisible', () => {
   it('does not instantiate the component while the link is off screen', async () => {
     const href = uniqueHref();
-    const root = await render(
+    const root = await mount(
       `<a data-component="PrefetchWhenVisible" href="${href}" style="${OFFSCREEN}"></a>`,
     );
-    await observed();
+    await quiet();
 
     expect(
       getInstance<PrefetchWhenVisible>(
@@ -321,8 +317,8 @@ describe('PrefetchWhenVisible', () => {
 
   it('prefetches the first time the link is seen', async () => {
     const href = uniqueHref();
-    await render(`<a data-component="PrefetchWhenVisible" href="${href}" style="${ONSCREEN}"></a>`);
-    await observed();
+    await mount(`<a data-component="PrefetchWhenVisible" href="${href}" style="${ONSCREEN}"></a>`);
+    await waitFor(() => hasPrefetchLink(href));
 
     expect(hasPrefetchLink(href)).toBe(true);
   });
@@ -334,32 +330,33 @@ describe('PrefetchWhenVisible', () => {
    */
   it('stays mounted after the link leaves the viewport', async () => {
     const href = uniqueHref();
-    const root = await render(
+    const root = await mount(
       `<a data-component="PrefetchWhenVisible" href="${href}" style="${ONSCREEN}"></a>`,
     );
-    await observed();
     const el = root.firstElementChild as HTMLElement;
-    const instance = getInstance<PrefetchWhenVisible>(el, 'PrefetchWhenVisible');
+    const instance = await waitFor(() =>
+      getInstance<PrefetchWhenVisible>(el, 'PrefetchWhenVisible'),
+    );
     expect(instance?.$isMounted).toBe(true);
 
     el.setAttribute('style', OFFSCREEN);
-    await observed();
+    await quiet();
 
     expect(getInstance<PrefetchWhenVisible>(el, 'PrefetchWhenVisible')?.$isMounted).toBe(true);
   });
 
   it('appends exactly one link, however often the link crosses', async () => {
     const href = uniqueHref();
-    const root = await render(
+    const root = await mount(
       `<a data-component="PrefetchWhenVisible" href="${href}" style="${ONSCREEN}"></a>`,
     );
-    await observed();
+    await waitFor(() => hasPrefetchLink(href));
     const el = root.firstElementChild as HTMLElement;
 
     el.setAttribute('style', OFFSCREEN);
-    await observed();
+    await quiet();
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await quiet();
 
     expect(prefetchLinks().filter((link) => link.href === href)).toHaveLength(1);
   });
diff --git a/packages/v4/migration/ScrollAnimation/ScrollAnimation.spec.ts b/packages/v4/migration/ScrollAnimation/ScrollAnimation.spec.ts
index cf4c5f5b..b2964350 100644
--- a/packages/v4/migration/ScrollAnimation/ScrollAnimation.spec.ts
+++ b/packages/v4/migration/ScrollAnimation/ScrollAnimation.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponent } from '../../src/index.js';
-import { frames, getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { frames, resetDom, settle } from '../../src/test/index.js';
 import { ScrollAnimationTarget } from './ScrollAnimationTarget.js';
 import { ScrollAnimationTimeline } from './ScrollAnimationTimeline.js';
 
diff --git a/packages/v4/migration/ScrollTo/ScrollTo.spec.ts b/packages/v4/migration/ScrollTo/ScrollTo.spec.ts
index fca99842..63a90ae2 100644
--- a/packages/v4/migration/ScrollTo/ScrollTo.spec.ts
+++ b/packages/v4/migration/ScrollTo/ScrollTo.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { resetDom, settle } from '../../src/test/index.js';
 import { ScrollTo } from './ScrollTo.js';
 
 registerComponents(ScrollTo);
diff --git a/packages/v4/migration/Sentinel/Sentinel.spec.ts b/packages/v4/migration/Sentinel/Sentinel.spec.ts
index 6d3ae16a..50084ab0 100644
--- a/packages/v4/migration/Sentinel/Sentinel.spec.ts
+++ b/packages/v4/migration/Sentinel/Sentinel.spec.ts
@@ -1,6 +1,6 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponents, type InViewProps } from '../../src/index.js';
-import { resetDom, settle } from '../../src/test-utils.js';
+import { resetDom, settle, waitFor } from '../../src/test/index.js';
 import { Sentinel } from './Sentinel.js';
 
 const OFFSCREEN = 'position:absolute;top:300vh;left:0;width:50px;height:50px';
@@ -10,13 +10,6 @@ registerComponents(Sentinel);
 
 afterEach(resetDom);
 
-/** Give the observer a few frames to deliver. */
-async function observed(): Promise<void> {
-  for (let i = 0; i < 6; i += 1) {
-    await settle();
-  }
-}
-
 function render(style: string): HTMLElement {
   const el = document.createElement('div');
   el.setAttribute('data-component', 'Sentinel');
@@ -32,7 +25,9 @@ describe('Sentinel', () => {
     el.addEventListener('intersected', (event) => {
       events.push((event as CustomEvent<InViewProps>).detail);
     });
-    await observed();
+    await waitFor(() => events.length > 0);
+    // One more turn, so an extra delivery would show up in the count below.
+    await settle();
 
     expect(events).toHaveLength(1);
     expect(events[0].isInView).toBe(false);
@@ -44,10 +39,10 @@ describe('Sentinel', () => {
     el.addEventListener('intersected', (event) => {
       events.push((event as CustomEvent<InViewProps>).detail);
     });
-    await observed();
+    await waitFor(() => events.length > 0);
 
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await waitFor(() => events.at(-1)?.isInView === true);
 
     const last = events.at(-1);
     expect(last?.isInView).toBe(true);
@@ -60,10 +55,10 @@ describe('Sentinel', () => {
     el.addEventListener('intersected', (event) => {
       events.push((event as CustomEvent<InViewProps>).detail);
     });
-    await observed();
+    await waitFor(() => events.at(-1)?.isInView === true);
 
     el.setAttribute('style', OFFSCREEN);
-    await observed();
+    await waitFor(() => events.length > 1 && events.at(-1)?.isInView === false);
 
     const last = events.at(-1);
     expect(last?.isInView).toBe(false);
@@ -80,7 +75,7 @@ describe('Sentinel', () => {
     el.addEventListener('intersected', (event) => {
       lastProps = (event as CustomEvent<InViewProps>).detail;
     });
-    await observed();
+    await waitFor(() => lastProps);
 
     expect(lastProps?.entry).toBeTruthy();
     expect(typeof lastProps?.entry?.boundingClientRect.y).toBe('number');
diff --git a/packages/v4/migration/Slider/Slider.spec.ts b/packages/v4/migration/Slider/Slider.spec.ts
index b07d8705..27829acb 100644
--- a/packages/v4/migration/Slider/Slider.spec.ts
+++ b/packages/v4/migration/Slider/Slider.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { frames, getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { frames, resetDom, settle } from '../../src/test/index.js';
 import { Slider } from './Slider.js';
 import { SliderBtn } from './SliderBtn.js';
 import { SliderCount } from './SliderCount.js';
diff --git a/packages/v4/migration/Slider/SliderDots.spec.ts b/packages/v4/migration/Slider/SliderDots.spec.ts
index 2656db48..5f9aac21 100644
--- a/packages/v4/migration/Slider/SliderDots.spec.ts
+++ b/packages/v4/migration/Slider/SliderDots.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { frames, getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { frames, resetDom, settle } from '../../src/test/index.js';
 import { Slider } from './Slider.js';
 import { SliderDots } from './SliderDots.js';
 
diff --git a/packages/v4/migration/Slider/SliderDrag.spec.ts b/packages/v4/migration/Slider/SliderDrag.spec.ts
index 15d652de..4f3be762 100644
--- a/packages/v4/migration/Slider/SliderDrag.spec.ts
+++ b/packages/v4/migration/Slider/SliderDrag.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { frames, getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { frames, recordEvents, resetDom, settle } from '../../src/test/index.js';
 import { Slider } from './Slider.js';
 import { SliderDrag } from './SliderDrag.js';
 import type { DragMode } from '../../src/index.js';
@@ -66,41 +67,34 @@ function release(): void {
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
-/** Collect the events SliderDrag re-emits, which bubble past the Slider. */
-function record(): { modes: string[]; stop: () => void } {
-  const modes: string[] = [];
-  const names: DragMode[] = ['idle', 'start', 'drag', 'drop', 'inertia', 'stop'];
-  const listeners = names.map((name) => {
-    const listener = () => modes.push(name);
-    document.addEventListener(name, listener);
-    return () => document.removeEventListener(name, listener);
-  });
-  return { modes, stop: () => listeners.forEach((off) => off()) };
-}
+/** Every drag mode is an event name; the events bubble past the Slider. */
+const DRAG_MODES: DragMode[] = ['idle', 'start', 'drag', 'drop', 'inertia', 'stop'];
 
 describe('SliderDrag', () => {
   it('re-emits the drag lifecycle, and never the idle mode', async () => {
     const root = render();
     const { track } = await ready(root);
-    const { modes, stop } = record();
+    const log = recordEvents(document, ...DRAG_MODES);
+    // Only the order of the modes is asserted, so the payloads drop out.
+    const modes = () => log.events.map(({ type }) => type);
 
     grab(track, 50);
-    expect(modes).toEqual(['start']);
+    expect(modes()).toEqual(['start']);
 
     // One pixel, so the coast this releases is short enough to watch end.
     move(49);
-    expect(modes.at(-1)).toBe('drag');
+    expect(modes().at(-1)).toBe('drag');
 
     release();
-    expect(modes).toContain('drop');
+    expect(modes()).toContain('drop');
 
     // The coast runs on the scheduler tick, so real frames finish it.
     await frames(40);
-    stop();
+    log.stop();
 
-    expect(modes.at(-1)).toBe('stop');
-    expect(modes).toContain('inertia');
-    expect(modes).not.toContain('idle');
+    expect(modes().at(-1)).toBe('stop');
+    expect(modes()).toContain('inertia');
+    expect(modes()).not.toContain('idle');
   });
 
   it('moves every slide with the pointer', async () => {
diff --git a/packages/v4/migration/Slider/SliderProgress.spec.ts b/packages/v4/migration/Slider/SliderProgress.spec.ts
index eab49351..c329611d 100644
--- a/packages/v4/migration/Slider/SliderProgress.spec.ts
+++ b/packages/v4/migration/Slider/SliderProgress.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { frames, getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { frames, resetDom, settle } from '../../src/test/index.js';
 import { Slider } from './Slider.js';
 import { SliderProgress } from './SliderProgress.js';
 
diff --git a/packages/v4/migration/Sticky/Sticky.spec.ts b/packages/v4/migration/Sticky/Sticky.spec.ts
index 7eb364c4..54b887b8 100644
--- a/packages/v4/migration/Sticky/Sticky.spec.ts
+++ b/packages/v4/migration/Sticky/Sticky.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponents, type InViewProps, type ScrollProps } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { mount, resetDom, settle } from '../../src/test/index.js';
 import { Sentinel } from '../Sentinel/index.js';
 import { Sticky } from './Sticky.js';
 
@@ -20,14 +21,6 @@ function sticky(): string {
     </div>`;
 }
 
-async function render(markup: string): Promise<HTMLElement> {
-  const root = document.createElement('div');
-  root.innerHTML = markup;
-  document.body.append(root);
-  await settle();
-  return root;
-}
-
 function dispatchIntersected(sentinelEl: Element, isInView: boolean, y: number): void {
   const props: InViewProps = {
     isInView,
@@ -55,7 +48,7 @@ const BASE_SCROLL_PROPS: ScrollProps = {
 
 describe('Sticky', () => {
   it('sizes its sentinel from the earlier instances sharing its relative ancestor', async () => {
-    const root = await render(`<div style="position:relative">${sticky()}${sticky()}</div>`);
+    const root = await mount(`<div style="position:relative">${sticky()}${sticky()}</div>`);
     const [first, second] = root.querySelectorAll('[data-component="Sticky"]');
     const firstInstance = getInstance<Sticky>(first, 'Sticky');
     const secondInstance = getInstance<Sticky>(second, 'Sticky');
@@ -70,7 +63,7 @@ describe('Sticky', () => {
   });
 
   it('sets `isSticky` from the sentinel entry and clears the transform once it is not sticky', async () => {
-    const root = await render(sticky());
+    const root = await mount(sticky());
     const el = root.querySelector('[data-component="Sticky"]') as HTMLElement;
     const sentinelEl = root.querySelector('[data-component="Sentinel"]') as HTMLElement;
     const instance = getInstance<Sticky>(el, 'Sticky');
@@ -85,7 +78,7 @@ describe('Sticky', () => {
   });
 
   it('does not consider a sentinel intersecting from below sticky, only one that has scrolled past the top', async () => {
-    const root = await render(sticky());
+    const root = await mount(sticky());
     const sentinelEl = root.querySelector('[data-component="Sentinel"]') as HTMLElement;
     const el = root.querySelector('[data-component="Sticky"]') as HTMLElement;
     const instance = getInstance<Sticky>(el, 'Sticky');
@@ -96,7 +89,7 @@ describe('Sticky', () => {
   });
 
   it('stacks onto an earlier instance that hid itself on scroll, and unstacks once it reappears', async () => {
-    const root = await render(`<div style="position:relative">${sticky()}${sticky()}</div>`);
+    const root = await mount(`<div style="position:relative">${sticky()}${sticky()}</div>`);
     const [firstEl, secondEl] = [
       ...root.querySelectorAll('[data-component="Sticky"]'),
     ] as HTMLElement[];
@@ -128,7 +121,7 @@ describe('Sticky', () => {
   });
 
   it('hides on scroll direction when `hideWhenDown` is set, and shows again on the way up', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div data-component="Sticky" data-option-hide-when-down="true">
         ${SENTINEL}
         <div data-ref="inner" style="height:50px"></div>
@@ -148,7 +141,7 @@ describe('Sticky', () => {
   });
 
   it('ignores a scroll update with no movement', async () => {
-    const root = await render(sticky());
+    const root = await mount(sticky());
     const el = root.querySelector('[data-component="Sticky"]') as HTMLElement;
     const sentinelEl = root.querySelector('[data-component="Sentinel"]') as HTMLElement;
     const instance = getInstance<Sticky>(el, 'Sticky');
diff --git a/packages/v4/migration/Timer/Timer.spec.ts b/packages/v4/migration/Timer/Timer.spec.ts
index a8bce1ef..63faa1b9 100644
--- a/packages/v4/migration/Timer/Timer.spec.ts
+++ b/packages/v4/migration/Timer/Timer.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { recordEvents, resetDom, settle } from '../../src/test/index.js';
 import { Timer } from './Timer.js';
 
 registerComponents(Timer);
@@ -30,12 +31,10 @@ async function render(attributes = ''): Promise<{ el: HTMLElement; instance: Tim
   return { el, instance: getInstance<Timer>(el, 'Timer') };
 }
 
-function record(el: HTMLElement, ...types: string[]): string[] {
-  const events: string[] = [];
-  for (const type of types) {
-    el.addEventListener(type, () => events.push(type));
-  }
-  return events;
+/** Only the order of the names is asserted here, so the payloads drop out. */
+function record(el: HTMLElement, ...types: string[]): () => string[] {
+  const log = recordEvents(el, ...types);
+  return () => log.events.map(({ type }) => type);
 }
 
 describe('Timer', () => {
@@ -46,7 +45,7 @@ describe('Timer', () => {
 
     await wait(60);
 
-    expect(events).toEqual(['timer-start', 'timer-end']);
+    expect(events()).toEqual(['timer-start', 'timer-end']);
   });
 
   it('does not start on mount when autostart is disabled', async () => {
@@ -54,11 +53,11 @@ describe('Timer', () => {
     const events = record(el, 'timer-start', 'timer-end');
 
     await wait(60);
-    expect(events).toEqual([]);
+    expect(events()).toEqual([]);
 
     instance.start();
     await wait(60);
-    expect(events).toEqual(['timer-start', 'timer-end']);
+    expect(events()).toEqual(['timer-start', 'timer-end']);
   });
 
   it('pauses and resumes, preserving the remaining time', async () => {
@@ -71,15 +70,15 @@ describe('Timer', () => {
     const remainingAtPause = instance.remaining;
 
     await wait(50);
-    expect(events).toEqual(['timer-pause']);
+    expect(events()).toEqual(['timer-pause']);
     expect(instance.timerId).toBeNull();
 
     instance.resume();
-    expect(events).toEqual(['timer-pause', 'timer-resume']);
+    expect(events()).toEqual(['timer-pause', 'timer-resume']);
     expect(instance.remaining).toBeCloseTo(remainingAtPause, 0);
 
     await wait(120);
-    expect(events).toEqual(['timer-pause', 'timer-resume', 'timer-end']);
+    expect(events()).toEqual(['timer-pause', 'timer-resume', 'timer-end']);
   });
 
   it('is a no-op to pause an idle timer or resume a running one', async () => {
@@ -87,11 +86,11 @@ describe('Timer', () => {
     const events = record(el, 'timer-pause', 'timer-resume');
 
     instance.resume();
-    expect(events).toEqual([]);
+    expect(events()).toEqual([]);
 
     instance.stop();
     instance.pause();
-    expect(events).toEqual([]);
+    expect(events()).toEqual([]);
   });
 
   it('stops without completing', async () => {
@@ -101,7 +100,7 @@ describe('Timer', () => {
     instance.stop();
     await wait(60);
 
-    expect(events).toEqual(['timer-stop']);
+    expect(events()).toEqual(['timer-stop']);
     expect(instance.remaining).toBe(0);
   });
 
@@ -113,7 +112,7 @@ describe('Timer', () => {
     await wait(30);
     instance.restart();
 
-    expect(events).toEqual(['timer-start', 'timer-start']);
+    expect(events()).toEqual(['timer-start', 'timer-start']);
     expect(instance.remaining).toBeCloseTo(100, 0);
   });
 
@@ -127,7 +126,7 @@ describe('Timer', () => {
 
     await wait(150);
 
-    expect(events).toEqual(['timer-start', 'timer-end', 'timer-tick', 'timer-start']);
+    expect(events()).toEqual(['timer-start', 'timer-end', 'timer-tick', 'timer-start']);
   });
 
   it('cancels the pending countdown when unmounted', async () => {
@@ -137,6 +136,6 @@ describe('Timer', () => {
     instance.$unmount();
     await wait(60);
 
-    expect(events).toEqual([]);
+    expect(events()).toEqual([]);
   });
 });
diff --git a/packages/v4/migration/Timer/TimerProgress.spec.ts b/packages/v4/migration/Timer/TimerProgress.spec.ts
index 73438430..317b69af 100644
--- a/packages/v4/migration/Timer/TimerProgress.spec.ts
+++ b/packages/v4/migration/Timer/TimerProgress.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { resetDom, settle } from '../../src/test/index.js';
 import { TimerProgress } from './TimerProgress.js';
 
 registerComponents(TimerProgress);
diff --git a/packages/v4/migration/Toaster/Toast.spec.ts b/packages/v4/migration/Toaster/Toast.spec.ts
index c7ab5c31..a2ee15ef 100644
--- a/packages/v4/migration/Toaster/Toast.spec.ts
+++ b/packages/v4/migration/Toaster/Toast.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { resetDom, settle } from '../../src/test/index.js';
 import { Toast } from './Toast.js';
 
 registerComponents(Toast);
diff --git a/packages/v4/migration/Toaster/Toaster.spec.ts b/packages/v4/migration/Toaster/Toaster.spec.ts
index 05174887..072f9781 100644
--- a/packages/v4/migration/Toaster/Toaster.spec.ts
+++ b/packages/v4/migration/Toaster/Toaster.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { resetDom, settle } from '../../src/test/index.js';
 import { Toast } from './Toast.js';
 import { Toaster } from './Toaster.js';
 
diff --git a/packages/v4/migration/Track/Track.spec.ts b/packages/v4/migration/Track/Track.spec.ts
index 644cd612..eede45a2 100644
--- a/packages/v4/migration/Track/Track.spec.ts
+++ b/packages/v4/migration/Track/Track.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { captureDiagnostics, mount, resetDom, settle, waitFor } from '../../src/test/index.js';
 import { Track } from './Track.js';
 import { TrackContext } from './TrackContext.js';
 import { TrackShopify } from './TrackShopify.js';
@@ -15,16 +16,6 @@ registerComponents(Track, TrackContext, TrackShopify);
  * default sink is `reportError()`, not `console.warn`, and the assertion goes
  * to the channel rather than to the console.
  */
-function recordDiagnostics(): { codes: string[]; stop: () => void } {
-  const codes: string[] = [];
-  const listener = (event: Event) => {
-    codes.push((event as CustomEvent<{ code: string }>).detail.code);
-    event.preventDefault();
-  };
-  document.addEventListener('js-toolkit:diagnostic', listener);
-  return { codes, stop: () => document.removeEventListener('js-toolkit:diagnostic', listener) };
-}
-
 const OFFSCREEN = 'position:absolute;top:300vh;left:0;width:50px;height:50px';
 const ONSCREEN = 'position:absolute;top:0;left:0;width:50px;height:50px';
 
@@ -34,16 +25,11 @@ beforeEach(() => {
   window.dataLayer = [];
 });
 
-async function render(html: string): Promise<HTMLElement> {
-  const root = document.createElement('div');
-  root.innerHTML = html;
-  document.body.append(root);
-  await settle();
-  return root;
-}
-
-/** Give the observer a few frames to deliver. */
-async function observed(): Promise<void> {
+/**
+ * A bounded quiet period, for the assertions that nothing was pushed. A push
+ * that is expected is polled for instead — see the `waitFor` calls below.
+ */
+async function quiet(): Promise<void> {
   for (let i = 0; i < 6; i += 1) {
     await settle();
   }
@@ -61,7 +47,7 @@ const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
 describe('Track — payload resolution', () => {
   it('pushes the resolved payload to window.dataLayer on click', async () => {
-    const root = await render(
+    const root = await mount(
       `<button data-component="Track" data-track:click='{"event": "cta_click", "location": "header"}'></button>`,
     );
 
@@ -72,7 +58,7 @@ describe('Track — payload resolution', () => {
   });
 
   it('treats a non-JSON attribute value as the event name', async () => {
-    const root = await render(
+    const root = await mount(
       `<button data-component="Track" data-track:click="add_to_cart"></button>`,
     );
 
@@ -82,7 +68,7 @@ describe('Track — payload resolution', () => {
   });
 
   it('fires an event declared with an empty value, carrying the context alone', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div data-component="TrackContext" data-option-context='{"page_type": "home"}'>
         <button data-component="Track" data-track:click=""></button>
       </div>
@@ -94,7 +80,7 @@ describe('Track — payload resolution', () => {
   });
 
   it('uses the `payload` option as the base payload', async () => {
-    const root = await render(
+    const root = await mount(
       `<button data-component="Track" data-track:click='{"event": "cta"}'
         data-option-payload='{"location": "header", "id": "1"}'></button>`,
     );
@@ -105,7 +91,7 @@ describe('Track — payload resolution', () => {
   });
 
   it('lets the `payload` option override the `payload` ref, keeping the rest', async () => {
-    const root = await render(`
+    const root = await mount(`
       <button data-component="Track" data-track:click='{"event": "cta"}'
         data-option-payload='{"source": "option"}'>
         <script data-ref="payload" type="application/json">{ "source": "ref", "kept": true }</script>
@@ -118,7 +104,7 @@ describe('Track — payload resolution', () => {
   });
 
   it('applies the precedence context < payload < per-event data', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div data-component="TrackContext" data-option-context='{"value": "context", "from_context": true}'>
         <button data-component="Track" data-track:click='{"event": "x", "value": "event"}'>
           <script data-ref="payload" type="application/json">{ "value": "payload", "from_payload": true }</script>
@@ -137,7 +123,7 @@ describe('Track — payload resolution', () => {
   });
 
   it('merges the whole ancestor TrackContext chain, the nearer winning', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div data-component="TrackContext" data-option-context='{"page_type": "product", "currency": "EUR", "product_id": "pdp"}'>
         <div data-component="TrackContext" data-option-context='{"variant_id": "v1", "product_id": "variant"}'>
           <button data-component="Track" data-track:click='{"event": "add_to_cart"}'></button>
@@ -157,7 +143,7 @@ describe('Track — payload resolution', () => {
   });
 
   it('replaces arrays on merge instead of concatenating them', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div data-component="TrackContext" data-option-context='{"ecommerce": {"items": [{"id": "from-context"}]}}'>
         <button data-component="Track" data-track:click='{"event": "select_item", "ecommerce": {"items": [{"id": "from-event"}]}}'></button>
       </div>
@@ -170,7 +156,7 @@ describe('Track — payload resolution', () => {
   });
 
   it('never shares an array instance between two dispatches', async () => {
-    const root = await render(
+    const root = await mount(
       `<button data-component="Track" data-track:click='{"event": "e", "items": [1, 2]}'></button>`,
     );
     const button = root.querySelector('button') as HTMLButtonElement;
@@ -183,7 +169,7 @@ describe('Track — payload resolution', () => {
   });
 
   it('fires every data-track:* declared on one element', async () => {
-    const root = await render(
+    const root = await mount(
       `<button data-component="Track"
         data-track:click='{"event": "click_event"}'
         data-track:mousedown='{"event": "mousedown_event"}'></button>`,
@@ -199,8 +185,8 @@ describe('Track — payload resolution', () => {
 
 describe('Track — malformed declarations', () => {
   it('drops an event whose JSON cannot be parsed, without throwing', async () => {
-    const log = recordDiagnostics();
-    const root = await render(
+    const log = captureDiagnostics();
+    const root = await mount(
       `<button data-component="Track" data-track:click='{ not json }'></button>`,
     );
 
@@ -211,8 +197,8 @@ describe('Track — malformed declarations', () => {
   });
 
   it('falls back to an empty payload when the `payload` ref is invalid JSON', async () => {
-    const log = recordDiagnostics();
-    const root = await render(`
+    const log = captureDiagnostics();
+    const root = await mount(`
       <button data-component="Track" data-track:click='{"event": "x"}'>
         <script data-ref="payload" type="application/json">{ broken </script>
       </button>
@@ -226,21 +212,25 @@ describe('Track — malformed declarations', () => {
   });
 
   it('falls back to an empty payload when `data-option-payload` is invalid JSON', async () => {
-    const spy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-    const root = await render(
+    const log = captureDiagnostics();
+    const root = await mount(
       `<button data-component="Track" data-track:click='{"event": "x"}'
         data-option-payload='{ not json }'></button>`,
     );
 
     expect(() => root.querySelector('button')?.click()).not.toThrow();
     expect(lastPush()).toEqual({ event: 'x' });
-    spy.mockRestore();
+    // Nothing is reported here, unlike the two cases above: `readJSON()` in
+    // `Base` swallows a malformed option attribute and hands back the
+    // declared default, so `optionPayload`'s own catch never runs.
+    expect(log.codes).toEqual([]);
+    log.stop();
   });
 });
 
 describe('Track — the `mounted` pseudo-event', () => {
   it('dispatches once the batch has settled, with the resolved context', async () => {
-    await render(`
+    await mount(`
       <div data-component="TrackContext" data-option-context='{"page_type": "home"}'>
         <div data-component="Track" data-track:mounted='{"event": "page_view"}'></div>
       </div>
@@ -256,13 +246,13 @@ describe('Track — the `mounted` pseudo-event', () => {
     root.innerHTML = `<div data-component="Track" data-track:mounted='{"event": "page_view"}'></div>`;
     document.body.append(root);
     root.innerHTML = '';
-    await observed();
+    await quiet();
 
     expect(pushes()).toHaveLength(0);
   });
 
   it('applies timing modifiers to the mounted event', async () => {
-    await render(
+    await mount(
       `<div data-component="Track" data-track:mounted.debounce500='{"event": "page_view"}'></div>`,
     );
     await settle();
@@ -275,7 +265,7 @@ describe('Track — the `mounted` pseudo-event', () => {
   });
 
   it('dispatches again with the new context when the component moves under a scope', async () => {
-    const root = await render(
+    const root = await mount(
       `<div id="host"><div data-component="Track" data-track:mounted='{"event": "page_view"}'></div></div>`,
     );
     await settle();
@@ -295,97 +285,96 @@ describe('Track — the `mounted` pseudo-event', () => {
 
 describe('Track — the `view` pseudo-event', () => {
   it('dispatches when the element enters the viewport', async () => {
-    const root = await render(
+    const root = await mount(
       `<div data-component="Track" style="${OFFSCREEN}" data-track:view='{"event": "impression", "id": "123"}'></div>`,
     );
-    await observed();
+    await quiet();
     expect(pushes()).toHaveLength(0);
 
     (root.firstElementChild as HTMLElement).setAttribute('style', ONSCREEN);
-    await observed();
+    await waitFor(() => pushes().length > 0);
 
     expect(lastPush()).toEqual({ event: 'impression', id: '123' });
   });
 
   it('dispatches on every entry without the `.once` modifier', async () => {
-    const root = await render(
+    const root = await mount(
       `<div data-component="Track" style="${ONSCREEN}" data-track:view='{"event": "impression"}'></div>`,
     );
     const el = root.firstElementChild as HTMLElement;
-    await observed();
+    await waitFor(() => pushes().length > 0);
 
     el.setAttribute('style', OFFSCREEN);
-    await observed();
+    await quiet();
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await waitFor(() => pushes().length > 1);
 
     expect(pushes()).toHaveLength(2);
   });
 
   it('dispatches once with the `.once` modifier and releases the subscription', async () => {
-    const root = await render(
+    const root = await mount(
       `<div data-component="Track" style="${ONSCREEN}" data-track:view.once='{"event": "impression"}'></div>`,
     );
     const el = root.firstElementChild as HTMLElement;
-    await observed();
+    await waitFor(() => pushes().length > 0);
 
     el.setAttribute('style', OFFSCREEN);
-    await observed();
+    await quiet();
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await quiet();
 
     expect(pushes()).toHaveLength(1);
   });
 
   it('dispatches for an element taller than the viewport at the default threshold', async () => {
-    await render(
+    await mount(
       `<div data-component="Track"
         style="position:absolute;top:0;left:0;width:50px;height:400vh"
         data-track:view='{"event": "impression"}'></div>`,
     );
-    await observed();
+    await waitFor(() => pushes().length > 0);
 
     expect(pushes()).toHaveLength(1);
   });
 
   /** A tall element that cannot reach its threshold never intersects. */
   it('cannot dispatch for an element that can never reach its own threshold', async () => {
-    await render(
+    await mount(
       `<div data-component="Track" data-option-threshold="0.5"
         style="position:absolute;top:0;left:0;width:50px;height:400vh"
         data-track:view='{"event": "impression"}'></div>`,
     );
-    await observed();
+    await quiet();
 
     expect(pushes()).toHaveLength(0);
   });
 
   it('applies timing modifiers to the view event', async () => {
-    const root = await render(
+    const root = await mount(
       `<div data-component="Track" style="${ONSCREEN}" data-track:view.throttle1000='{"event": "impression"}'></div>`,
     );
     const el = root.firstElementChild as HTMLElement;
-    await observed();
+    await waitFor(() => pushes().length > 0);
 
     el.setAttribute('style', OFFSCREEN);
-    await observed();
+    await quiet();
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await quiet();
 
     expect(pushes()).toHaveLength(1);
   });
 
   it('releases the observer with the mount cycle', async () => {
-    const root = await render(
+    const root = await mount(
       `<div data-component="Track" style="${OFFSCREEN}" data-track:view='{"event": "impression"}'></div>`,
     );
     const el = root.firstElementChild as HTMLElement;
-    await observed();
+    const track = await waitFor(() => getInstance(el, 'Track'));
 
-    const track = getInstance(el, 'Track');
     track.$unmount();
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await quiet();
 
     expect(pushes()).toHaveLength(0);
     expect(track.$isMounted).toBe(false);
@@ -394,7 +383,7 @@ describe('Track — the `view` pseudo-event', () => {
 
 describe('Track — lifecycle', () => {
   it('stops dispatching a `.capture` binding after unmount and resumes on remount', async () => {
-    const root = await render(
+    const root = await mount(
       `<div data-component="Track" data-track:click.capture='{"event": "cta"}'></div>`,
     );
     const el = root.firstElementChild as HTMLElement;
@@ -413,7 +402,7 @@ describe('Track — lifecycle', () => {
   });
 
   it('cancels a pending debounced dispatch on unmount, even after a remount', async () => {
-    const root = await render(
+    const root = await mount(
       `<div data-component="Track" data-track:input.debounce50='{"event": "search"}'></div>`,
     );
     const el = root.firstElementChild as HTMLElement;
@@ -428,7 +417,7 @@ describe('Track — lifecycle', () => {
   });
 
   it('re-reads the declarations on every mount cycle', async () => {
-    const root = await render(
+    const root = await mount(
       `<div data-component="Track" data-track:click='{"event": "before"}'></div>`,
     );
     const el = root.firstElementChild as HTMLElement;
@@ -445,7 +434,7 @@ describe('Track — lifecycle', () => {
 
 describe('Track — live rebinding through watchAttributes', () => {
   it('follows a data-track:* attribute rewritten in place', async () => {
-    const root = await render(
+    const root = await mount(
       `<div data-component="Track" data-track:click='{"event": "before"}'></div>`,
     );
     const el = root.firstElementChild as HTMLElement;
@@ -459,7 +448,7 @@ describe('Track — live rebinding through watchAttributes', () => {
   });
 
   it('releases a binding whose attribute is removed', async () => {
-    const root = await render(
+    const root = await mount(
       `<div data-component="Track" data-track:click='{"event": "cta"}'></div>`,
     );
     const el = root.firstElementChild as HTMLElement;
@@ -475,7 +464,7 @@ describe('Track — live rebinding through watchAttributes', () => {
   });
 
   it('binds an attribute added after mount', async () => {
-    const root = await render(`<div data-component="Track"></div>`);
+    const root = await mount(`<div data-component="Track"></div>`);
     const el = root.firstElementChild as HTMLElement;
 
     el.setAttribute('data-track:click', '{"event": "late"}');
@@ -486,7 +475,7 @@ describe('Track — live rebinding through watchAttributes', () => {
   });
 
   it('binds once when several attributes change in one batch', async () => {
-    const root = await render(
+    const root = await mount(
       `<div data-component="Track" data-track:click='{"event": "a"}'></div>`,
     );
     const el = root.firstElementChild as HTMLElement;
@@ -502,7 +491,7 @@ describe('Track — live rebinding through watchAttributes', () => {
   });
 
   it('ends the subscription with the mount cycle', async () => {
-    const root = await render(
+    const root = await mount(
       `<div data-component="Track" data-track:click='{"event": "cta"}'></div>`,
     );
     const el = root.firstElementChild as HTMLElement;
@@ -548,8 +537,8 @@ describe('the intersection service under load', () => {
     ).join('');
 
     const built = await countObservers(async () => {
-      await render(markup);
-      await observed();
+      await mount(markup);
+      await waitFor(() => pushes().length === CARDS);
     });
 
     expect(pushes()).toHaveLength(CARDS);
@@ -559,12 +548,12 @@ describe('the intersection service under load', () => {
 
   it('shares one observer between two declarations on the same element', async () => {
     const built = await countObservers(async () => {
-      await render(
+      await mount(
         `<div data-component="Track" style="${ONSCREEN}"
           data-track:view='{"event": "a"}'
           data-track:view.once='{"event": "b"}'></div>`,
       );
-      await observed();
+      await waitFor(() => pushes().length === 2);
     });
 
     expect(
@@ -577,11 +566,11 @@ describe('the intersection service under load', () => {
 
   it('gives two declarations with different thresholds two observers', async () => {
     const built = await countObservers(async () => {
-      await render(
+      await mount(
         `<div data-component="Track" style="${ONSCREEN}" data-track:view='{"event": "a"}'></div>
          <div data-component="Track" style="${ONSCREEN}" data-option-threshold="0.9" data-track:view='{"event": "b"}'></div>`,
       );
-      await observed();
+      await waitFor(() => pushes().length === 2);
     });
 
     expect(built).toBe(2);
@@ -593,7 +582,7 @@ describe('the intersection service under load', () => {
     let secondRatio = -1;
 
     const built = await countObservers(async () => {
-      const root = await render(`<div style="${ONSCREEN};height:200px" id="probe"></div>`);
+      const root = await mount(`<div style="${ONSCREEN};height:200px" id="probe"></div>`);
       const el = root.querySelector('#probe') as HTMLElement;
       const { useInView } = await import('../../src/index.js');
 
@@ -603,7 +592,7 @@ describe('the intersection service under load', () => {
       useInView(el, { threshold: 0.9 }).subscribe(({ entry }) => {
         secondRatio = entry?.intersectionRatio ?? -1;
       });
-      await observed();
+      await waitFor(() => firstRatio > 0 && secondRatio > 0);
     });
 
     expect(built).toBe(2);
@@ -619,17 +608,17 @@ describe('the intersection service under load', () => {
           data-track:view.once='{"event": "impression", "id": "${index}"}'></div>`,
     ).join('');
 
-    const root = await render(markup);
-    await observed();
+    const root = await mount(markup);
+    await waitFor(() => pushes().length === CARDS);
     expect(pushes()).toHaveLength(CARDS);
 
     root.remove();
-    await observed();
+    await quiet();
     window.dataLayer = [];
 
     const built = await countObservers(async () => {
-      await render(markup);
-      await observed();
+      await mount(markup);
+      await waitFor(() => pushes().length === CARDS);
     });
     expect(built).toBe(CARDS);
     expect(pushes()).toHaveLength(CARDS);
@@ -641,7 +630,7 @@ describe('TrackShopify — the dispatch seam', () => {
     const publish = vi.fn();
     window.Shopify = { analytics: { publish } };
 
-    const root = await render(`
+    const root = await mount(`
       <div data-component="TrackContext" data-option-context='{"page_type": "product"}'>
         <button data-component="TrackShopify" data-track:click='{"event": "add_to_cart", "id": "1"}'></button>
       </div>
@@ -661,25 +650,27 @@ describe('TrackShopify — the dispatch seam', () => {
   it('publishes nothing without a string `event` name', async () => {
     const publish = vi.fn();
     window.Shopify = { analytics: { publish } };
-    const spy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
 
-    const root = await render(
+    const root = await mount(
       `<button data-component="TrackShopify" data-track:click='{"id": "1"}'></button>`,
     );
     root.querySelector('button')?.click();
 
     expect(publish).not.toHaveBeenCalled();
-    spy.mockRestore();
+    expect(log.codes).toContain('track.missing-event-name');
+    log.stop();
     delete window.Shopify;
   });
 
   it('does not throw when the Shopify analytics API is absent', async () => {
-    const spy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-    const root = await render(
+    const log = captureDiagnostics();
+    const root = await mount(
       `<button data-component="TrackShopify" data-track:click='{"event": "x"}'></button>`,
     );
 
     expect(() => root.querySelector('button')?.click()).not.toThrow();
-    spy.mockRestore();
+    expect(log.codes).toContain('track.shopify-unavailable');
+    log.stop();
   });
 });
diff --git a/packages/v4/migration/Track/TrackEvent.spec.ts b/packages/v4/migration/Track/TrackEvent.spec.ts
index 39e56cb9..ea4d9cc6 100644
--- a/packages/v4/migration/Track/TrackEvent.spec.ts
+++ b/packages/v4/migration/Track/TrackEvent.spec.ts
@@ -1,6 +1,7 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { registerComponents } from '../../src/index.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { captureDiagnostics, mount, resetDom } from '../../src/test/index.js';
 import { parseEventDefinition } from '../event-modifiers.js';
 import { Track } from './Track.js';
 import { resolveDetailPlaceholders } from './TrackEvent.js';
@@ -13,12 +14,12 @@ beforeEach(() => {
   window.dataLayer = [];
 });
 
+/**
+ * Every assertion here dispatches at the `Track` element itself, so the wrapper
+ * `mount()` returns is not what the tests want — hence the one-line unwrap.
+ */
 async function render(html: string): Promise<HTMLElement> {
-  const root = document.createElement('div');
-  root.innerHTML = html;
-  document.body.append(root);
-  await settle();
-  return root.firstElementChild as HTMLElement;
+  return (await mount(html)).firstElementChild as HTMLElement;
 }
 
 function pushes(): Record<string, unknown>[] {
@@ -49,27 +50,27 @@ describe('parseEventDefinition', () => {
   });
 
   it('warns for a modifier that names nothing instead of binding it', () => {
-    const spy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
     const { event, modifiers } = parseEventDefinition('click.prevnet.stop');
     expect(event).toBe('click');
     // The typo is dropped; the modifiers that parsed still apply.
     expect([...modifiers]).toEqual(['stop']);
-    expect(spy).toHaveBeenCalledTimes(1);
-    expect(spy.mock.calls[0].join(' ')).toContain('prevnet');
-    spy.mockRestore();
+    expect(log.codes).toEqual(['event-modifiers.unknown-modifier']);
+    expect(log.entries[0].message).toContain('prevnet');
+    log.stop();
   });
 
   it('rejects a malformed timed delay instead of parsing it to NaN', () => {
     // `debounceoops` used to match on the `debounce` prefix alone, so its
     // suffix went through `Number.parseInt` and produced `NaN` — a timeout
     // browsers run immediately rather than warn about.
-    const spy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
     const { modifiers, delay } = parseEventDefinition('click.debounceoops');
     expect([...modifiers]).toEqual([]);
     expect(delay('debounce')).toBeUndefined();
-    expect(spy).toHaveBeenCalledTimes(1);
-    expect(spy.mock.calls[0].join(' ')).toContain('debounceoops');
-    spy.mockRestore();
+    expect(log.codes).toEqual(['event-modifiers.unknown-modifier']);
+    expect(log.entries[0].message).toContain('debounceoops');
+    log.stop();
   });
 
   it('applies the family default through the bound declaration', async () => {
diff --git a/packages/v4/migration/Transition/withTransition.spec.ts b/packages/v4/migration/Transition/withTransition.spec.ts
index 89282511..c3acac2b 100644
--- a/packages/v4/migration/Transition/withTransition.spec.ts
+++ b/packages/v4/migration/Transition/withTransition.spec.ts
@@ -1,7 +1,8 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { Base, registerComponents, type BaseConfig } from '../../src/index.js';
 import { resolveConfig } from '../../src/Base.js';
-import { getInstance, resetDom, settle } from '../../src/test-utils.js';
+import { getInstance } from '../../src/test-utils.js';
+import { mount, resetDom, settle } from '../../src/test/index.js';
 import { Transition } from './Transition.js';
 import { withTransition } from './withTransition.js';
 
@@ -35,11 +36,9 @@ registerComponents(Transition, TransitionProbe, ForcedProbe, MultiProbe);
 
 afterEach(resetDom);
 
+/** The probes are asserted on directly, so the wrapper is unwrapped here. */
 async function render(name: string, attributes = ''): Promise<HTMLElement> {
-  const root = document.createElement('div');
-  root.innerHTML = `<div data-component="${name}" ${attributes}></div>`;
-  document.body.append(root);
-  await settle();
+  const root = await mount(`<div data-component="${name}" ${attributes}></div>`);
   return root.firstElementChild as HTMLElement;
 }
 
diff --git a/packages/v4/src/Base.spec.ts b/packages/v4/src/Base.spec.ts
index 82a0e84a..3100e5c9 100644
--- a/packages/v4/src/Base.spec.ts
+++ b/packages/v4/src/Base.spec.ts
@@ -13,15 +13,9 @@ import { DIAGNOSTICS, type ToolkitDiagnosticDetail } from './diagnostic-contract
 import { EVENTS } from './events.js';
 import { INSTANCES } from './protocol-symbols.js';
 import { registerComponent } from './registry.js';
-import {
-  getInstance,
-  renderTodoList,
-  resetDom,
-  settle,
-  TodoCount,
-  TodoItem,
-  TodoList,
-} from './test-utils.js';
+import { getInstance } from './test-utils.js';
+import { renderTodoList, TodoCount, TodoItem, TodoList } from './todo.fixtures.js';
+import { captureDiagnostics, resetDom, settle } from './test/index.js';
 
 afterEach(resetDom);
 
@@ -113,7 +107,7 @@ describe('$emit and delegation', () => {
 
     const li = root.querySelector('[data-component="TodoItem"]');
     const instance = getInstance(li, 'TodoItem');
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
     const seen: unknown[] = [];
     root.addEventListener('ping', (event) => seen.push((event as CustomEvent).detail));
 
@@ -121,10 +115,13 @@ describe('$emit and delegation', () => {
     (instance.$emit as (type: string, payload?: unknown) => void)('ping', 2);
     (instance.$emit as (type: string, payload?: unknown) => void)('pong', 3);
 
-    expect(warn).toHaveBeenCalledTimes(2);
-    expect(warn.mock.calls[0][0]).toContain('one payload object');
+    expect(log.codes).toEqual([
+      DIAGNOSTICS.event.invalidEmitPayload,
+      DIAGNOSTICS.event.invalidEmitPayload,
+    ]);
+    expect(log.entries[0].message).toContain('one payload object');
     expect(seen).toEqual([1, 2]);
-    warn.mockRestore();
+    log.stop();
   });
 });
 
@@ -335,7 +332,7 @@ describe('$options', () => {
   });
 
   it('warns about a literal default instead of repairing it', () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
 
     class LiteralDefault extends Base<{ $options: { tween: Record<string, unknown> } }> {
       static config = {
@@ -347,13 +344,13 @@ describe('$options', () => {
     const first = new LiteralDefault(document.createElement('div'));
     const second = new LiteralDefault(document.createElement('div'));
 
-    expect(warn).toHaveBeenCalledOnce();
-    expect(warn.mock.calls[0][0]).toContain('LiteralDefault');
-    expect(warn.mock.calls[0][0]).toContain('tween');
-    expect(warn.mock.calls[0][0]).toContain('default: () => (…)');
+    expect(log.codes).toEqual([DIAGNOSTICS.option.literalDefault]);
+    expect(log.entries[0].component).toBe('LiteralDefault');
+    expect(log.entries[0].message).toContain('tween');
+    expect(log.entries[0].message).toContain('default: () => (…)');
 
     expect(first.$options.tween).toBe(second.$options.tween);
-    warn.mockRestore();
+    log.stop();
   });
 
   it('memoises the default, so a mutation of it persists on that instance', () => {
@@ -627,23 +624,23 @@ describe('$refs', () => {
     const el = document.createElement('div');
     el.innerHTML = '<i data-ref="dots"></i><i data-ref="dots"></i>';
     document.body.append(el);
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
     const instance = new Dropped(el).$mount();
 
     expect(instance.$refs.dots).toEqual([]);
-    expect(warn).toHaveBeenCalledOnce();
-    expect(warn.mock.calls[0][0]).toContain('data-ref="dots[]"');
-    expect(warn.mock.calls[0][0]).toContain('Dropped');
+    expect(log.codes).toEqual([DIAGNOSTICS.ref.mismatch]);
+    expect(log.entries[0].message).toContain('data-ref="dots[]"');
+    expect(log.entries[0].component).toBe('Dropped');
 
     void instance.$refs.dots;
     void instance.$refs.dots;
     instance.$unmount().$mount();
     void instance.$refs.dots;
-    expect(warn).toHaveBeenCalledOnce();
+    expect(log.codes).toHaveLength(1);
 
     expect(instance.$refs.title).toEqual([]);
-    expect(warn).toHaveBeenCalledOnce();
-    warn.mockRestore();
+    expect(log.codes).toHaveLength(1);
+    log.stop();
   });
 
   it('resolves a namespaced ref across an intervening component', () => {
@@ -1772,6 +1769,11 @@ describe('$warn and $error', () => {
     return new Reporter(el).$mount();
   }
 
+  /**
+   * `captureDiagnostics()` covers every other test here. This one asserts the
+   * element the event *started on*, which the shipped helper does not expose,
+   * so it keeps its own listener.
+   */
   function record(): {
     details: ToolkitDiagnosticDetail[];
     targets: EventTarget[];
@@ -1830,14 +1832,12 @@ describe('$warn and $error', () => {
 
   it('carries the original value on $error, which a reporter needs', () => {
     const instance = mount();
-    const log = record();
-    const cancel = (event: Event) => event.preventDefault();
-    document.addEventListener('js-toolkit:diagnostic', cancel);
+    const log = captureDiagnostics();
     const cause = new Error('the cause');
 
     instance.$error('reporter.load-failed', 'Loading failed.', cause);
 
-    expect(log.details).toEqual([
+    expect(log.entries).toEqual([
       {
         severity: 'error',
         code: 'reporter.load-failed',
@@ -1847,20 +1847,17 @@ describe('$warn and $error', () => {
       },
     ]);
 
-    document.removeEventListener('js-toolkit:diagnostic', cancel);
     log.stop();
   });
 
   it('accepts a code from the enumerated core set too', () => {
     const instance = mount();
-    const log = record();
-    const sink = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
 
     instance.$warn(DIAGNOSTICS.ref.mismatch, 'A declared ref is missing.');
 
-    expect(log.details[0].code).toBe('ref.mismatch');
+    expect(log.codes).toEqual(['ref.mismatch']);
 
-    sink.mockRestore();
     log.stop();
   });
 });
diff --git a/packages/v4/src/attribute-namespaces.spec.ts b/packages/v4/src/attribute-namespaces.spec.ts
index 580828b6..40aa214b 100644
--- a/packages/v4/src/attribute-namespaces.spec.ts
+++ b/packages/v4/src/attribute-namespaces.spec.ts
@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { watchAttributeNamespace } from './attribute-namespaces.js';
 import { EVENTS } from './events.js';
-import { resetDom, settle } from './test-utils.js';
+import { resetDom, settle } from './test/index.js';
 import type { ToolkitDiagnosticDetail } from './diagnostic-contract.js';
 
 const cleanups = new Set<() => void>();
diff --git a/packages/v4/src/autoload.spec.ts b/packages/v4/src/autoload.spec.ts
index 4049e42b..9c0f61bb 100644
--- a/packages/v4/src/autoload.spec.ts
+++ b/packages/v4/src/autoload.spec.ts
@@ -6,7 +6,7 @@ import { EVENTS } from './events.js';
 import { getInstances } from './instances.js';
 import { INSTANCES } from './protocol-symbols.js';
 import { registerComponent, registerManifest } from './registry.js';
-import { resetDom, settle } from './test-utils.js';
+import { captureDiagnostics, resetDom, settle, waitFor } from './test/index.js';
 
 /** Positions used to control viewport strategies. */
 const OFFSCREEN = 'position:absolute;top:300vh;left:0;width:50px;height:50px';
@@ -68,8 +68,12 @@ function instanceOf<T extends Base>(el: Element, name: string): T | undefined {
   return el[INSTANCES]?.get(name) as T | undefined;
 }
 
-/** Wait for observer delivery. */
-async function observed(): Promise<void> {
+/**
+ * A bounded quiet period. Waiting for something to arrive is a poll — see the
+ * `waitFor` calls below — but an assertion that nothing was imported cannot be
+ * polled for, so it keeps a span long enough for the trigger to have fired.
+ */
+async function quiet(): Promise<void> {
   for (let i = 0; i < 6; i += 1) {
     await settle();
   }
@@ -145,13 +149,13 @@ describe('a lazy declaration before its class arrives', () => {
     const { name, load } = defineLazy();
     const el = render(name, {}, OFFSCREEN);
     registerManifest({ [name]: { load, mountStrategy: 'visible' } });
-    await observed();
+    await quiet();
 
     expect(el[INSTANCES]).toBeUndefined();
     expect(getInstances(name)).toEqual([]);
 
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await waitFor(() => getInstances(name).length > 0);
 
     expect(getInstances(name)).toHaveLength(1);
     expect(instanceOf(el, name)?.$isMounted).toBe(true);
@@ -161,12 +165,12 @@ describe('a lazy declaration before its class arrives', () => {
     const { name, load, importCount } = defineLazy();
     const el = render(name, {}, OFFSCREEN);
     registerManifest({ [name]: { load, mountStrategy: 'visible' } });
-    await observed();
+    await quiet();
 
     el.removeAttribute('data-component');
     await settle();
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await quiet();
 
     expect(importCount()).toBe(0);
   });
@@ -175,16 +179,16 @@ describe('a lazy declaration before its class arrives', () => {
     const { name, load, importCount } = defineLazy();
     const el = render(name, {}, OFFSCREEN);
     registerManifest({ [name]: { load, mountStrategy: 'visible:200px' } });
-    await observed();
+    await quiet();
 
     el.remove();
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await quiet();
 
     expect(importCount()).toBe(0);
 
     document.body.append(el);
-    await observed();
+    await waitFor(() => importCount() > 0);
 
     expect(importCount()).toBe(1);
     expect(instanceOf(el, name)?.$isMounted).toBe(true);
@@ -196,12 +200,12 @@ describe('the strategy that triggers the import', () => {
     const { name, load, importCount } = defineLazy();
     const el = render(name, {}, OFFSCREEN);
     registerManifest({ [name]: { load, mountStrategy: 'visible:200px 0px' } });
-    await observed();
+    await quiet();
 
     expect(importCount()).toBe(0);
 
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await waitFor(() => importCount() > 0);
 
     expect(importCount()).toBe(1);
     expect(instanceOf(el, name)?.$isMounted).toBe(true);
@@ -212,7 +216,7 @@ describe('the strategy that triggers the import', () => {
     // Keep the element away from the pointer because `pointerenter` counts as interaction.
     const el = render(name, { 'data-mount': 'interaction' }, OFFSCREEN);
     registerManifest({ [name]: { load, mountStrategy: 'visible' } });
-    await observed();
+    await quiet();
 
     expect(importCount()).toBe(0);
 
@@ -235,7 +239,7 @@ describe('the strategy that triggers the import', () => {
       diagnostics.push((event as CustomEvent<ToolkitDiagnosticDetail>).detail);
     });
     registerManifest({ [name]: load });
-    await observed();
+    await waitFor(() => diagnostics.length > 0);
 
     expect(importCount()).toBe(0);
     expect(el[INSTANCES]?.get(name)).toBeUndefined();
@@ -252,7 +256,7 @@ describe('the strategy that triggers the import', () => {
     const { name, load, importCount } = defineLazy();
     const el = render(name);
     registerManifest({ [name]: { load, mountStrategy: 'media:(min-width: 1px)' } });
-    await observed();
+    await waitFor(() => instanceOf(el, name)?.$isMounted);
 
     expect(importCount()).toBe(1);
     expect(instanceOf(el, name)?.$isMounted).toBe(true);
@@ -262,7 +266,7 @@ describe('the strategy that triggers the import', () => {
     const { name, load, importCount } = defineLazy();
     const el = render(name, { 'data-mount': 'media:(max-width: 1px)' });
     registerManifest({ [name]: load });
-    await observed();
+    await quiet();
 
     expect(importCount()).toBe(0);
     expect(el[INSTANCES]).toBeUndefined();
@@ -272,23 +276,22 @@ describe('the strategy that triggers the import', () => {
     const { name, load, importCount } = defineLazy();
     const el = render(name, { 'data-mount': 'in-view:200px 0px' }, OFFSCREEN);
     registerManifest({ [name]: load });
-    await observed();
+    await quiet();
 
     expect(importCount()).toBe(0);
 
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    const instance = await waitFor(() => instanceOf(el, name));
 
-    const instance = instanceOf(el, name);
     expect(importCount()).toBe(1);
     expect(instance?.$isMounted).toBe(true);
 
     el.setAttribute('style', OFFSCREEN);
-    await observed();
+    await waitFor(() => instance?.$isMounted === false);
 
     expect(instance?.$isMounted).toBe(false);
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await waitFor(() => instance?.$isMounted === true);
 
     expect(importCount()).toBe(1);
     expect(instance?.$isMounted).toBe(true);
@@ -311,17 +314,17 @@ describe('the strategy that triggers the import', () => {
         return Lazy;
       },
     });
-    await observed();
+    await quiet();
 
     el.setAttribute('style', OFFSCREEN);
-    await observed();
+    await quiet();
     release();
-    await observed();
+    await quiet();
 
     expect(el[INSTANCES]?.get(name)).toBeUndefined();
 
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await waitFor(() => instanceOf(el, name)?.$isMounted);
 
     expect(instanceOf(el, name)?.$isMounted).toBe(true);
   });
@@ -361,33 +364,37 @@ describe('registerManifest collisions and failures', () => {
     }
 
     registerComponent(Owned);
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
     const load = vi.fn();
     registerManifest({ [name]: load });
     const el = render(name);
     await settle();
 
     expect(load).not.toHaveBeenCalled();
-    expect(warn).toHaveBeenCalledWith(
-      `[js-toolkit:${DIAGNOSTICS.registry.conflict}] "${name}" is already registered; the incoming declaration was ignored.`,
-    );
+    expect(log.entries).toMatchObject([
+      {
+        severity: 'warning',
+        code: DIAGNOSTICS.registry.conflict,
+        message: `"${name}" is already registered; the incoming declaration was ignored.`,
+      },
+    ]);
     expect(instanceOf(el, name)).toBeInstanceOf(Owned);
-    warn.mockRestore();
+    log.stop();
   });
 
   it('ignores a token an earlier manifest already owns', async () => {
     const { name, load, importCount } = defineLazy();
     const later = vi.fn();
     registerManifest({ [name]: load });
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
     registerManifest({ [name]: later });
     render(name);
     await settle();
 
     expect(importCount()).toBe(1);
     expect(later).not.toHaveBeenCalled();
-    expect(warn).toHaveBeenCalled();
-    warn.mockRestore();
+    expect(log.codes).toEqual([DIAGNOSTICS.registry.conflict]);
+    log.stop();
   });
 
   it('reports an import failure once and leaves the page running', async () => {
@@ -470,17 +477,21 @@ describe('registerManifest collisions and failures', () => {
     const { name, Lazy } = defineLazy();
     counter += 1;
     const token = `Alias${counter}`;
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
 
     registerManifest({ [token]: async () => Lazy });
     const el = render(token);
     await settle();
 
-    expect(warn).toHaveBeenCalledWith(
-      `[js-toolkit:${DIAGNOSTICS.registry.lazyNameMismatch}] "${token}" resolved to a component named "${name}".`,
-    );
+    expect(log.entries).toMatchObject([
+      {
+        severity: 'warning',
+        code: DIAGNOSTICS.registry.lazyNameMismatch,
+        message: `"${token}" resolved to a component named "${name}".`,
+      },
+    ]);
     expect(el[INSTANCES]).toBeUndefined();
-    warn.mockRestore();
+    log.stop();
   });
 });
 
@@ -587,19 +598,19 @@ describe('a dynamic import declared in config.components', () => {
 
     registerComponent(Parent);
     const el = render(child.name, { 'data-mount': 'visible' }, OFFSCREEN);
-    await observed();
+    await quiet();
 
     expect(child.importCount()).toBe(0);
 
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await waitFor(() => child.importCount() > 0);
 
     expect(child.importCount()).toBe(1);
     expect(instanceOf(el, child.name)?.$isMounted).toBe(true);
   });
 
   it('reports a value which is neither a class nor an importer', async () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
     counter += 1;
     const childName = `NotAThunk${counter}`;
 
@@ -610,10 +621,14 @@ describe('a dynamic import declared in config.components', () => {
     render(childName);
     await settle();
 
-    expect(warn).toHaveBeenCalledWith(
-      `[js-toolkit:${DIAGNOSTICS.component.invalidFamilyDeclaration}] "${parentName}" declares "${childName}" as neither a component class nor an importer; the declaration was ignored.`,
-    );
-    warn.mockRestore();
+    expect(log.entries).toMatchObject([
+      {
+        severity: 'warning',
+        code: DIAGNOSTICS.component.invalidFamilyDeclaration,
+        message: `"${parentName}" declares "${childName}" as neither a component class nor an importer; the declaration was ignored.`,
+      },
+    ]);
+    log.stop();
   });
 });
 
@@ -682,16 +697,16 @@ describe('the family a subclass inherits', () => {
     const child = defineLazy();
     const { Parent } = defineParent({ [child.name]: child.load });
     const { Sub } = defineSubclass(Parent);
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
 
     registerComponent(Parent);
     registerComponent(Sub);
     const el = render(child.name);
     await settle();
 
-    expect(warn).not.toHaveBeenCalled();
+    expect(log.codes).toEqual([]);
     expect(child.importCount()).toBe(1);
     expect(instanceOf(el, child.name)?.$isMounted).toBe(true);
-    warn.mockRestore();
+    log.stop();
   });
 });
diff --git a/packages/v4/src/coexistence.spec.ts b/packages/v4/src/coexistence.spec.ts
index 05b26b65..8e2c135b 100644
--- a/packages/v4/src/coexistence.spec.ts
+++ b/packages/v4/src/coexistence.spec.ts
@@ -37,7 +37,7 @@ import {
 import { Base } from './Base.js';
 import { INSTANCES } from './protocol-symbols.js';
 import { registerComponent } from './registry.js';
-import { resetDom, settle } from './test-utils.js';
+import { resetDom, settle } from './test/index.js';
 
 class V3Widget extends BaseV3 {
   static config: BaseConfigV3 = { name: 'Widget' };
diff --git a/packages/v4/src/config-extension.spec.ts b/packages/v4/src/config-extension.spec.ts
index e449f355..ef490947 100644
--- a/packages/v4/src/config-extension.spec.ts
+++ b/packages/v4/src/config-extension.spec.ts
@@ -10,12 +10,14 @@
  * v3 behaviours v4 deliberately dropped: the auto-rename on collision and the
  * deep merge of the config.
  */
-import { afterEach, describe, expect, expectTypeOf, it, vi } from 'vitest';
+import { afterEach, describe, expect, expectTypeOf, it } from 'vitest';
 import { Base, type BaseConfig, type BaseProps } from './Base.js';
 import { component } from './decorators.js';
 import { DIAGNOSTICS } from './diagnostic-contract.js';
 import { registerComponent } from './registry.js';
-import { getInstance, resetDom, settle, TodoItem } from './test-utils.js';
+import { getInstance } from './test-utils.js';
+import { TodoItem } from './todo.fixtures.js';
+import { captureDiagnostics, resetDom, settle } from './test/index.js';
 
 afterEach(resetDom);
 
@@ -177,16 +179,20 @@ describe('what v3 did and v4 does not', () => {
     }
 
     registerComponent(Widget);
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
     registerComponent(UnnamedWidget);
     const el = render('Widget');
     await settle();
 
-    expect(warn).toHaveBeenCalledWith(
-      `[js-toolkit:${DIAGNOSTICS.registry.conflict}] "Widget" is already registered; the incoming declaration was ignored.`,
-    );
+    expect(log.entries).toMatchObject([
+      {
+        severity: 'warning',
+        code: DIAGNOSTICS.registry.conflict,
+        message: '"Widget" is already registered; the incoming declaration was ignored.',
+      },
+    ]);
     expect(getInstance(el, 'Widget')).not.toBeInstanceOf(UnnamedWidget);
-    warn.mockRestore();
+    log.stop();
   });
 
   it('does not deep merge an option definition it restates', () => {
diff --git a/packages/v4/src/context-subscription.spec.ts b/packages/v4/src/context-subscription.spec.ts
index f5722fef..f6685c6b 100644
--- a/packages/v4/src/context-subscription.spec.ts
+++ b/packages/v4/src/context-subscription.spec.ts
@@ -5,7 +5,8 @@ import { createContext, provideContext, provideRootContext, type ContextKey } fr
 import { DIAGNOSTICS, type ToolkitDiagnosticDetail } from './diagnostic-contract.js';
 import { EVENTS } from './events.js';
 import { registerComponent } from './registry.js';
-import { getInstance, resetDom, settle } from './test-utils.js';
+import { getInstance } from './test-utils.js';
+import { resetDom, settle } from './test/index.js';
 
 afterEach(resetDom);
 
diff --git a/packages/v4/src/context.spec.ts b/packages/v4/src/context.spec.ts
index eb994518..6c5044b9 100644
--- a/packages/v4/src/context.spec.ts
+++ b/packages/v4/src/context.spec.ts
@@ -12,7 +12,9 @@ import {
 import { DIAGNOSTICS, type ToolkitDiagnosticDetail } from './diagnostic-contract.js';
 import { EVENTS } from './events.js';
 import { registerComponent } from './registry.js';
-import { getInstance, renderTodoList, resetDom, settle } from './test-utils.js';
+import { getInstance } from './test-utils.js';
+import { renderTodoList } from './todo.fixtures.js';
+import { resetDom, settle } from './test/index.js';
 
 afterEach(resetDom);
 
diff --git a/packages/v4/src/decorators.spec.ts b/packages/v4/src/decorators.spec.ts
index 03793620..c826e1e6 100644
--- a/packages/v4/src/decorators.spec.ts
+++ b/packages/v4/src/decorators.spec.ts
@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, expectTypeOf, it, vi } from 'vitest';
+import { afterEach, describe, expect, expectTypeOf, it } from 'vitest';
 import {
   Base,
   type BaseConfig,
@@ -11,11 +11,14 @@ import {
   resolveConfig,
 } from './Base.js';
 import { isBaseConstructor } from './component-brand.js';
+import { DIAGNOSTICS } from './diagnostic-contract.js';
 import { createContext, signal, type Signal } from './context.js';
 import { children, component, inject, on, provide, read, write } from './decorators.js';
 import { registerComponent, registerComponents } from './registry.js';
 import { defaultScheduler } from './scheduler.js';
-import { getInstance, resetDom, settle, TodoItem } from './test-utils.js';
+import { getInstance } from './test-utils.js';
+import { TodoItem } from './todo.fixtures.js';
+import { captureDiagnostics, resetDom, settle } from './test/index.js';
 
 const DecoContext = createContext<Signal<number>>('deco-context');
 
@@ -426,11 +429,11 @@ describe('@component', () => {
 
     // Registering under the inherited name collides with the parent, which is
     // the loud first-wins path and not what this spec is about.
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
     // @ts-expect-error `name` is missing, as it is in untyped sources.
     @component({ options: { extra: Boolean } })
     class BrandChild extends BrandParent {}
-    warn.mockRestore();
+    log.stop();
 
     expect(BrandChild.config.name).toBe('BrandParent');
     // Consumed by `config.components` entries, `@on(Class, type)` and the lazy
@@ -447,14 +450,14 @@ describe('@component', () => {
     @component({ name: 'BrandFieldParent' })
     class BrandFieldParent extends Base {}
 
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
     // @ts-expect-error `name` is missing on both sides, as it is in untyped sources.
     @component({ refs: ['handle'] })
     class BrandFieldChild extends BrandFieldParent {
       // @ts-expect-error `name` is missing.
       static config: BaseConfig = { options: { extra: Boolean } };
     }
-    warn.mockRestore();
+    log.stop();
 
     expect(BrandFieldChild.config.name).toBe('BrandFieldParent');
     expect(BrandFieldChild.config.refs).toEqual(['handle']);
@@ -490,13 +493,12 @@ describe('@component', () => {
    * already applies to a chain, with the decorator last.
    */
   it('merges a static config field on the same class instead of dropping one', () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
 
     @component({ name: 'BothSides', refs: ['btn'] })
     class BothSides extends Base {
       static config: BaseConfig = { name: 'BothSides', options: { open: Boolean } };
     }
-    warn.mockRestore();
 
     expect(BothSides.config).toEqual({
       name: 'BothSides',
@@ -510,7 +512,8 @@ describe('@component', () => {
     });
     // Declaring the same name on both sides is not a conflict, and disjoint
     // keys need no precedence rule, so nothing is reported.
-    expect(warn).not.toHaveBeenCalled();
+    expect(log.codes).toEqual([]);
+    log.stop();
   });
 
   /**
@@ -519,7 +522,7 @@ describe('@component', () => {
    * mistake, not a declaration the merge can honour.
    */
   it('keeps the decorator value and reports a key declared differently on both sides', () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
 
     @component({
       name: 'ConflictingConfig',
@@ -539,26 +542,25 @@ describe('@component', () => {
       mountStrategy: 'visible',
       options: { open: Boolean, extra: String },
     });
-    expect(warn).toHaveBeenCalledOnce();
-    expect(warn.mock.calls[0][0]).toContain('[js-toolkit:component.config-conflict]');
-    expect(warn.mock.calls[0][0]).toContain('name, mountStrategy, options.open');
-    warn.mockRestore();
+    expect(log.codes).toEqual([DIAGNOSTICS.component.configConflict]);
+    expect(log.entries[0].message).toContain('name, mountStrategy, options.open');
+    log.stop();
   });
 
   /** Refs union, so declaring one on both sides loses nothing to report. */
   it('unions refs declared on both sides', () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
 
     @component({ name: 'RefUnion', refs: ['handle'] })
     class RefUnion extends Base {
       static config: BaseConfig = { name: 'RefUnion', refs: ['label', 'handle'] };
     }
-    warn.mockRestore();
 
     // The field's refs come first because the decorator merges onto them; refs
     // are looked up by name, so the order carries nothing.
     expect(RefUnion.config.refs).toEqual(['label', 'handle']);
-    expect(warn).not.toHaveBeenCalled();
+    expect(log.codes).toEqual([]);
+    log.stop();
   });
 
   /**
@@ -598,7 +600,7 @@ describe('@component', () => {
 
   /** Each class merges its own two declarations; the chain merges the rest. */
   it('merges both declarations on a decorated subclass of a decorated class', () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
 
     @component({ name: 'MixParent', refs: ['handle'] })
     class MixParent extends Base {
@@ -614,7 +616,6 @@ describe('@component', () => {
     class MixGrandChild extends MixChild {
       static config: BaseConfig = { name: 'MixGrandChild', refs: ['last'] };
     }
-    warn.mockRestore();
 
     expect(MixParent.config).toEqual({
       name: 'MixParent',
@@ -631,7 +632,8 @@ describe('@component', () => {
       refs: ['handle', 'extra', 'last'],
       options: { open: Boolean, size: Number },
     });
-    expect(warn).not.toHaveBeenCalled();
+    expect(log.codes).toEqual([]);
+    log.stop();
   });
 });
 
@@ -807,7 +809,7 @@ describe('@on', () => {
       </div>
     `;
     document.body.append(root);
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
     await settle();
 
     const instance = getInstance<NsDots>(root, 'NsDots');
@@ -817,8 +819,8 @@ describe('@on', () => {
     (root.querySelector('h2') as HTMLElement).click();
     expect(instance.titles).toEqual(['H2']);
 
-    expect(warn).not.toHaveBeenCalled();
-    warn.mockRestore();
+    expect(log.codes).toEqual([]);
+    log.stop();
   });
 
   it('warns instead of binding silently when @on drops a list ref suffix', async () => {
@@ -826,17 +828,17 @@ describe('@on', () => {
     root.setAttribute('data-component', 'DotMismatch');
     root.innerHTML = '<i data-ref="dots[]"></i><i data-ref="dots[]"></i>';
     document.body.append(root);
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
     await settle();
 
     const instance = getInstance<DotMismatch>(root, 'DotMismatch');
     (root.querySelectorAll('i')[1] as HTMLElement).click();
     expect(instance.clicked).toEqual([]);
 
-    expect(warn).toHaveBeenCalledOnce();
-    expect(warn.mock.calls[0][0]).toContain('DotMismatch');
-    expect(warn.mock.calls[0][0]).toContain("@on('dots[]', …)");
-    warn.mockRestore();
+    expect(log.codes).toEqual([DIAGNOSTICS.ref.mismatch]);
+    expect(log.entries[0].component).toBe('DotMismatch');
+    expect(log.entries[0].message).toContain("@on('dots[]', …)");
+    log.stop();
   });
 
   it('resolves a subclass to the name it mounts under, not to its parent', async () => {
diff --git a/packages/v4/src/dom-mutations.spec.ts b/packages/v4/src/dom-mutations.spec.ts
index b780d29a..18bfe145 100644
--- a/packages/v4/src/dom-mutations.spec.ts
+++ b/packages/v4/src/dom-mutations.spec.ts
@@ -15,7 +15,8 @@ import { EVENTS } from './events.js';
 import { INSTANCES } from './protocol-symbols.js';
 import { registerComponent } from './registry.js';
 import { SWAP_MODES, swap } from './swap.js';
-import { getInstance, resetDom } from './test-utils.js';
+import { getInstance } from './test-utils.js';
+import { resetDom } from './test/index.js';
 
 let counter = 0;
 
diff --git a/packages/v4/src/group.spec.ts b/packages/v4/src/group.spec.ts
index fc0e6c0e..b5ef34ac 100644
--- a/packages/v4/src/group.spec.ts
+++ b/packages/v4/src/group.spec.ts
@@ -4,7 +4,8 @@ import { createContext, type Signal } from './context.js';
 import { subscribeContext } from './context-subscription.js';
 import { createGroup, type Group } from './group.js';
 import { registerComponents } from './registry.js';
-import { getInstance, resetDom, settle } from './test-utils.js';
+import { getInstance } from './test-utils.js';
+import { mount, resetDom, settle } from './test/index.js';
 
 afterEach(resetDom);
 
@@ -209,14 +210,6 @@ function disclosureMarkup(id: string, open = false): string {
   `;
 }
 
-async function render(html: string): Promise<HTMLElement> {
-  const root = document.createElement('div');
-  root.innerHTML = html;
-  document.body.append(root);
-  await settle();
-  return root;
-}
-
 function disclosure(root: ParentNode, id: string): Disclosure {
   return getInstance<Disclosure>(root.querySelector(`#${id}`), 'Disclosure');
 }
@@ -227,7 +220,7 @@ function group(root: ParentNode, id: string): DisclosureGroup {
 
 describe('a group of disclosures', () => {
   it('collects its members in document order', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="grp" data-component="DisclosureGroup">
         ${disclosureMarkup('a')}
         ${disclosureMarkup('b')}
@@ -239,7 +232,7 @@ describe('a group of disclosures', () => {
   });
 
   it('keeps one open at a time', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="grp" data-component="DisclosureGroup">
         ${disclosureMarkup('a')}
         ${disclosureMarkup('b')}
@@ -255,7 +248,7 @@ describe('a group of disclosures', () => {
   });
 
   it('works with no group above it', async () => {
-    const root = await render(disclosureMarkup('lonely'));
+    const root = await mount(disclosureMarkup('lonely'));
     const lonely = disclosure(root, 'lonely');
 
     expect(lonely.group).toBeUndefined();
@@ -264,7 +257,7 @@ describe('a group of disclosures', () => {
   });
 
   it('lets an open peer that mounts later lose to the one before it in the DOM', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="grp" data-component="DisclosureGroup">
         ${disclosureMarkup('a', true)}
       </div>
@@ -282,7 +275,7 @@ describe('a group of disclosures', () => {
   });
 
   it('lets an open peer that mounts later win when it precedes the others', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="grp" data-component="DisclosureGroup">
         ${disclosureMarkup('b', true)}
       </div>
@@ -300,7 +293,7 @@ describe('a group of disclosures', () => {
   });
 
   it('joins a group that mounts after its members', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="grp">
         ${disclosureMarkup('a')}
         ${disclosureMarkup('b')}
@@ -317,7 +310,7 @@ describe('a group of disclosures', () => {
   });
 
   it('gives a nested group its own members', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="outer" data-component="DisclosureGroup">
         ${disclosureMarkup('o', true)}
         <div id="inner" data-component="DisclosureGroup">
@@ -339,7 +332,7 @@ describe('a group of disclosures', () => {
   });
 
   it('hands a member over to a nearer group inserted later', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="outer" data-component="DisclosureGroup">
         ${disclosureMarkup('a')}
         ${disclosureMarkup('b')}
@@ -364,7 +357,7 @@ describe('a group of disclosures', () => {
   });
 
   it('drops a member whose element leaves the DOM', async () => {
-    const root = await render(`
+    const root = await mount(`
       <div id="grp" data-component="DisclosureGroup">
         ${disclosureMarkup('a')}
         ${disclosureMarkup('b')}
diff --git a/packages/v4/src/instances.spec.ts b/packages/v4/src/instances.spec.ts
index 51a61928..042fc64d 100644
--- a/packages/v4/src/instances.spec.ts
+++ b/packages/v4/src/instances.spec.ts
@@ -1,7 +1,9 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { getInstances } from './instances.js';
 import { INSTANCES } from './protocol-symbols.js';
-import { getInstance, renderTodoList, resetDom, settle, type TodoItem } from './test-utils.js';
+import { getInstance } from './test-utils.js';
+import { renderTodoList, type TodoItem } from './todo.fixtures.js';
+import { resetDom, settle } from './test/index.js';
 
 afterEach(resetDom);
 
diff --git a/packages/v4/src/manifest.spec.ts b/packages/v4/src/manifest.spec.ts
index 89caab35..74703315 100644
--- a/packages/v4/src/manifest.spec.ts
+++ b/packages/v4/src/manifest.spec.ts
@@ -10,7 +10,8 @@ import {
   type WebpackContextLike,
 } from './manifest.js';
 import { registerManifest } from './registry.js';
-import { getInstance, resetDom, settle } from './test-utils.js';
+import { getInstance } from './test-utils.js';
+import { captureDiagnostics, resetDom, settle } from './test/index.js';
 
 class Widget {}
 class Other {}
@@ -66,7 +67,7 @@ describe('defineManifest', () => {
   });
 
   it('warns for a duplicate token and keeps the first path and importer', () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
     const first = vi.fn(async () => ({ Widget }));
     const second = vi.fn(async () => ({ Widget: Other }));
     const modules = {
@@ -77,10 +78,15 @@ describe('defineManifest', () => {
     defineManifest({ modules });
 
     expect(manifest.Widget).toBe(first);
-    expect(warn).toHaveBeenCalledOnce();
-    expect(warn).toHaveBeenCalledWith(
-      `[js-toolkit:${DIAGNOSTICS.manifest.duplicateToken}] "Widget" is already derived from "./first/Widget.ts"; ignoring "./second/Widget.ts".`,
-    );
+    expect(log.entries).toMatchObject([
+      {
+        severity: 'warning',
+        code: DIAGNOSTICS.manifest.duplicateToken,
+        message:
+          '"Widget" is already derived from "./first/Widget.ts"; ignoring "./second/Widget.ts".',
+      },
+    ]);
+    log.stop();
   });
 
   it('applies one non-eager mount strategy to every generated entry', () => {
diff --git a/packages/v4/src/mount-strategies.spec.ts b/packages/v4/src/mount-strategies.spec.ts
index 658bff2b..e49cb2d2 100644
--- a/packages/v4/src/mount-strategies.spec.ts
+++ b/packages/v4/src/mount-strategies.spec.ts
@@ -5,7 +5,7 @@ import { EVENTS } from './events.js';
 import { INSTANCES } from './protocol-symbols.js';
 import { registerComponent } from './registry.js';
 import { getSharedRuntimeSlot } from './shared-runtime.js';
-import { resetDom, settle } from './test-utils.js';
+import { resetDom, settle, waitFor } from './test/index.js';
 
 /**
  * The page-wide interaction signal is a fact about the visit, so it survives a
@@ -71,7 +71,12 @@ function instanceOf<T extends Base>(el: Element, name: string): T | undefined {
   return el[INSTANCES]?.get(name) as T | undefined;
 }
 
-async function observed(): Promise<void> {
+/**
+ * A bounded quiet period, for the assertions that nothing mounted. Every
+ * positive wait below polls for the state it expects; an absence cannot be
+ * polled for, so those keep a span long enough for the strategy to have acted.
+ */
+async function quiet(): Promise<void> {
   for (let i = 0; i < 6; i += 1) {
     await settle();
   }
@@ -96,7 +101,7 @@ describe('data-mount="visible"', () => {
   it('leaves the component uninstantiated until it is seen', async () => {
     const { name } = defineTracked();
     const el = render(name, { 'data-mount': 'visible' }, OFFSCREEN);
-    await observed();
+    await quiet();
 
     expect(el[INSTANCES]?.get(name)).toBeUndefined();
   });
@@ -104,15 +109,14 @@ describe('data-mount="visible"', () => {
   it('mounts once with a root margin and stays mounted afterwards', async () => {
     const { name } = defineTracked();
     const el = render(name, { 'data-mount': 'visible:200px' }, OFFSCREEN);
-    await observed();
+    await quiet();
 
     el.setAttribute('style', ONSCREEN);
-    await observed();
-    const instance = instanceOf(el, name);
+    const instance = await waitFor(() => instanceOf(el, name));
     expect(instance?.$isMounted).toBe(true);
 
     el.setAttribute('style', OFFSCREEN);
-    await observed();
+    await quiet();
     expect(instance?.$isMounted).toBe(true);
   });
 });
@@ -122,19 +126,18 @@ describe('data-mount="in-view"', () => {
     const { name, Tracked } = defineTracked();
     type Tracked = InstanceType<typeof Tracked>;
     const el = render(name, { 'data-mount': 'in-view' }, ONSCREEN);
-    await observed();
+    const instance = await waitFor(() => instanceOf<Tracked>(el, name));
 
-    const instance = instanceOf<Tracked>(el, name);
     expect(instance?.$isMounted).toBe(true);
     expect(instance?.mounts).toBe(1);
 
     el.setAttribute('style', OFFSCREEN);
-    await observed();
+    await waitFor(() => instance?.$isMounted === false);
     expect(instance?.$isMounted).toBe(false);
     expect(instance?.unmounts).toBe(1);
 
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await waitFor(() => instance?.mounts === 2);
     expect(instanceOf(el, name)).toBe(instance);
     expect(instance?.$isMounted).toBe(true);
     expect(instance?.mounts).toBe(2);
@@ -254,7 +257,7 @@ describe('data-mount="idle"', () => {
   it('mounts when the main thread goes idle', async () => {
     const { name } = defineTracked();
     const el = render(name, { 'data-mount': 'idle' });
-    await observed();
+    await waitFor(() => instanceOf(el, name)?.$isMounted);
 
     expect(instanceOf(el, name)?.$isMounted).toBe(true);
   });
@@ -266,7 +269,13 @@ describe('data-mount="media:…"', () => {
     const failing = defineTracked();
     render(matching.name, { 'data-mount': 'media:(min-width: 1px)' });
     const narrow = render(failing.name, { 'data-mount': 'media:(max-width: 1px)' });
-    await observed();
+    // The matching query mounting proves the media pass ran, which is what
+    // makes the failing query's absence below mean something.
+    await waitFor(
+      () =>
+        instanceOf(document.querySelector(`[data-component="${matching.name}"]`)!, matching.name)
+          ?.$isMounted,
+    );
 
     expect(
       instanceOf(document.querySelector(`[data-component="${matching.name}"]`)!, matching.name)
@@ -280,11 +289,11 @@ describe('config.mountStrategy', () => {
   it('sets a parameterized default for every instance of a component', async () => {
     const { name } = defineTracked({ mountStrategy: 'visible:200px 0px' });
     const el = render(name, {}, OFFSCREEN);
-    await observed();
+    await quiet();
     expect(el[INSTANCES]?.get(name)).toBeUndefined();
 
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await waitFor(() => instanceOf(el, name)?.$isMounted);
     expect(instanceOf(el, name)?.$isMounted).toBe(true);
   });
 
@@ -299,16 +308,15 @@ describe('config.mountStrategy', () => {
   it('lets a parameterized data-mount override the component config', async () => {
     const { name } = defineTracked({ mountStrategy: 'eager' });
     const el = render(name, { 'data-mount': 'in-view:200px 0px' }, OFFSCREEN);
-    await observed();
+    await quiet();
     expect(el[INSTANCES]?.get(name)).toBeUndefined();
 
     el.setAttribute('style', ONSCREEN);
-    await observed();
-    const instance = instanceOf(el, name);
+    const instance = await waitFor(() => instanceOf(el, name));
     expect(instance?.$isMounted).toBe(true);
 
     el.setAttribute('style', OFFSCREEN);
-    await observed();
+    await waitFor(() => instance?.$isMounted === false);
     expect(instance?.$isMounted).toBe(false);
   });
 
@@ -320,7 +328,7 @@ describe('config.mountStrategy', () => {
 
     el.removeAttribute('data-mount');
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await waitFor(() => instanceOf(el, name)?.$isMounted);
     expect(instanceOf(el, name)?.$isMounted).toBe(true);
   });
 
@@ -335,11 +343,11 @@ describe('config.mountStrategy', () => {
     registerComponent(Heir);
 
     const el = render(name, {}, OFFSCREEN);
-    await observed();
+    await quiet();
     expect(el[INSTANCES]?.get(name)).toBeUndefined();
 
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await waitFor(() => instanceOf(el, name)?.$isMounted);
     expect(instanceOf(el, name)?.$isMounted).toBe(true);
   });
 
@@ -363,7 +371,7 @@ describe('dynamic data-mount', () => {
   it('replaces a waiting strategy when the attribute changes', async () => {
     const { name } = defineTracked();
     const el = render(name, { 'data-mount': 'visible' }, OFFSCREEN);
-    await observed();
+    await quiet();
     expect(el[INSTANCES]?.get(name)).toBeUndefined();
 
     el.setAttribute('data-mount', 'eager');
@@ -387,7 +395,7 @@ describe('invalid data-mount', () => {
       });
       document.body.append(el);
 
-      await observed();
+      await waitFor(() => events.length > 0);
 
       expect(el[INSTANCES]?.get(name)).toBeUndefined();
       expect(events).toHaveLength(1);
@@ -409,7 +417,7 @@ describe('invalid data-mount', () => {
       // A same-value mutation reconciles the element, but the inert controller
       // remains current and must not report or schedule itself again.
       el.setAttribute('data-mount', strategy);
-      await observed();
+      await quiet();
       expect(events).toHaveLength(1);
 
       el.setAttribute('data-mount', 'eager');
@@ -434,7 +442,7 @@ describe('invalid data-mount', () => {
     healthyEl.setAttribute('data-component', healthy.name);
     document.body.append(brokenEl, healthyEl);
 
-    await observed();
+    await waitFor(() => instanceOf(healthyEl, healthy.name)?.$isMounted);
 
     expect(brokenEl[INSTANCES]?.get(broken.name)).toBeUndefined();
     expect(diagnostics).toHaveLength(1);
@@ -446,12 +454,12 @@ describe('teardown', () => {
   it('stops a parameterized viewport strategy when the element leaves the document', async () => {
     const { name } = defineTracked();
     const el = render(name, { 'data-mount': 'visible:200px' }, OFFSCREEN);
-    await observed();
+    await quiet();
 
     el.remove();
-    await observed();
+    await quiet();
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await quiet();
     expect(el[INSTANCES]?.get(name)).toBeUndefined();
   });
 
@@ -464,15 +472,14 @@ describe('teardown', () => {
     const el = document.createElement('div');
     el.setAttribute('data-component', name);
     from.append(el);
-    await observed();
-    const instance = instanceOf<Tracked>(el, name);
+    const instance = await waitFor(() => instanceOf<Tracked>(el, name));
     expect(instance?.$isMounted).toBe(true);
     expect(instance?.mounts).toBe(1);
 
     // A move is one removal record plus one addition record. It ends one
     // mount cycle and starts another without replacing the instance.
     to.append(el);
-    await observed();
+    await waitFor(() => instance?.mounts === 2);
     expect(instanceOf(el, name)).toBe(instance);
     expect(instance?.$isMounted).toBe(true);
     expect(instance?.unmounts).toBe(1);
@@ -483,13 +490,13 @@ describe('teardown', () => {
   it('re-schedules an element that comes back', async () => {
     const { name } = defineTracked();
     const el = render(name, { 'data-mount': 'visible' }, ONSCREEN);
-    await observed();
+    await waitFor(() => instanceOf(el, name)?.$isMounted);
     expect(instanceOf(el, name)?.$isMounted).toBe(true);
 
     el.remove();
-    await observed();
+    await waitFor(() => instanceOf(el, name)?.$isMounted === false);
     document.body.append(el);
-    await observed();
+    await waitFor(() => instanceOf(el, name)?.$isMounted);
     expect(instanceOf(el, name)?.$isMounted).toBe(true);
   });
 });
@@ -504,13 +511,13 @@ describe('several components on one element', () => {
     el.setAttribute('data-mount', 'visible');
     el.setAttribute('style', OFFSCREEN);
     document.body.append(el);
-    await observed();
+    await quiet();
 
     expect(el[INSTANCES]?.get(first.name)).toBeUndefined();
     expect(el[INSTANCES]?.get(second.name)).toBeUndefined();
 
     el.setAttribute('style', ONSCREEN);
-    await observed();
+    await waitFor(() => instanceOf(el, first.name)?.$isMounted);
     expect(instanceOf(el, first.name)?.$isMounted).toBe(true);
     expect(instanceOf(el, second.name)?.$isMounted).toBe(true);
   });
diff --git a/packages/v4/src/negotiated-events.spec.ts b/packages/v4/src/negotiated-events.spec.ts
index 1c814536..e9fae220 100644
--- a/packages/v4/src/negotiated-events.spec.ts
+++ b/packages/v4/src/negotiated-events.spec.ts
@@ -10,7 +10,7 @@ import {
   type Extension,
 } from './negotiated-events.js';
 import { nextFrame } from './scheduler.js';
-import { resetDom } from './test-utils.js';
+import { captureDiagnostics, resetDom } from './test/index.js';
 import { viewTransition } from './viewTransition.js';
 
 afterEach(async () => {
@@ -159,6 +159,9 @@ describe('domUpdate()', () => {
 
   it('keeps the direct fallback when its warning is canceled', async () => {
     const { outer, target } = renderTarget();
+    // The assertion here *is* about the console sink — that cancelling the
+    // event suppresses it — so this one keeps its spy. `captureDiagnostics()`
+    // cancels every event it sees, which would make the assertion vacuous.
     const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
     const diagnostics: ToolkitDiagnosticDetail[] = [];
     target.addEventListener(EVENTS.diagnostic, (event) => {
@@ -178,7 +181,7 @@ describe('domUpdate()', () => {
 
   it('warns and ignores a wrap() registration made after dispatch', async () => {
     const { outer, target } = renderTarget();
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
     let late: DomUpdateDetail['wrap'] | undefined;
     outer.addEventListener(EVENTS.dom.update, (event) => {
       late = detailOf<DomUpdateDetail>(event).wrap;
@@ -192,7 +195,8 @@ describe('domUpdate()', () => {
     expect(target.dataset).toMatchObject({ applied: 'yes', appliedAgain: 'yes' });
     expect(target.dataset.late).toBeUndefined();
     expect(target.dataset.later).toBeUndefined();
-    expect(warn).toHaveBeenCalledOnce();
+    expect(log.codes).toEqual([DIAGNOSTICS.protocol.lateRegistration]);
+    log.stop();
   });
 
   it('accepts viewTransition() without an adapter', async () => {
@@ -284,7 +288,7 @@ describe('emitExtendable()', () => {
 
   it('warns and ignores a waitUntil() registration made after dispatch', async () => {
     const { outer, target } = renderTarget();
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
     let late: ExtendableDetail['waitUntil'] | undefined;
     let calls = 0;
     outer.addEventListener('close', (event) => {
@@ -300,6 +304,7 @@ describe('emitExtendable()', () => {
     });
 
     expect(calls).toBe(0);
-    expect(warn).toHaveBeenCalledOnce();
+    expect(log.codes).toEqual([DIAGNOSTICS.protocol.lateRegistration]);
+    log.stop();
   });
 });
diff --git a/packages/v4/src/props.spec.ts b/packages/v4/src/props.spec.ts
index 9546c0b5..aad1a1cb 100644
--- a/packages/v4/src/props.spec.ts
+++ b/packages/v4/src/props.spec.ts
@@ -1,7 +1,8 @@
 import { describe, expect, expectTypeOf, it } from 'vitest';
 import { Base, type BaseProps } from './Base.js';
 import { registerComponent } from './registry.js';
-import { getInstance, resetDom, settle } from './test-utils.js';
+import { getInstance } from './test-utils.js';
+import { resetDom, settle } from './test/index.js';
 
 /**
  * Assert assignability when a deferred type prevents `expectTypeOf().toExtend()`.
diff --git a/packages/v4/src/registry.spec.ts b/packages/v4/src/registry.spec.ts
index 705d8127..523abf42 100644
--- a/packages/v4/src/registry.spec.ts
+++ b/packages/v4/src/registry.spec.ts
@@ -1,10 +1,12 @@
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it } from 'vitest';
 import { Base, type BaseConfig } from './Base.js';
 import { DIAGNOSTICS, type ToolkitDiagnosticDetail } from './diagnostic-contract.js';
 import { EVENTS } from './events.js';
 import { INSTANCES } from './protocol-symbols.js';
 import { registerComponent } from './registry.js';
-import { getInstance, renderTodoList, resetDom, settle, TodoItem, TodoList } from './test-utils.js';
+import { getInstance } from './test-utils.js';
+import { renderTodoList, TodoItem, TodoList } from './todo.fixtures.js';
+import { captureDiagnostics, resetDom, settle } from './test/index.js';
 
 afterEach(resetDom);
 
@@ -243,17 +245,21 @@ describe('registry', () => {
     }
 
     registerComponent(Named);
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
     registerComponent(Extended);
     const el = document.createElement('div');
     el.setAttribute('data-component', 'MergedName');
     document.body.append(el);
     await settle();
 
-    expect(warn).toHaveBeenCalledWith(
-      `[js-toolkit:${DIAGNOSTICS.registry.conflict}] "MergedName" is already registered; the incoming declaration was ignored.`,
-    );
+    expect(log.entries).toMatchObject([
+      {
+        severity: 'warning',
+        code: DIAGNOSTICS.registry.conflict,
+        message: '"MergedName" is already registered; the incoming declaration was ignored.',
+      },
+    ]);
     expect(getInstance(el, 'MergedName')).toBeInstanceOf(Named);
-    warn.mockRestore();
+    log.stop();
   });
 });
diff --git a/packages/v4/src/responsive-components.spec.ts b/packages/v4/src/responsive-components.spec.ts
index 334962ee..6e5efe02 100644
--- a/packages/v4/src/responsive-components.spec.ts
+++ b/packages/v4/src/responsive-components.spec.ts
@@ -1,11 +1,12 @@
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it } from 'vitest';
 import { Base, type BaseConfig } from './Base.js';
+import { DIAGNOSTICS } from './diagnostic-contract.js';
 import { whenDOMSettled } from './dom-mutations.js';
 import { getInstances } from './instances.js';
 import { INSTANCES } from './protocol-symbols.js';
 import { registerComponent, registerManifest } from './registry.js';
 import { BREAKPOINTS, setBreakpoints } from './services/breakpoint.js';
-import { resetDom, settle } from './test-utils.js';
+import { captureDiagnostics, resetDom, settle } from './test/index.js';
 
 let counter = 0;
 
@@ -347,7 +348,7 @@ describe('responsive component declarations', () => {
   it('discovers declarations from a custom setBreakpoints replacement and settles their mount', async () => {
     const feature = defineTracked('CustomBreakpoint');
     register(feature);
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
     const el = render({ 'data-component:desktop': feature.name });
     await whenDOMSettled();
     expect(instance(el, feature.name)).toBeUndefined();
@@ -361,14 +362,14 @@ describe('responsive component declarations', () => {
     await whenDOMSettled();
     expect(mounted?.$isMounted).toBe(false);
     expect(instance(el, feature.name)).toBeUndefined();
-    warn.mockRestore();
+    log.stop();
   });
 
   it('ignores and warns once for a suffix naming no configured breakpoint', async () => {
     const base = defineTracked('WarningBase');
     const invalid = defineTracked('Invalid');
     register(base, invalid);
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
     const el = render({
       'data-component': base.name,
       'data-component:xxs:xs:s': invalid.name,
@@ -377,15 +378,13 @@ describe('responsive component declarations', () => {
 
     expect(instance(el, base.name)?.$isMounted).toBe(true);
     expect(instance(el, invalid.name)).toBeUndefined();
-    expect(warn).toHaveBeenCalledTimes(1);
-    expect(warn).toHaveBeenCalledWith(
-      expect.stringContaining('`data-component:xxs:xs:s` names no breakpoint'),
-    );
+    expect(log.codes).toEqual([DIAGNOSTICS.responsive.unknownBreakpoint]);
+    expect(log.entries[0].message).toContain('`data-component:xxs:xs:s` names no breakpoint');
 
     el.setAttribute('data-component', `${base.name} ${base.name}`);
     await whenDOMSettled();
-    expect(warn).toHaveBeenCalledTimes(1);
-    warn.mockRestore();
+    expect(log.codes).toHaveLength(1);
+    log.stop();
   });
 
   it('opens no breakpoint listener for pages with plain declarations only', async () => {
diff --git a/packages/v4/src/responsive-options.spec.ts b/packages/v4/src/responsive-options.spec.ts
index 168b9aaf..ded20128 100644
--- a/packages/v4/src/responsive-options.spec.ts
+++ b/packages/v4/src/responsive-options.spec.ts
@@ -1,9 +1,11 @@
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it } from 'vitest';
 import { Base, type OptionChange } from './Base.js';
+import { DIAGNOSTICS } from './diagnostic-contract.js';
 import { EVENTS } from './events.js';
 import { registerComponent, registerManifest } from './registry.js';
 import { BREAKPOINTS, setBreakpoints } from './services/breakpoint.js';
-import { getInstance, resetDom, settle } from './test-utils.js';
+import { getInstance } from './test-utils.js';
+import { captureDiagnostics, resetDom, settle } from './test/index.js';
 
 /** Select test breakpoints without changing the viewport. */
 function atSmall(): void {
@@ -449,7 +451,7 @@ describe('responsive options', () => {
   });
 
   it('reports a suffix that names no breakpoint, which is what v3 markup is', async () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const log = captureDiagnostics();
     atSmall();
     render(
       // A combined suffix is one unknown breakpoint name.
@@ -457,10 +459,9 @@ describe('responsive options', () => {
     );
     await settle();
 
-    expect(warn).toHaveBeenCalledWith(
-      expect.stringContaining('`data-option-label:small:large` names no breakpoint'),
-    );
-    warn.mockRestore();
+    expect(log.codes).toEqual([DIAGNOSTICS.responsive.unknownBreakpoint]);
+    expect(log.entries[0].message).toContain('`data-option-label:small:large` names no breakpoint');
+    log.stop();
   });
 });
 
diff --git a/packages/v4/src/services/breakpoint.spec.ts b/packages/v4/src/services/breakpoint.spec.ts
index 5d9d7e77..bb31e60f 100644
--- a/packages/v4/src/services/breakpoint.spec.ts
+++ b/packages/v4/src/services/breakpoint.spec.ts
@@ -1,5 +1,5 @@
 import { afterEach, describe, expect, it } from 'vitest';
-import { settle } from '../test-utils.js';
+import { settle } from '../test/index.js';
 import { BREAKPOINTS, getBreakpoints, setBreakpoints, useBreakpoint } from './breakpoint.js';
 
 afterEach(() => {
diff --git a/packages/v4/src/services/drag.spec.ts b/packages/v4/src/services/drag.spec.ts
index 9539282c..62b33de8 100644
--- a/packages/v4/src/services/drag.spec.ts
+++ b/packages/v4/src/services/drag.spec.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { userEvent } from '@vitest/browser/context';
-import { countRequestedFrames, frames } from '../test-utils.js';
+import { countRequestedFrames } from '../test-utils.js';
+import { frames } from '../test/index.js';
 import { DRAG_MODES, useDrag, type DragMode, type DragProps } from './drag.js';
 
 function render(): HTMLElement {
diff --git a/packages/v4/src/services/media.spec.ts b/packages/v4/src/services/media.spec.ts
index 19175645..323d1d63 100644
--- a/packages/v4/src/services/media.spec.ts
+++ b/packages/v4/src/services/media.spec.ts
@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { cdp } from 'vitest/browser';
 import type {} from '@vitest/browser-playwright';
-import { settle } from '../test-utils.js';
+import { settle } from '../test/index.js';
 import { useMediaQuery, usePrefersReducedMotion, type MediaQueryProps } from './media.js';
 
 async function emulateReducedMotion(value: 'reduce' | 'no-preference'): Promise<void> {
diff --git a/packages/v4/src/services/mixin.spec.ts b/packages/v4/src/services/mixin.spec.ts
index e45df062..8f315267 100644
--- a/packages/v4/src/services/mixin.spec.ts
+++ b/packages/v4/src/services/mixin.spec.ts
@@ -1,7 +1,8 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { Base } from '../Base.js';
 import { registerComponent } from '../registry.js';
-import { countRequestedFrames, frames, getInstance, resetDom, settle } from '../test-utils.js';
+import { countRequestedFrames, getInstance } from '../test-utils.js';
+import { frames, resetDom, settle } from '../test/index.js';
 import { useDrag, withDrag } from './drag.js';
 import { withRaf } from './raf.js';
 import { withResize } from './resize.js';
diff --git a/packages/v4/src/services/raf.spec.ts b/packages/v4/src/services/raf.spec.ts
index 16ff2e90..dc6d5f91 100644
--- a/packages/v4/src/services/raf.spec.ts
+++ b/packages/v4/src/services/raf.spec.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import { defaultScheduler } from '../scheduler.js';
-import { frames } from '../test-utils.js';
+import { frames } from '../test/index.js';
 import { useRaf, type RafProps } from './raf.js';
 
 describe('useRaf', () => {
diff --git a/packages/v4/src/services/resize.spec.ts b/packages/v4/src/services/resize.spec.ts
index 96801972..7dfd35a0 100644
--- a/packages/v4/src/services/resize.spec.ts
+++ b/packages/v4/src/services/resize.spec.ts
@@ -1,5 +1,5 @@
 import { afterEach, describe, expect, it } from 'vitest';
-import { settle } from '../test-utils.js';
+import { settle } from '../test/index.js';
 import { useResize, useWindowSize, type ResizeProps } from './resize.js';
 
 function snapshot(props: ResizeProps): ResizeProps {
diff --git a/packages/v4/src/services/scroll-progress.spec.ts b/packages/v4/src/services/scroll-progress.spec.ts
index 54abeb36..e2675e15 100644
--- a/packages/v4/src/services/scroll-progress.spec.ts
+++ b/packages/v4/src/services/scroll-progress.spec.ts
@@ -1,6 +1,6 @@
 import { afterEach, describe, expect, expectTypeOf, it } from 'vitest';
 import { Base } from '../Base.js';
-import { settle } from '../test-utils.js';
+import { settle } from '../test/index.js';
 import type { Toggle } from './toggle.js';
 import {
   useScrollProgress,
diff --git a/packages/v4/src/services/scroll.spec.ts b/packages/v4/src/services/scroll.spec.ts
index 7b1f60fd..255a6b3f 100644
--- a/packages/v4/src/services/scroll.spec.ts
+++ b/packages/v4/src/services/scroll.spec.ts
@@ -1,5 +1,5 @@
 import { afterEach, describe, expect, it } from 'vitest';
-import { settle } from '../test-utils.js';
+import { settle } from '../test/index.js';
 import { useScroll, useWindowScroll, type ScrollProps } from './scroll.js';
 
 function snapshot(props: ScrollProps) {
diff --git a/packages/v4/src/services/toggle.spec.ts b/packages/v4/src/services/toggle.spec.ts
index 3555a68f..e7e5a49d 100644
--- a/packages/v4/src/services/toggle.spec.ts
+++ b/packages/v4/src/services/toggle.spec.ts
@@ -1,6 +1,6 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { Base } from '../Base.js';
-import { frames, resetDom } from '../test-utils.js';
+import { frames, resetDom } from '../test/index.js';
 import { useRaf } from './raf.js';
 import { toggle } from './toggle.js';
 import type { MountedReturn } from '../Base.js';
diff --git a/packages/v4/src/services/until.spec.ts b/packages/v4/src/services/until.spec.ts
index 63f5ea83..45aefb56 100644
--- a/packages/v4/src/services/until.spec.ts
+++ b/packages/v4/src/services/until.spec.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { settle } from '../test-utils.js';
+import { settle } from '../test/index.js';
 import { createService, type MutableProps } from './service.js';
 import { useScroll } from './scroll.js';
 import { until } from './until.js';
diff --git a/packages/v4/src/swap.spec.ts b/packages/v4/src/swap.spec.ts
index a35e4857..2a68ef6a 100644
--- a/packages/v4/src/swap.spec.ts
+++ b/packages/v4/src/swap.spec.ts
@@ -5,7 +5,7 @@ import { EVENTS } from './events.js';
 import { INSTANCES } from './protocol-symbols.js';
 import { registerComponent } from './registry.js';
 import { SWAP_MODES, swap } from './swap.js';
-import { resetDom } from './test-utils.js';
+import { resetDom } from './test/index.js';
 
 let counter = 0;
 
diff --git a/packages/v4/src/test-utils.ts b/packages/v4/src/test-utils.ts
index 1cc16930..412022e5 100644
--- a/packages/v4/src/test-utils.ts
+++ b/packages/v4/src/test-utils.ts
@@ -1,22 +1,19 @@
-import { Base } from './Base.js';
-import { createContext, signal, type Signal } from './context.js';
-import { INSTANCES } from './protocol-symbols.js';
-import { registerComponent } from './registry.js';
-import { nextFrame, defaultScheduler } from './scheduler.js';
-import type { DelegatedEvent } from './Base.js';
+/**
+ * The two helpers a spec needs that `@studiometa/js-toolkit-v4/test` does not
+ * ship, because neither belongs in a consumer's hands.
+ *
+ * `getInstance()` reads the raw instances map with no `$isMounted` filter,
+ * which is what lets a spec inspect an instance before it mounts or after it
+ * unmounts — precisely the window the public `getInstances()` hides.
+ * `countRequestedFrames()` replaces a global.
+ *
+ * Everything else moved: `settle`, `frames`, `mount`, `waitFor`, `resetDom`
+ * and the rest are in `src/test/index.ts`, and the todo component tree is in
+ * `src/todo.fixtures.ts`.
+ */
 
-export async function settle(): Promise<void> {
-  for (let i = 0; i < 5; i += 1) {
-    await new Promise((resolve) => setTimeout(resolve, 10));
-    await defaultScheduler.whenIdle();
-  }
-}
-
-export async function frames(count = 3): Promise<void> {
-  for (let i = 0; i < count; i += 1) {
-    await nextFrame();
-  }
-}
+import { INSTANCES } from './protocol-symbols.js';
+import type { Base } from './Base.js';
 
 /** Count requested frames and always restore `requestAnimationFrame`. */
 export async function countRequestedFrames(during: () => Promise<void> | void): Promise<number> {
@@ -37,85 +34,3 @@ export async function countRequestedFrames(during: () => Promise<void> | void):
 export function getInstance<T extends Base = Base>(el: Element | null, name: string): T {
   return el?.[INSTANCES]?.get(name) as T;
 }
-
-export const CountContext = createContext<Signal<number>>('todo-count');
-
-export class TodoItem extends Base {
-  static config = { name: 'TodoItem', refs: ['remove'] };
-
-  onClick(event: Event): void {
-    if (event.target === this.$refs.remove) {
-      this.$emit('remove');
-    }
-  }
-}
-
-export class TodoCount extends Base {
-  static config = { name: 'TodoCount' };
-
-  cleanupCalls = 0;
-
-  async mounted() {
-    const count = await this.$inject(CountContext);
-    const unsubscribe = count.subscribe(
-      (value) => {
-        this.$el.textContent = String(value);
-      },
-      { immediate: true },
-    );
-    return () => {
-      unsubscribe();
-      this.cleanupCalls += 1;
-    };
-  }
-}
-
-export class TodoList extends Base {
-  static config = {
-    name: 'TodoList',
-    refs: ['list'],
-    components: { TodoItem, TodoCount },
-  };
-
-  count = this.$provide(CountContext, signal(0));
-
-  items = this.$watchChildren<TodoItem>('TodoItem', {
-    added: () => this.sync(),
-    removed: () => this.sync(),
-  });
-
-  removedEvents: Array<DelegatedEvent<TodoItem>> = [];
-
-  sync(): void {
-    this.count.value = this.items?.size ?? 0;
-  }
-
-  mounted(): void {
-    this.sync();
-  }
-
-  onTodoItemRemove(payload: DelegatedEvent<TodoItem>): void {
-    this.removedEvents.push(payload);
-    payload.target.$el.remove();
-  }
-}
-
-registerComponent(TodoList);
-
-export function renderTodoList({ items = ['one', 'two'] }: { items?: string[] } = {}): HTMLElement {
-  const root = document.createElement('div');
-  root.setAttribute('data-component', 'TodoList');
-  root.innerHTML = `
-    <ul data-ref="list">
-      ${items.map((item) => `<li data-component="TodoItem">${item} <button data-ref="remove">×</button></li>`).join('')}
-    </ul>
-    <span data-component="TodoCount"></span>
-  `;
-  document.body.append(root);
-  return root;
-}
-
-export async function resetDom(): Promise<void> {
-  document.body.innerHTML = '';
-  await settle();
-}
diff --git a/packages/v4/src/todo.fixtures.ts b/packages/v4/src/todo.fixtures.ts
new file mode 100644
index 00000000..d738d077
--- /dev/null
+++ b/packages/v4/src/todo.fixtures.ts
@@ -0,0 +1,95 @@
+/**
+ * The todo list the core specs are written against.
+ *
+ * One fixture exercises the four things a component has to get right together
+ * — refs, a provided context, `$watchChildren` and a delegated child event —
+ * so a spec about any one of them can be written against a shape that is
+ * already familiar rather than against a new one per file.
+ *
+ * It lives outside `test-utils.ts` because the two are different kinds of
+ * thing: `test-utils.ts` holds helpers that read the framework, while this
+ * module *is* a component tree, registered on import. Both are excluded from
+ * the build — see `scripts/build.js` and `scripts/check-package.js`.
+ */
+
+import { Base } from './Base.js';
+import { createContext, signal, type Signal } from './context.js';
+import { registerComponent } from './registry.js';
+import type { DelegatedEvent } from './Base.js';
+
+export const CountContext = createContext<Signal<number>>('todo-count');
+
+export class TodoItem extends Base {
+  static config = { name: 'TodoItem', refs: ['remove'] };
+
+  onClick(event: Event): void {
+    if (event.target === this.$refs.remove) {
+      this.$emit('remove');
+    }
+  }
+}
+
+export class TodoCount extends Base {
+  static config = { name: 'TodoCount' };
+
+  cleanupCalls = 0;
+
+  async mounted() {
+    const count = await this.$inject(CountContext);
+    const unsubscribe = count.subscribe(
+      (value) => {
+        this.$el.textContent = String(value);
+      },
+      { immediate: true },
+    );
+    return () => {
+      unsubscribe();
+      this.cleanupCalls += 1;
+    };
+  }
+}
+
+export class TodoList extends Base {
+  static config = {
+    name: 'TodoList',
+    refs: ['list'],
+    components: { TodoItem, TodoCount },
+  };
+
+  count = this.$provide(CountContext, signal(0));
+
+  items = this.$watchChildren<TodoItem>('TodoItem', {
+    added: () => this.sync(),
+    removed: () => this.sync(),
+  });
+
+  removedEvents: Array<DelegatedEvent<TodoItem>> = [];
+
+  sync(): void {
+    this.count.value = this.items?.size ?? 0;
+  }
+
+  mounted(): void {
+    this.sync();
+  }
+
+  onTodoItemRemove(payload: DelegatedEvent<TodoItem>): void {
+    this.removedEvents.push(payload);
+    payload.target.$el.remove();
+  }
+}
+
+registerComponent(TodoList);
+
+export function renderTodoList({ items = ['one', 'two'] }: { items?: string[] } = {}): HTMLElement {
+  const root = document.createElement('div');
+  root.setAttribute('data-component', 'TodoList');
+  root.innerHTML = `
+    <ul data-ref="list">
+      ${items.map((item) => `<li data-component="TodoItem">${item} <button data-ref="remove">×</button></li>`).join('')}
+    </ul>
+    <span data-component="TodoCount"></span>
+  `;
+  document.body.append(root);
+  return root;
+}
diff --git a/packages/v4/src/utils/smoothTo.spec.ts b/packages/v4/src/utils/smoothTo.spec.ts
index a833ae8b..9bedc1b1 100644
--- a/packages/v4/src/utils/smoothTo.spec.ts
+++ b/packages/v4/src/utils/smoothTo.spec.ts
@@ -1,6 +1,7 @@
 import { describe, expect, expectTypeOf, it, vi } from 'vitest';
 import { smoothTo, type SmoothTo } from './smoothTo.js';
-import { countRequestedFrames, frames } from '../test-utils.js';
+import { countRequestedFrames } from '../test-utils.js';
+import { frames, waitFor } from '../test/index.js';
 
 describe('smoothTo', () => {
   it('starts at its start value and does not move on its own', async () => {
@@ -191,13 +192,6 @@ describe('smoothTo', () => {
   });
 });
 
-/** Wait for every channel to arrive, bounded so a stuck value fails the test. */
-async function settled(motion: { readonly isMoving: boolean }, max = 300): Promise<void> {
-  for (let index = 0; index < max && motion.isMoving; index += 1) {
-    await frames(1);
-  }
-}
-
 describe('smoothTo — a record of named channels', () => {
   it('narrows to a number or to a record from what it was started with', () => {
     const scalar = smoothTo(0);
@@ -226,7 +220,7 @@ describe('smoothTo — a record of named channels', () => {
     expect(seen[0].y).toBeGreaterThan(0);
     expect(seen[0].scale).toBeGreaterThan(1);
 
-    await settled(motion);
+    await waitFor(() => !motion.isMoving, { timeout: 5000 });
     expect(motion()).toEqual({ x: 100, y: 50, scale: 2 });
     expect(motion.isMoving).toBe(false);
     motion.destroy();
@@ -245,7 +239,7 @@ describe('smoothTo — a record of named channels', () => {
     await frames(1);
     expect(motion().y).toBeGreaterThan(travellingY);
 
-    await settled(motion);
+    await waitFor(() => !motion.isMoving, { timeout: 5000 });
     expect(motion()).toEqual({ x: 0, y: 100 });
     motion.destroy();
   });
@@ -277,7 +271,7 @@ describe('smoothTo — a record of named channels', () => {
     expect(motion().lazy).toBeLessThan(10);
     expect(motion.isMoving).toBe(true);
 
-    await settled(motion);
+    await waitFor(() => !motion.isMoving, { timeout: 5000 });
     expect(motion()).toEqual({ quick: 10, lazy: 10 });
     expect(motion.isMoving).toBe(false);
     motion.destroy();
@@ -338,7 +332,7 @@ describe('smoothTo — a record of named channels', () => {
     expect(motion().x).toBe(0);
     expect(motion.isMoving).toBe(true);
 
-    await settled(motion);
+    await waitFor(() => !motion.isMoving, { timeout: 5000 });
     expect(motion()).toEqual({ x: 0, y: 100 });
     motion.destroy();
   });
diff --git a/packages/v4/src/utils/transition.spec.ts b/packages/v4/src/utils/transition.spec.ts
index 7d17776a..7b32c972 100644
--- a/packages/v4/src/utils/transition.spec.ts
+++ b/packages/v4/src/utils/transition.spec.ts
@@ -1,5 +1,5 @@
 import { afterEach, describe, expect, it } from 'vitest';
-import { frames } from '../test-utils.js';
+import { frames } from '../test/index.js';
 import {
   enterTransition,
   leaveTransition,
diff --git a/packages/v4/src/viewTransition.spec.ts b/packages/v4/src/viewTransition.spec.ts
index 841765cd..491db1eb 100644
--- a/packages/v4/src/viewTransition.spec.ts
+++ b/packages/v4/src/viewTransition.spec.ts
@@ -1,6 +1,6 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { defaultScheduler, nextFrame } from './scheduler.js';
-import { resetDom } from './test-utils.js';
+import { resetDom } from './test/index.js';
 import { viewTransition, type ViewTransitionUpdate } from './viewTransition.js';
 
 let restoreStartViewTransition = () => {};