@weasel-js/labkit 1.7.1 → 1.7.2

package/src/lab/LabHeader.test.tsx

@@ -1,4 +1,5 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import { renderSettled } from '@weasel-js/react/testing/renderSettled';
 import { describe, expect, it } from 'vitest';
 import type { Instrument } from '../instrument/types';
 import { Lab } from './Lab';
@@ -12,13 +13,13 @@ const Stub: Instrument = {
 const Other: Instrument = { ...Stub, name: 'Other' };
 
 describe('<LabHeader>', () => {
-  it('offers an add-trial button when the lab has one instrument', () => {
-    render(<Lab instruments={[Stub]} defaultInstrument="Stub" />);
+  it('offers an add-trial button when the lab has one instrument', async () => {
+    await renderSettled(<Lab instruments={[Stub]} defaultInstrument="Stub" />);
     expect(screen.getByRole('button', { name: /add trial/i })).toBeInTheDocument();
   });
 
-  it('offers a menu instead when the lab has several', () => {
-    render(<Lab instruments={[Stub, Other]} defaultInstrument="Stub" />);
+  it('offers a menu instead when the lab has several', async () => {
+    await renderSettled(<Lab instruments={[Stub, Other]} defaultInstrument="Stub" />);
     // Which instrument to add is now a choice, so the button opens a list.
     expect(screen.getByRole('button', { name: 'Add trial' })).toHaveAttribute('aria-haspopup');
   });
@@ -26,7 +27,7 @@ describe('<LabHeader>', () => {
   it('adds a trial of the instrument chosen from the menu', async () => {
     const { default: userEvent } = await import('@testing-library/user-event');
     const user = userEvent.setup();
-    render(<Lab instruments={[Stub, Other]} defaultInstrument="Stub" />);
+    await renderSettled(<Lab instruments={[Stub, Other]} defaultInstrument="Stub" />);
     expect(screen.queryAllByLabelText(/^Trial Other$/)).toHaveLength(0);
     await user.click(screen.getByRole('button', { name: 'Add trial' }));
     await user.click(screen.getByRole('menuitem', { name: 'Other' }));
@@ -37,7 +38,7 @@ describe('<LabHeader>', () => {
     const { default: userEvent } = await import('@testing-library/user-event');
     const user = userEvent.setup();
     const titled: Instrument = { ...Other, title: 'Other / Titled' };
-    render(<Lab instruments={[Stub, titled]} defaultInstrument="Stub" />);
+    await renderSettled(<Lab instruments={[Stub, titled]} defaultInstrument="Stub" />);
     await user.click(screen.getByRole('button', { name: 'Add trial' }));
     expect(screen.getByRole('menuitem', { name: 'Stub' })).toBeInTheDocument();
     await user.click(screen.getByRole('menuitem', { name: 'Other / Titled' }));
@@ -47,27 +48,27 @@ describe('<LabHeader>', () => {
   it('adds a trial when the button is used', async () => {
     const { default: userEvent } = await import('@testing-library/user-event');
     const user = userEvent.setup();
-    render(<Lab instruments={[Stub]} defaultInstrument="Stub" />);
+    await renderSettled(<Lab instruments={[Stub]} defaultInstrument="Stub" />);
     expect(screen.getAllByLabelText(/^Trial Stub$/)).toHaveLength(1);
     await user.click(screen.getByRole('button', { name: /add trial/i }));
     expect(screen.getAllByLabelText(/^Trial Stub$/)).toHaveLength(2);
   });
 
-  it('leaves the add-trial control out when the lab says so', () => {
-    const { unmount } = render(
+  it('leaves the add-trial control out when the lab says so', async () => {
+    const { unmount } = await renderSettled(
       <Lab instruments={[Stub, Other]} defaultInstrument="Stub" addTrial={false} />,
     );
     expect(screen.queryByRole('button', { name: /add trial/i })).toBeNull();
     expect(screen.getByRole('button', { name: /^Theme: Auto/ })).toBeInTheDocument();
     unmount();
-    render(<Lab instruments={[Stub]} defaultInstrument="Stub" addTrial={false} />);
+    await renderSettled(<Lab instruments={[Stub]} defaultInstrument="Stub" addTrial={false} />);
     expect(screen.queryByRole('button', { name: /add trial/i })).toBeNull();
   });
 
   it('rotates the color mode from one button', async () => {
     const { default: userEvent } = await import('@testing-library/user-event');
     const user = userEvent.setup();
-    render(<Lab instruments={[Stub]} defaultInstrument="Stub" />);
+    await renderSettled(<Lab instruments={[Stub]} defaultInstrument="Stub" />);
     expect(screen.queryByRole('radiogroup')).toBeNull();
     for (const [now, next] of [
       ['Auto', 'Light'],
@@ -82,8 +83,8 @@ describe('<LabHeader>', () => {
     expect(screen.getByRole('button', { name: /^Theme: Auto/ })).toBeInTheDocument();
   });
 
-  it('puts the theme switch after the header content a consumer passes', () => {
-    render(
+  it('puts the theme switch after the header content a consumer passes', async () => {
+    await renderSettled(
       <Lab instruments={[Stub]} defaultInstrument="Stub">
         <button type="button">Consumer</button>
       </Lab>,

package/src/lab/LabPalette.test.tsx

@@ -1,4 +1,5 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, screen } from '@testing-library/react';
+import { renderSettled } from '@weasel-js/react/testing/renderSettled';
 import { describe, expect, it } from 'vitest';
 import type { Instrument } from '../instrument/types';
 import { Lab } from './Lab';
@@ -16,19 +17,23 @@ const tools = [
 ];
 
 describe('the lab palette', () => {
-  it('does not render when the lab declares no tools', () => {
-    render(<Lab title="T" instruments={[bare]} defaultInstrument="Bare" />);
+  it('does not render when the lab declares no tools', async () => {
+    await renderSettled(<Lab title="T" instruments={[bare]} defaultInstrument="Bare" />);
     expect(screen.queryByRole('toolbar', { name: 'Tools' })).toBeNull();
   });
 
-  it('renders one button per declared tool', () => {
-    render(<Lab title="T" instruments={[bare]} defaultInstrument="Bare" tools={tools} />);
+  it('renders one button per declared tool', async () => {
+    await renderSettled(
+      <Lab title="T" instruments={[bare]} defaultInstrument="Bare" tools={tools} />,
+    );
     expect(screen.getByRole('button', { name: 'Pick' })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Pan' })).toBeInTheDocument();
   });
 
-  it('marks the chosen tool current after a click', () => {
-    render(<Lab title="T" instruments={[bare]} defaultInstrument="Bare" tools={tools} />);
+  it('marks the chosen tool current after a click', async () => {
+    await renderSettled(
+      <Lab title="T" instruments={[bare]} defaultInstrument="Bare" tools={tools} />,
+    );
     fireEvent.click(screen.getByRole('button', { name: 'Pan' }));
     expect(screen.getByRole('button', { name: 'Pan' })).toHaveAttribute('aria-current', 'true');
   });

package/src/lab/LabShell.less

@@ -162,6 +162,5 @@
   display: inline-block;
   min-width: 5ch;
   text-align: center;
-  font-variant-numeric: tabular-nums;
-  font-family: var(--wzl-font-numeric);
+  .numeric();
 }

package/src/lab/LabZoom.test.tsx

@@ -1,4 +1,4 @@
-import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import { act, fireEvent, screen, within } from '@testing-library/react';
 import {
   ActionsProvider,
   type ActionsRegistry,
@@ -8,6 +8,7 @@ import {
   useActionsRegistry,
   useGestureDispatcher,
 } from '@weasel-js/core';
+import { renderSettled } from '@weasel-js/react/testing/renderSettled';
 import { type ReactNode, useEffect } from 'react';
 import { beforeAll, describe, expect, it, vi } from 'vitest';
 import { defineInstrument } from '../instrument/defineInstrument';
@@ -54,16 +55,16 @@ function Capture({ children }: { children?: ReactNode }) {
 const zoomBar = () => within(screen.getByRole('toolbar', { name: 'Zoom' }));
 const readout = () => zoomBar().getByRole('button', { name: /^Zoom \d+%|^Zoom unavailable/ });
 const press = (name: string) =>
-  act(() => {
+  act(async () => {
     fireEvent.click(zoomBar().getByRole('button', { name }));
   });
 
 const MOD = /mac/i.test(navigator.platform || navigator.userAgent)
   ? { metaKey: true }
   : { ctrlKey: true };
-function key(k: string): boolean {
+async function key(k: string): Promise<boolean> {
   let prevented = false;
-  act(() => {
+  await act(async () => {
     prevented = !fireEvent.keyDown(window, { key: k, ...MOD });
   });
   return prevented;
@@ -111,113 +112,123 @@ function stageZoom(container: HTMLElement, index = 0): number {
 }
 
 describe("the lab header's zoom controls", () => {
-  it('step the focused trial through its camera and read its zoom back', () => {
-    const { container } = render(<Lab instruments={[staged]} defaultInstrument="Staged" />);
+  it('step the focused trial through its camera and read its zoom back', async () => {
+    const { container } = await renderSettled(
+      <Lab instruments={[staged]} defaultInstrument="Staged" />,
+    );
     expect(readout()).toHaveTextContent('100%');
-    press('Zoom in');
+    await press('Zoom in');
     expect(stageZoom(container)).toBeCloseTo(1.25);
     expect(readout()).toHaveTextContent('125%');
-    press('Zoom out');
+    await press('Zoom out');
     expect(stageZoom(container)).toBeCloseTo(1);
-    press('Zoom out');
+    await press('Zoom out');
     expect(readout()).toHaveTextContent('80%');
   });
 
-  it('reset to actual size from the readout', () => {
-    const { container } = render(<Lab instruments={[staged]} defaultInstrument="Staged" />);
-    press('Zoom out');
-    press('Zoom out');
-    act(() => {
+  it('reset to actual size from the readout', async () => {
+    const { container } = await renderSettled(
+      <Lab instruments={[staged]} defaultInstrument="Staged" />,
+    );
+    await press('Zoom out');
+    await press('Zoom out');
+    await act(async () => {
       fireEvent.click(readout());
     });
     expect(stageZoom(container)).toBe(1);
     expect(readout()).toHaveTextContent('100%');
   });
 
-  it("stop at the camera's own limit, and say so", () => {
-    const { container } = render(<Lab instruments={[staged]} defaultInstrument="Staged" />);
-    press('Zoom in');
-    press('Zoom in');
+  it("stop at the camera's own limit, and say so", async () => {
+    const { container } = await renderSettled(
+      <Lab instruments={[staged]} defaultInstrument="Staged" />,
+    );
+    await press('Zoom in');
+    await press('Zoom in');
     expect(stageZoom(container)).toBe(1.5);
     expect(zoomBar().getByRole('button', { name: 'Zoom in' })).toBeDisabled();
     expect(zoomBar().getByRole('button', { name: 'Zoom out' })).toBeEnabled();
   });
 
-  it('answer Mod+=, Mod+- and Mod+0, claiming the key from the browser', () => {
-    const { container } = render(<Lab instruments={[staged]} defaultInstrument="Staged" />);
-    expect(key('=')).toBe(true);
+  it('answer Mod+=, Mod+- and Mod+0, claiming the key from the browser', async () => {
+    const { container } = await renderSettled(
+      <Lab instruments={[staged]} defaultInstrument="Staged" />,
+    );
+    expect(await key('=')).toBe(true);
     expect(stageZoom(container)).toBeCloseTo(1.25);
-    key('-');
-    key('-');
+    await key('-');
+    await key('-');
     expect(stageZoom(container)).toBeCloseTo(0.8);
-    key('0');
+    await key('0');
     expect(stageZoom(container)).toBe(1);
   });
 
-  it('go inert over a trial with no camera, and leave its keys to the browser', () => {
-    render(<Lab instruments={[plain]} defaultInstrument="Plain" />);
+  it('go inert over a trial with no camera, and leave its keys to the browser', async () => {
+    await renderSettled(<Lab instruments={[plain]} defaultInstrument="Plain" />);
     for (const name of ['Zoom out', 'Zoom in']) {
       expect(zoomBar().getByRole('button', { name })).toBeDisabled();
     }
     expect(readout()).toBeDisabled();
     expect(readout()).toHaveTextContent('–');
-    expect(key('=')).toBe(false);
+    expect(await key('=')).toBe(false);
   });
 
-  it("take the key ahead of a story's own binding in a trial with a camera", () => {
+  it("take the key ahead of a story's own binding in a trial with a camera", async () => {
     const story = vi.fn();
     const zooming = defineInstrument<Record<string, never>, Record<string, never>>({
       ...staged,
       name: 'Zooming',
       render: () => <StoryZoomKey run={story} />,
     });
-    const { container } = render(<Lab instruments={[zooming]} defaultInstrument="Zooming" />);
-    key('=');
+    const { container } = await renderSettled(
+      <Lab instruments={[zooming]} defaultInstrument="Zooming" />,
+    );
+    await key('=');
     expect(stageZoom(container)).toBeCloseTo(1.25);
     expect(story).not.toHaveBeenCalled();
   });
 
-  it("leave the key to a story's own binding in a trial with no camera", () => {
+  it("leave the key to a story's own binding in a trial with no camera", async () => {
     const story = vi.fn();
     const zooming = defineInstrument<Record<string, never>, Record<string, never>>({
       ...plain,
       name: 'ZoomingPlain',
       render: () => <StoryZoomKey run={story} />,
     });
-    render(<Lab instruments={[zooming]} defaultInstrument="ZoomingPlain" />);
-    key('=');
+    await renderSettled(<Lab instruments={[zooming]} defaultInstrument="ZoomingPlain" />);
+    await key('=');
     expect(story).toHaveBeenCalledTimes(1);
   });
 
-  it('follow the focus from trial to trial', () => {
-    const { container } = render(
+  it('follow the focus from trial to trial', async () => {
+    const { container } = await renderSettled(
       <Lab instruments={[staged, plain]} defaultInstrument="Staged">
         <Capture />
       </Lab>,
     );
-    act(() => lab?.addTrial('Staged'));
-    act(() => lab?.addTrial('Plain'));
+    await act(async () => lab?.addTrial('Staged'));
+    await act(async () => lab?.addTrial('Plain'));
     const [first, second, third] = lab?.trials.map((t) => t.id) ?? [];
     expect(zoomBar().getByRole('button', { name: 'Zoom in' })).toBeDisabled();
 
-    act(() => lab?.focusTrial(second ?? ''));
-    press('Zoom out');
+    await act(async () => lab?.focusTrial(second ?? ''));
+    await press('Zoom out');
     expect(stageZoom(container, 1)).toBeCloseTo(0.8);
     expect(stageZoom(container, 0)).toBe(1);
     expect(readout()).toHaveTextContent('80%');
 
-    act(() => lab?.focusTrial(first ?? ''));
+    await act(async () => lab?.focusTrial(first ?? ''));
     expect(readout()).toHaveTextContent('100%');
-    key('=');
+    await key('=');
     expect(stageZoom(container, 0)).toBeCloseTo(1.25);
     expect(stageZoom(container, 1)).toBeCloseTo(0.8);
 
-    act(() => lab?.focusTrial(third ?? ''));
+    await act(async () => lab?.focusTrial(third ?? ''));
     expect(readout()).toBeDisabled();
   });
 
-  it('are left out when the lab says so', () => {
-    render(<Lab instruments={[staged]} defaultInstrument="Staged" zoom={false} />);
+  it('are left out when the lab says so', async () => {
+    await renderSettled(<Lab instruments={[staged]} defaultInstrument="Staged" zoom={false} />);
     expect(screen.queryByRole('toolbar', { name: 'Zoom' })).toBeNull();
   });
 });

package/src/lab/Workspace.surface.test.tsx

@@ -1,4 +1,5 @@
-import { render } from '@testing-library/react';
+import { act } from '@testing-library/react';
+import { renderSettled } from '@weasel-js/react/testing/renderSettled';
 import { describe, expect, it, vi } from 'vitest';
 import { SurfaceContext } from '../surface/SurfaceContext';
 import type { SurfaceHandle } from '../surface/useTiledSurface';
@@ -18,9 +19,9 @@ function fakeHandle(): SurfaceHandle {
 }
 
 describe('Workspace with a surface above it', () => {
-  it('invalidates rects when the tile set changes, because a re-tile moves tiles', () => {
+  it('invalidates rects when the tile set changes, because a re-tile moves tiles', async () => {
     const handle = fakeHandle();
-    const { rerender } = render(
+    const { rerender } = await renderSettled(
       <SurfaceContext.Provider value={handle}>
         <Workspace ids={['a']} viewport={{ w: 800, h: 600 }}>
           <div>a</div>
@@ -29,20 +30,22 @@ describe('Workspace with a surface above it', () => {
     );
     (handle.invalidateRects as ReturnType<typeof vi.fn>).mockClear();
 
-    rerender(
-      <SurfaceContext.Provider value={handle}>
-        <Workspace ids={['a', 'b']} viewport={{ w: 800, h: 600 }}>
-          <div>a</div>
-          <div>b</div>
-        </Workspace>
-      </SurfaceContext.Provider>,
-    );
+    await act(async () => {
+      rerender(
+        <SurfaceContext.Provider value={handle}>
+          <Workspace ids={['a', 'b']} viewport={{ w: 800, h: 600 }}>
+            <div>a</div>
+            <div>b</div>
+          </Workspace>
+        </SurfaceContext.Provider>,
+      );
+    });
 
     expect(handle.invalidateRects).toHaveBeenCalled();
   });
 
-  it('renders unchanged with no surface above it', () => {
-    const { getByText } = render(
+  it('renders unchanged with no surface above it', async () => {
+    const { getByText } = await renderSettled(
       <Workspace ids={['a']} viewport={{ w: 800, h: 600 }}>
         <div>a</div>
       </Workspace>,

package/src/lab/Workspace.test.tsx

@@ -1,4 +1,5 @@
-import { render, screen } from '@testing-library/react';
+import { act, screen } from '@testing-library/react';
+import { renderSettled } from '@weasel-js/react/testing/renderSettled';
 import { describe, expect, test, vi } from 'vitest';
 import { useTrialDrag } from '../trial/TrialDragContext';
 import { Workspace } from './Workspace';
@@ -13,8 +14,8 @@ function DragProbe({ label }: { label: string }) {
 const VIEWPORT = { w: 800, h: 600 };
 
 describe('Workspace', () => {
-  test('renders all children', () => {
-    render(
+  test('renders all children', async () => {
+    await renderSettled(
       <Workspace viewport={VIEWPORT}>
         <div>one</div>
         <div>two</div>
@@ -26,9 +27,9 @@ describe('Workspace', () => {
     expect(screen.getByText('three')).toBeInTheDocument();
   });
 
-  test('keeps a child with the tile its id names when an earlier one closes', () => {
+  test('keeps a child with the tile its id names when an earlier one closes', async () => {
     const ids = ['a', 'b', 'c'];
-    const { rerender, container } = render(
+    const { rerender, container } = await renderSettled(
       <Workspace ids={ids} viewport={VIEWPORT}>
         <div>a</div>
         <div>b</div>
@@ -37,18 +38,20 @@ describe('Workspace', () => {
     );
     expect(container.querySelector('[data-node="c"]')).toHaveTextContent('c');
 
-    rerender(
-      <Workspace ids={['b', 'c']} viewport={VIEWPORT}>
-        <div>b</div>
-        <div>c</div>
-      </Workspace>,
-    );
+    await act(async () => {
+      rerender(
+        <Workspace ids={['b', 'c']} viewport={VIEWPORT}>
+          <div>b</div>
+          <div>c</div>
+        </Workspace>,
+      );
+    });
     expect(container.querySelector('[data-node="c"]')).toHaveTextContent('c');
     expect(container.querySelector('[data-node="a"]')).toBeNull();
   });
 
-  test('uses lk-workspace class', () => {
-    const { container } = render(
+  test('uses lk-workspace class', async () => {
+    const { container } = await renderSettled(
       <Workspace viewport={VIEWPORT}>
         <div />
       </Workspace>,
@@ -56,8 +59,8 @@ describe('Workspace', () => {
     expect((container.firstChild as HTMLElement).className).toContain('lk-workspace');
   });
 
-  test('renders resize affordances only when resizable', () => {
-    const { container, rerender } = render(
+  test('renders resize affordances only when resizable', async () => {
+    const { container, rerender } = await renderSettled(
       <Workspace ids={['a', 'b']} viewport={VIEWPORT}>
         <div>a</div>
         <div>b</div>
@@ -65,17 +68,19 @@ describe('Workspace', () => {
     );
     expect(container.querySelectorAll('[role="separator"]')).toHaveLength(0);
 
-    rerender(
-      <Workspace ids={['a', 'b']} resizable viewport={VIEWPORT}>
-        <div>a</div>
-        <div>b</div>
-      </Workspace>,
-    );
+    await act(async () => {
+      rerender(
+        <Workspace ids={['a', 'b']} resizable viewport={VIEWPORT}>
+          <div>a</div>
+          <div>b</div>
+        </Workspace>,
+      );
+    });
     expect(container.querySelectorAll('[role="separator"]').length).toBeGreaterThan(0);
   });
 
-  test('applies a saved extent to a tile as it registers', () => {
-    const { container } = render(
+  test('applies a saved extent to a tile as it registers', async () => {
+    const { container } = await renderSettled(
       <Workspace
         ids={['a', 'b']}
         resizable
@@ -92,9 +97,9 @@ describe('Workspace', () => {
     expect(Number.parseFloat(a.style.width)).toBeGreaterThan(Number.parseFloat(b.style.width));
   });
 
-  test('reports the order a drop would produce instead of applying it', () => {
+  test('reports the order a drop would produce instead of applying it', async () => {
     const onReorder = vi.fn();
-    const { container } = render(
+    const { container } = await renderSettled(
       <Workspace ids={['a', 'b']} reorderable onReorder={onReorder} viewport={VIEWPORT}>
         <DragProbe label="a" />
         <DragProbe label="b" />
@@ -111,8 +116,8 @@ describe('Workspace', () => {
     expect(nodes).toEqual(['a', 'b']);
   });
 
-  test('offers no drag source unless reorderable', () => {
-    render(
+  test('offers no drag source unless reorderable', async () => {
+    await renderSettled(
       <Workspace ids={['a', 'b']} viewport={VIEWPORT}>
         <DragProbe label="a" />
         <DragProbe label="b" />

package/src/overview/OverviewMarks.test.tsx

@@ -3,7 +3,8 @@
  * and redraws when one is added. jsdom lays nothing out, so the target's rect
  * and the stage's are mocked; the stage's camera is the identity there.
  */
-import { act, render } from '@testing-library/react';
+import { act } from '@testing-library/react';
+import { renderSettled } from '@weasel-js/react/testing/renderSettled';
 import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
 import { useAnnotations } from '../annotations/AnnotationsContext';
 import type { AnnotationsApi } from '../annotations/types';
@@ -33,7 +34,7 @@ let restore: (() => void) | null = null;
 afterEach(() => restore?.());
 
 /** Stage 400×300, the pane at stage (50, 20) and 200×100. */
-function mount() {
+async function mount() {
   const pane = { current: null as HTMLDivElement | null };
   let api: AnnotationsApi | null = null;
   function Body() {
@@ -68,21 +69,21 @@ function mount() {
   restore = () => {
     HTMLElement.prototype.getBoundingClientRect = original;
   };
-  const r = render(<Lab instruments={[marked]} defaultInstrument="Marked" />);
+  const r = await renderSettled(<Lab instruments={[marked]} defaultInstrument="Marked" />);
   return { ...r, api: () => api as AnnotationsApi };
 }
 
 const px = (el: HTMLElement, name: string) => Number.parseFloat(el.style.getPropertyValue(name));
 
 describe('marks on the overview', () => {
-  it('draws nothing for a target with no marks', () => {
-    const h = mount();
+  it('draws nothing for a target with no marks', async () => {
+    const h = await mount();
     expect(h.container.querySelector('.lk-overview__marks')).toBeNull();
   });
 
-  it("places a target's marks at the target's rect, through the fit", () => {
-    const h = mount();
-    act(() => {
+  it("places a target's marks at the target's rect, through the fit", async () => {
+    const h = await mount();
+    await act(async () => {
       h.api().add({ target: 'pane', kind: 'rect', frac: { x: 0.1, y: 0.1, w: 0.2, h: 0.2 } });
     });
     const marks = h.container.querySelector<HTMLElement>('.lk-overview__marks[data-target="pane"]');

package/src/overview/TrialOverview.test.tsx

@@ -7,8 +7,9 @@
  * centering puts the pressed world point at the stage's origin instead.
  */
 
-import { act, render } from '@testing-library/react';
+import { act } from '@testing-library/react';
 import type { PointerContextValue } from '@weasel-js/core';
+import { renderSettled } from '@weasel-js/react/testing/renderSettled';
 import { beforeAll, describe, expect, it, vi } from 'vitest';
 import { defineInstrument } from '../instrument/defineInstrument';
 import { Lab } from '../lab/Lab';
@@ -40,7 +41,7 @@ function pointer(el: Element, type: string, x: number, y: number, buttons = 1) {
 
 /** Content 400×300 in a 200×150 box, 6px in: scale 0.46, so box (100, 75)
  *  is content (200, 150). */
-function mount() {
+async function mount() {
   let store: PointerContextValue | null = null;
   const pictured = defineInstrument<Record<string, never>, Record<string, never>>({
     name: 'Pictured',
@@ -57,7 +58,7 @@ function mount() {
       ),
     },
   });
-  const r = render(<Lab instruments={[pictured]} defaultInstrument="Pictured" />);
+  const r = await renderSettled(<Lab instruments={[pictured]} defaultInstrument="Pictured" />);
   const box = r.container.querySelector('.lk-overview__box');
   const content = r.container.querySelector('.lk-stage__content') as HTMLElement | null;
   if (!box || !content) throw new Error('no overview or stage');
@@ -67,15 +68,15 @@ function mount() {
 const px = (el: HTMLElement, name: string) => Number.parseFloat(el.style.getPropertyValue(name));
 
 describe('<TrialOverview>', () => {
-  it('draws the instrument-supplied content, not the instrument itself', () => {
-    const h = mount();
+  it('draws the instrument-supplied content, not the instrument itself', async () => {
+    const h = await mount();
     expect(h.box.querySelector('[data-testid="thumb"]')).not.toBeNull();
     expect(h.box.querySelector('[data-testid="picture"]')).toBeNull();
   });
 
-  it('moves the stage camera to the pressed point', () => {
-    const h = mount();
-    act(() => {
+  it('moves the stage camera to the pressed point', async () => {
+    const h = await mount();
+    await act(async () => {
       pointer(h.box, 'pointerdown', 100, 75);
       pointer(h.box, 'pointerup', 100, 75, 0);
     });
@@ -83,9 +84,9 @@ describe('<TrialOverview>', () => {
     expect(px(h.content, '--lk-stage-y')).toBeCloseTo(-150);
   });
 
-  it('follows a drag with the camera, and never pans the stage by it', () => {
-    const h = mount();
-    act(() => {
+  it('follows a drag with the camera, and never pans the stage by it', async () => {
+    const h = await mount();
+    await act(async () => {
       pointer(h.box, 'pointerdown', 100, 75);
       pointer(h.box, 'pointermove', 110, 75);
       pointer(h.box, 'pointermove', 123, 75);
@@ -96,9 +97,9 @@ describe('<TrialOverview>', () => {
     expect(px(h.content, '--lk-stage-x')).toBeCloseTo(-250);
   });
 
-  it("publishes the pointer over it as the overview's, and the stage draws it", () => {
-    const h = mount();
-    act(() => pointer(h.box, 'pointermove', 100, 75, 0));
+  it("publishes the pointer over it as the overview's, and the stage draws it", async () => {
+    const h = await mount();
+    await act(async () => pointer(h.box, 'pointermove', 100, 75, 0));
     const p = h.store()?.get();
     expect(p?.viewId).toBe('overview');
     expect(p?.worldX).toBeCloseTo(200);
@@ -106,10 +107,10 @@ describe('<TrialOverview>', () => {
     expect(h.container.querySelector('.lk-stage .lk-linked-cursor')).not.toBeNull();
   });
 
-  it("publishes the stage's pointer as the stage's, so the stage draws none", () => {
-    const h = mount();
+  it("publishes the stage's pointer as the stage's, so the stage draws none", async () => {
+    const h = await mount();
     const host = h.container.querySelector('.lk-stage') as HTMLElement;
-    act(() => pointer(host, 'pointermove', 10, 10, 0));
+    await act(async () => pointer(host, 'pointermove', 10, 10, 0));
     expect(h.store()?.get()?.viewId).toBe('stage');
     expect(h.container.querySelector('.lk-stage .lk-linked-cursor')).toBeNull();
   });