@weasel-js/labkit 1.7.1 → 1.7.2

package/src/lab/Lab.chrome.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import { renderSettled } from '@weasel-js/react/testing/renderSettled';
 import { describe, expect, it, vi } from 'vitest';
 import type { TrialContribution } from '../chrome/types';
 import type { Instrument } from '../instrument/types';
@@ -19,23 +20,27 @@ function silenceRenderError(): void {
 }
 
 describe('<Lab> chrome', () => {
-  it('renders a consumer contribution', () => {
+  it('renders a consumer contribution', async () => {
     const extra: TrialContribution = {
       id: 'export',
       region: 'toolbar',
       item: { icon: Glyph, label: 'Export', onActivate: () => {} },
     };
-    render(<Lab title="T" instruments={[bare]} defaultInstrument="Bare" chrome={[extra]} />);
+    await renderSettled(
+      <Lab title="T" instruments={[bare]} defaultInstrument="Bare" chrome={[extra]} />,
+    );
     expect(screen.getByRole('button', { name: 'Export' })).toBeInTheDocument();
   });
 
-  it('suppresses a built-in by id', () => {
-    render(<Lab title="T" instruments={[bare]} defaultInstrument="Bare" suppress={['snapshot']} />);
+  it('suppresses a built-in by id', async () => {
+    await renderSettled(
+      <Lab title="T" instruments={[bare]} defaultInstrument="Bare" suppress={['snapshot']} />,
+    );
     expect(screen.queryByRole('button', { name: 'Save snapshot' })).toBeNull();
     expect(screen.getByRole('button', { name: 'Clone trial' })).toBeInTheDocument();
   });
 
-  it('throws when a consumer id collides with a built-in', () => {
+  it('throws when a consumer id collides with a built-in', async () => {
     silenceRenderError();
     const clash: TrialContribution = {
       id: 'clone',
@@ -47,24 +52,24 @@ describe('<Lab> chrome', () => {
     ).toThrow(/duplicate contribution id "clone"/);
   });
 
-  it('throws when suppressing an id that is not there', () => {
+  it('throws when suppressing an id that is not there', async () => {
     silenceRenderError();
     expect(() =>
       render(<Lab title="T" instruments={[bare]} defaultInstrument="Bare" suppress={['nope']} />),
     ).toThrow(/cannot suppress "nope"/);
   });
 
-  it('renders an instrument-declared contribution', () => {
+  it('renders an instrument-declared contribution', async () => {
     const withChrome: Instrument = {
       ...bare,
       chrome: [{ id: 'mine', region: 'status', item: { text: 'ready' } }],
     };
-    render(<Lab title="T" instruments={[withChrome]} defaultInstrument="Bare" />);
+    await renderSettled(<Lab title="T" instruments={[withChrome]} defaultInstrument="Bare" />);
     expect(screen.getByText('ready')).toBeInTheDocument();
   });
 
-  it('renders an aside contribution in its own pane, after the workspace', () => {
-    render(
+  it('renders an aside contribution in its own pane, after the workspace', async () => {
+    await renderSettled(
       <Lab
         title="T"
         instruments={[bare]}

package/src/lab/Lab.nebula.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { renderSettled } from '@weasel-js/react/testing/renderSettled';
 import { resolveTheme } from '@weasel-js/theme';
 import { describe, expect, it } from 'vitest';
 import type { Instrument } from '../instrument/types';
@@ -18,8 +18,8 @@ const backdrop = (container: HTMLElement) =>
     .find(Boolean) ?? '';
 
 describe('<Lab nebula>', () => {
-  it('draws one blob per literal color', () => {
-    const { container } = render(
+  it('draws one blob per literal color', async () => {
+    const { container } = await renderSettled(
       <Lab
         instruments={[bare]}
         defaultInstrument="Bare"
@@ -30,8 +30,8 @@ describe('<Lab nebula>', () => {
     expect(backdrop(container).match(/radial-gradient/g)).toHaveLength(3);
   });
 
-  it('resolves a theme ramp against the lab’s theme', () => {
-    const { container } = render(
+  it('resolves a theme ramp against the lab’s theme', async () => {
+    const { container } = await renderSettled(
       <Lab instruments={[bare]} defaultInstrument="Bare" mode="dark" nebula={{ ramp: 'swatch' }} />,
     );
     const sky = resolveTheme(interstellarTheme, { mode: 'dark' })['--wzl-swatch-sky'];

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

@@ -7,7 +7,8 @@
  * workspace: `.lk-lab__body > .lk-workspace { min-width: 0 }` is a direct-child
  * selector, so an extra element between them silently drops that rule.
  */
-import { act, render } from '@testing-library/react';
+import { act } from '@testing-library/react';
+import { renderSettled } from '@weasel-js/react/testing/renderSettled';
 import type { ReactNode } from 'react';
 import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 import { defineInstrument } from '../instrument/defineInstrument';
@@ -75,16 +76,18 @@ const probeInstrument = defineInstrument<Record<string, never>, Record<string, n
 });
 
 describe('<Lab> surface provider', () => {
-  it('puts a surface handle in reach of an instrument', () => {
+  it('puts a surface handle in reach of an instrument', async () => {
     seen = 'not-rendered';
-    render(<Lab instruments={[probeInstrument]} defaultInstrument="Probe" />);
+    await renderSettled(<Lab instruments={[probeInstrument]} defaultInstrument="Probe" />);
     expect(seen).not.toBe('not-rendered');
     expect(seen).not.toBeNull();
     expect(typeof (seen as unknown as SurfaceHandle).registerTile).toBe('function');
   });
 
-  it('stacks an under and an over buffer inside the lab body', () => {
-    const { container } = render(<Lab instruments={[probeInstrument]} defaultInstrument="Probe" />);
+  it('stacks an under and an over buffer inside the lab body', async () => {
+    const { container } = await renderSettled(
+      <Lab instruments={[probeInstrument]} defaultInstrument="Probe" />,
+    );
     const canvases = container.querySelectorAll('.lk-lab__body > canvas.lk-lab__surface');
     expect(canvases).toHaveLength(2);
     // Source order, because the z-index that separates them is in a stylesheet
@@ -96,24 +99,28 @@ describe('<Lab> surface provider', () => {
     ]);
   });
 
-  it('hands a tenant whichever of the two it asks for', () => {
-    const { container } = render(<Lab instruments={[probeInstrument]} defaultInstrument="Probe" />);
+  it('hands a tenant whichever of the two it asks for', async () => {
+    const { container } = await renderSettled(
+      <Lab instruments={[probeInstrument]} defaultInstrument="Probe" />,
+    );
     const [underEl, overEl] = [...container.querySelectorAll('canvas.lk-lab__surface')];
     expect(seenCanvases.over).toBe(overEl);
     expect(seenCanvases.under).toBe(underEl);
     expect(overEl).not.toBe(underEl);
   });
 
-  it('defaults a tenant to the buffer over the trials', () => {
+  it('defaults a tenant to the buffer over the trials', async () => {
     // Every tenant predating the split wants the over one: the surface was
     // built for marks that annotate an instrument.
-    const { container } = render(<Lab instruments={[probeInstrument]} defaultInstrument="Probe" />);
+    const { container } = await renderSettled(
+      <Lab instruments={[probeInstrument]} defaultInstrument="Probe" />,
+    );
     const [underEl, overEl] = [...container.querySelectorAll('canvas.lk-lab__surface')];
     expect(seenCanvases.byDefault).toBe(overEl);
     expect(seenCanvases.byDefault).not.toBe(underEl);
   });
 
-  it('mounts no buffer of its own when a host already owns the surface', () => {
+  it('mounts no buffer of its own when a host already owns the surface', async () => {
     function Host({ children }: { children: ReactNode }) {
       const surface = useTiledSurface({ onFrame: () => {} });
       return (
@@ -122,7 +129,7 @@ describe('<Lab> surface provider', () => {
         </SurfaceContext.Provider>
       );
     }
-    const { container } = render(
+    const { container } = await renderSettled(
       <Host>
         <Lab instruments={[probeInstrument]} defaultInstrument="Probe" />
       </Host>,
@@ -130,11 +137,13 @@ describe('<Lab> surface provider', () => {
     expect(container.querySelectorAll('canvas.lk-lab__surface')).toHaveLength(0);
   });
 
-  it('keeps the workspace a direct child of the lab body', () => {
+  it('keeps the workspace a direct child of the lab body', async () => {
     // The min-width:0 rule that keeps the flex row from overflowing is
     // `.lk-lab__body > .lk-workspace`. An element inserted between them drops
     // it, and jsdom cannot see the overflow that follows.
-    const { container } = render(<Lab instruments={[probeInstrument]} defaultInstrument="Probe" />);
+    const { container } = await renderSettled(
+      <Lab instruments={[probeInstrument]} defaultInstrument="Probe" />,
+    );
     const body = container.querySelector('.lk-lab__body');
     expect(body).not.toBeNull();
     expect(body?.querySelector(':scope > .lk-workspace')).not.toBeNull();
@@ -155,7 +164,7 @@ describe('<Lab> tile round trip', () => {
     vi.restoreAllMocks();
   });
 
-  it('publishes a rect for a tile an instrument registered', () => {
+  it('publishes a rect for a tile an instrument registered', async () => {
     const frames: SurfaceFrame[] = [];
     let handle: SurfaceHandle | null = null;
 
@@ -177,7 +186,7 @@ describe('<Lab> tile round trip', () => {
       );
     }
 
-    render(
+    await renderSettled(
       <Host>
         <Lab instruments={[probeInstrument]} defaultInstrument="Probe" />
       </Host>,
@@ -189,11 +198,11 @@ describe('<Lab> tile round trip', () => {
     expect(pane).not.toBeNull();
     stubBox(pane, 240, 100, 320, 200);
 
-    act(() => {
+    await act(async () => {
       handle?.invalidateRects();
       handle?.invalidate(paneTileId);
     });
-    act(() => {
+    await act(async () => {
       vi.advanceTimersByTime(64);
     });
 
@@ -208,8 +217,8 @@ describe('<Lab> tile round trip', () => {
 });
 
 describe('<Lab> pages', () => {
-  it("gives the title a way back to the project's other labs", () => {
-    const { getByRole } = render(
+  it("gives the title a way back to the project's other labs", async () => {
+    const { getByRole } = await renderSettled(
       <Lab
         instruments={[probeInstrument]}
         defaultInstrument="Probe"
@@ -225,8 +234,8 @@ describe('<Lab> pages', () => {
     expect(getByRole('button', { name: /kliegsminister/ })).toBeTruthy();
   });
 
-  it('leaves the title a plain heading when there are no other labs', () => {
-    const { getByRole, queryByRole } = render(
+  it('leaves the title a plain heading when there are no other labs', async () => {
+    const { getByRole, queryByRole } = await renderSettled(
       <Lab instruments={[probeInstrument]} defaultInstrument="Probe" title="solo" />,
     );
     expect(getByRole('heading', { name: 'solo' })).toBeTruthy();

package/src/lab/Lab.test.tsx

@@ -1,4 +1,5 @@
 import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { renderSettled } from '@weasel-js/react/testing/renderSettled';
 import { type ReactNode, useEffect } from 'react';
 import { describe, expect, it } from 'vitest';
 import type { Instrument } from '../instrument/types';
@@ -32,9 +33,9 @@ function CaptureLab({ children }: { children?: ReactNode }) {
   );
 }
 
-function mountLab(props: Partial<Record<keyof LabProps, unknown>> = {}) {
+async function mountLab(props: Partial<Record<keyof LabProps, unknown>> = {}) {
   labRef = null;
-  return render(
+  return renderSettled(
     <Lab {...({ instruments: [stub, stubB], defaultInstrument: 'Stub', ...props } as LabProps)}>
       <CaptureLab />
     </Lab>,
@@ -42,86 +43,86 @@ function mountLab(props: Partial<Record<keyof LabProps, unknown>> = {}) {
 }
 
 describe('<Lab>', () => {
-  it('renders one trial by default', () => {
-    mountLab();
+  it('renders one trial by default', async () => {
+    await mountLab();
     expect(screen.getAllByRole('region', { name: /trial/i })).toHaveLength(1);
   });
 
-  it('addTrial adds a second trial', () => {
-    mountLab();
-    act(() => labRef?.addTrial('Stub'));
+  it('addTrial adds a second trial', async () => {
+    await mountLab();
+    await act(async () => labRef?.addTrial('Stub'));
     expect(screen.getAllByRole('region', { name: /trial/i })).toHaveLength(2);
   });
 
-  it('addTrial opens each trial on the config it was given', () => {
-    mountLab();
-    act(() => labRef?.addTrial('Stub', { config: { count: 7 } }));
+  it('addTrial opens each trial on the config it was given', async () => {
+    await mountLab();
+    await act(async () => labRef?.addTrial('Stub', { config: { count: 7 } }));
     expect(labRef?.trials.map((t) => (t.config as { count: number }).count)).toEqual([0, 7]);
     expect(labRef?.trials.map((t) => (t.state as { value: number }).value)).toEqual([0, 7]);
   });
 
-  it('closeTrial removes one when more than one exists', () => {
-    mountLab();
-    act(() => labRef?.addTrial('Stub'));
+  it('closeTrial removes one when more than one exists', async () => {
+    await mountLab();
+    await act(async () => labRef?.addTrial('Stub'));
     const first = labRef?.trials[0];
-    act(() => labRef?.closeTrial(first?.id ?? ''));
+    await act(async () => labRef?.closeTrial(first?.id ?? ''));
     expect(screen.getAllByRole('region', { name: /trial/i })).toHaveLength(1);
   });
 
-  it('closeTrial is a no-op on the last trial', () => {
-    mountLab();
+  it('closeTrial is a no-op on the last trial', async () => {
+    await mountLab();
     const only = labRef?.trials[0];
-    act(() => labRef?.closeTrial(only?.id ?? ''));
+    await act(async () => labRef?.closeTrial(only?.id ?? ''));
     expect(screen.getAllByRole('region', { name: /trial/i })).toHaveLength(1);
   });
 
-  it('cloneTrial inserts immediately after source', () => {
-    mountLab();
-    act(() => labRef?.addTrial('StubB'));
+  it('cloneTrial inserts immediately after source', async () => {
+    await mountLab();
+    await act(async () => labRef?.addTrial('StubB'));
     const ws0 = labRef?.trials[0];
     const ws1 = labRef?.trials[1];
-    act(() => labRef?.cloneTrial(ws0?.id ?? ''));
+    await act(async () => labRef?.cloneTrial(ws0?.id ?? ''));
     const ids = labRef?.trials.map((w) => w.id) ?? [];
     expect(ids).toHaveLength(3);
     expect(ids[0]).toBe(ws0?.id);
     expect(ids[2]).toBe(ws1?.id);
   });
 
-  it('resetTrial restores defaults', () => {
-    mountLab();
+  it('resetTrial restores defaults', async () => {
+    await mountLab();
     const ws = labRef?.trials[0];
     if (!ws) throw new Error('no trial');
-    act(() => labRef?.resetTrial(ws.id));
+    await act(async () => labRef?.resetTrial(ws.id));
     const reset = labRef?.trials[0];
     expect(reset?.config).toEqual({ count: 0 });
     expect(reset?.state).toEqual({ value: 0 });
   });
 
-  it('mode="light" stamps light on the lab root', () => {
-    const { container } = mountLab({ mode: 'light' });
+  it('mode="light" stamps light on the lab root', async () => {
+    const { container } = await mountLab({ mode: 'light' });
     expect(container.querySelector('.lk-lab')?.getAttribute('data-wzl-mode')).toBe('light');
   });
 
-  it('mode="dark" stamps dark on the lab root', () => {
-    const { container } = mountLab({ mode: 'dark' });
+  it('mode="dark" stamps dark on the lab root', async () => {
+    const { container } = await mountLab({ mode: 'dark' });
     expect(container.querySelector('.lk-lab')?.getAttribute('data-wzl-mode')).toBe('dark');
   });
 
-  it('mode="auto" resolves to a concrete mode', () => {
-    const { container } = mountLab({ mode: 'auto' });
+  it('mode="auto" resolves to a concrete mode', async () => {
+    const { container } = await mountLab({ mode: 'auto' });
     expect(container.querySelector('.lk-lab')?.getAttribute('data-wzl-mode')).toMatch(
       /^(light|dark)$/,
     );
   });
 
-  it('applies the interstellar theme in every mode', () => {
-    const { container } = mountLab({ mode: 'light' });
+  it('applies the interstellar theme in every mode', async () => {
+    const { container } = await mountLab({ mode: 'light' });
     expect(container.querySelector('.lk-lab')?.getAttribute('data-wzl-theme')).toBe('interstellar');
   });
 
-  it('setMode updates the stamped mode at runtime', () => {
-    const { container } = mountLab({ mode: 'auto' });
-    act(() => labRef?.setMode('light'));
+  it('setMode updates the stamped mode at runtime', async () => {
+    const { container } = await mountLab({ mode: 'auto' });
+    await act(async () => labRef?.setMode('light'));
     expect(container.querySelector('.lk-lab')?.getAttribute('data-wzl-mode')).toBe('light');
   });
 
@@ -152,13 +153,13 @@ describe('<Lab>', () => {
     };
     const storage = () => createMemoryAdapter(backing);
 
-    const first = render(
+    const first = await renderSettled(
       <Lab instruments={[mapped]} defaultInstrument="Mapped" storage={storage()} storageKey="s" />,
     );
     await waitFor(() => expect(JSON.stringify([...backing.values()])).toContain('"seen":["a"]'));
     first.unmount();
 
-    mountLab({
+    await mountLab({
       instruments: [mapped],
       defaultInstrument: 'Mapped',
       storage: storage(),
@@ -172,7 +173,7 @@ describe('<Lab>', () => {
 });
 
 describe('instruments that change while mounted', () => {
-  it('fills an open trial’s config before its replaced instrument renders', () => {
+  it('fills an open trial’s config before its replaced instrument renders', async () => {
     const v1: Instrument = {
       name: 'Grow',
       defaultConfig: () => ({ size: 1 }),
@@ -188,7 +189,7 @@ describe('instruments that change while mounted', () => {
         return null;
       },
     };
-    const view = render(
+    const view = await renderSettled(
       <Lab instruments={[v1]} defaultInstrument="Grow">
         <CaptureLab />
       </Lab>,
@@ -203,9 +204,9 @@ describe('instruments that change while mounted', () => {
     expect(seenByV2.every((c) => c.color === 'red')).toBe(true);
   });
 
-  it('opens a trial of an instrument added after mount', () => {
+  it('opens a trial of an instrument added after mount', async () => {
     const later: Instrument = { ...stub, name: 'Later' };
-    const view = render(
+    const view = await renderSettled(
       <Lab instruments={[stub]} defaultInstrument="Stub">
         <CaptureLab />
       </Lab>,
@@ -215,12 +216,12 @@ describe('instruments that change while mounted', () => {
         <CaptureLab />
       </Lab>,
     );
-    act(() => labRef?.addTrial('Later'));
+    await act(async () => labRef?.addTrial('Later'));
     expect(labRef?.trials.map((t) => t.instrumentName)).toEqual(['Stub', 'Later']);
     expect(screen.queryByText(/Unknown instrument/)).toBeNull();
   });
 
-  it('keeps a trial’s content mounted across an instrument swap', () => {
+  it('keeps a trial’s content mounted across an instrument swap', async () => {
     let mounts = 0;
     function Probe() {
       useEffect(() => {
@@ -235,7 +236,7 @@ describe('instruments that change while mounted', () => {
       render: () => <Probe />,
     };
     const v2: Instrument = { ...v1, defaultConfig: () => ({ extra: 1 }) };
-    const view = render(<Lab instruments={[v1]} defaultInstrument="Keep" />);
+    const view = await renderSettled(<Lab instruments={[v1]} defaultInstrument="Keep" />);
     view.rerender(<Lab instruments={[v2]} defaultInstrument="Keep" />);
     expect(mounts).toBe(1);
   });
@@ -249,72 +250,72 @@ describe('focused trial', () => {
     render: () => <iframe title="story frame" />,
   };
 
-  it('is the only trial until another opens, then the one that opened', () => {
-    mountLab();
+  it('is the only trial until another opens, then the one that opened', async () => {
+    await mountLab();
     expect(labRef?.focusedTrialId).toBe(labRef?.trials[0]?.id);
-    act(() => labRef?.addTrial('StubB'));
+    await act(async () => labRef?.addTrial('StubB'));
     expect(labRef?.focusedTrialId).toBe(labRef?.trials[1]?.id);
-    act(() => labRef?.cloneTrial(labRef?.trials[0]?.id ?? ''));
+    await act(async () => labRef?.cloneTrial(labRef?.trials[0]?.id ?? ''));
     expect(labRef?.focusedTrialId).toBe(labRef?.trials[1]?.id);
     expect(labRef?.trials.map((t) => t.instrumentName)).toEqual(['Stub', 'Stub', 'StubB']);
   });
 
-  it('moves to a trial a pointer goes down in', () => {
-    mountLab();
-    act(() => labRef?.addTrial('StubB'));
+  it('moves to a trial a pointer goes down in', async () => {
+    await mountLab();
+    await act(async () => labRef?.addTrial('StubB'));
     fireEvent.pointerDown(within(regions()[0] as HTMLElement).getByTestId('stub-content'));
     expect(labRef?.focusedTrialId).toBe(labRef?.trials[0]?.id);
   });
 
-  it('moves to a trial focus moves into', () => {
-    mountLab();
-    act(() => labRef?.addTrial('StubB'));
-    act(() => (regions()[0] as HTMLElement).focus());
+  it('moves to a trial focus moves into', async () => {
+    await mountLab();
+    await act(async () => labRef?.addTrial('StubB'));
+    await act(async () => (regions()[0] as HTMLElement).focus());
     expect(labRef?.focusedTrialId).toBe(labRef?.trials[0]?.id);
   });
 
   it('moves to a trial whose frame takes focus, which fires nothing in the lab’s document', async () => {
-    mountLab({ instruments: [framed, stubB], defaultInstrument: 'Framed' });
-    act(() => labRef?.addTrial('StubB'));
-    act(() => screen.getByTitle('story frame').focus());
+    await mountLab({ instruments: [framed, stubB], defaultInstrument: 'Framed' });
+    await act(async () => labRef?.addTrial('StubB'));
+    await act(async () => screen.getByTitle('story frame').focus());
     fireEvent.blur(window);
     await waitFor(() => expect(labRef?.focusedTrialId).toBe(labRef?.trials[0]?.id));
   });
 
-  it('falls back to the first trial when the focused one closes', () => {
-    mountLab();
-    act(() => labRef?.addTrial('StubB'));
-    act(() => labRef?.closeTrial(labRef?.trials[1]?.id ?? ''));
+  it('falls back to the first trial when the focused one closes', async () => {
+    await mountLab();
+    await act(async () => labRef?.addTrial('StubB'));
+    await act(async () => labRef?.closeTrial(labRef?.trials[1]?.id ?? ''));
     expect(labRef?.focusedTrialId).toBe(labRef?.trials[0]?.id);
   });
 
-  it('is marked on its trial only when there is more than one', () => {
-    mountLab();
+  it('is marked on its trial only when there is more than one', async () => {
+    await mountLab();
     expect(regions()[0]).not.toHaveAttribute('data-focused');
-    act(() => labRef?.addTrial('StubB'));
+    await act(async () => labRef?.addTrial('StubB'));
     expect(regions()[1]).toHaveAttribute('data-focused', 'true');
     expect(regions()[0]).not.toHaveAttribute('data-focused');
   });
 });
 
 describe('swapTrial', () => {
-  it('runs another instrument in the trial’s place, and keeps focus on that place', () => {
-    mountLab();
-    act(() => labRef?.addTrial('Stub'));
+  it('runs another instrument in the trial’s place, and keeps focus on that place', async () => {
+    await mountLab();
+    await act(async () => labRef?.addTrial('Stub'));
     const second = labRef?.trials[1]?.id;
-    act(() => labRef?.focusTrial(labRef?.trials[0]?.id ?? ''));
-    act(() => labRef?.swapTrial(labRef?.trials[0]?.id ?? '', 'StubB'));
+    await act(async () => labRef?.focusTrial(labRef?.trials[0]?.id ?? ''));
+    await act(async () => labRef?.swapTrial(labRef?.trials[0]?.id ?? '', 'StubB'));
     expect(labRef?.trials.map((t) => t.instrumentName)).toEqual(['StubB', 'Stub']);
     expect(labRef?.trials[1]?.id).toBe(second);
     expect(labRef?.focusedTrialId).toBe(labRef?.trials[0]?.id);
     expect(screen.getByTestId('stub-b-content')).toBeInTheDocument();
   });
 
-  it('leaves focus where it was when the swapped trial did not have it', () => {
-    mountLab();
-    act(() => labRef?.addTrial('Stub'));
+  it('leaves focus where it was when the swapped trial did not have it', async () => {
+    await mountLab();
+    await act(async () => labRef?.addTrial('Stub'));
     const focused = labRef?.focusedTrialId;
-    act(() => labRef?.swapTrial(labRef?.trials[0]?.id ?? '', 'StubB'));
+    await act(async () => labRef?.swapTrial(labRef?.trials[0]?.id ?? '', 'StubB'));
     expect(labRef?.focusedTrialId).toBe(focused);
   });
 });

package/src/lab/Lab.undock.test.tsx

@@ -1,5 +1,6 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { renderSettled } from '@weasel-js/react/testing/renderSettled';
 import { describe, expect, it } from 'vitest';
 import type { TrialContribution } from '../chrome/types';
 import type { Instrument } from '../instrument/types';
@@ -34,19 +35,21 @@ const pinned: TrialContribution = {
   item: { title: 'Pinned', undockable: false, body: <p>stay</p> },
 };
 
-function renderLab() {
-  return render(<Lab title="T" instruments={[bare]} defaultInstrument="Bare" chrome={[notes]} />);
+async function renderLab() {
+  return renderSettled(
+    <Lab title="T" instruments={[bare]} defaultInstrument="Bare" chrome={[notes]} />,
+  );
 }
 
 describe('undocking a sidebar section', () => {
-  it('starts docked inside the trial sidebar', () => {
-    const { container } = renderLab();
+  it('starts docked inside the trial sidebar', async () => {
+    const { container } = await renderLab();
     const sidebar = container.querySelector('.lk-trial__sidebar');
     expect(sidebar).toContainElement(screen.getByTestId('notes-body'));
   });
 
   it('moves the section out of the sidebar and into a workspace panel', async () => {
-    const { container } = renderLab();
+    const { container } = await renderLab();
     await userEvent.click(screen.getByRole('button', { name: 'Undock Notes' }));
 
     expect(container.querySelector('.lk-trial__sidebar')).not.toContainElement(
@@ -57,7 +60,7 @@ describe('undocking a sidebar section', () => {
   });
 
   it('docks it back', async () => {
-    const { container } = renderLab();
+    const { container } = await renderLab();
     await userEvent.click(screen.getByRole('button', { name: 'Undock Notes' }));
     await userEvent.click(screen.getByRole('button', { name: 'Dock Notes' }));
 
@@ -68,7 +71,7 @@ describe('undocking a sidebar section', () => {
   });
 
   it('sends a section declaring undockAs floating to the floating layer', async () => {
-    const { container } = render(
+    const { container } = await renderSettled(
       <Lab title="T" instruments={[bare]} defaultInstrument="Bare" chrome={[floater]} />,
     );
     await userEvent.click(screen.getByRole('button', { name: 'Undock Floater' }));
@@ -78,8 +81,10 @@ describe('undocking a sidebar section', () => {
     expect(container.querySelector('.lk-panel-tile--floating')).not.toBeNull();
   });
 
-  it('offers no tear-out control on a section that opts out', () => {
-    render(<Lab title="T" instruments={[bare]} defaultInstrument="Bare" chrome={[pinned]} />);
+  it('offers no tear-out control on a section that opts out', async () => {
+    await renderSettled(
+      <Lab title="T" instruments={[bare]} defaultInstrument="Bare" chrome={[pinned]} />,
+    );
     expect(screen.queryByRole('button', { name: 'Undock Pinned' })).toBeNull();
   });
 });