@ic-reactor/mcp 0.0.0-stage → 0.0.0

package/packages/react/tests/abandoned-render.test.tsx

@@ -0,0 +1,816 @@
+/**
+ * A client built for a render that React throws away is disposed anyway.
+ *
+ * React gives a discarded render no cleanup. A Suspense boundary above the
+ * provider that suspends during the provider's first render, or StrictMode's
+ * second call of the `useState` initializer, leaves a client that never
+ * reaches the effect that would dispose it, and a child's `useAuth()` has
+ * already built that client's auth and subscribed to it. The provider
+ * registers each client it owns with a `FinalizationRegistry` until it
+ * commits it, so the registry disposes the ones React dropped.
+ *
+ * A client that a dropped render created can still be in use: a factory that
+ * creates a shared client on its first call hands the same one to the retry.
+ * The registry must let go of it as soon as a factory returns it again, and
+ * whenever a provider commits it. That moment is also when the pattern shows,
+ * so a development build warns about it then.
+ *
+ * Garbage collection decides when a real registry runs its cleanup, so most
+ * tests here install a fake whose collections the test triggers
+ * (`fakeFinalizationRegistry`), and one runs a real collection where the
+ * runtime exposes `gc()`.
+ */
+import type { Client } from "@ic-reactor/core"
+import { act, render } from "@testing-library/react"
+import { StrictMode, Suspense, useEffect, type ReactNode } from "react"
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+import {
+  bindingsWith,
+  clientOf,
+  clientWithAuth,
+  fakeFinalizationRegistry,
+  macrotask,
+  testAuth,
+  trackedFactory,
+  withDisposeSpy,
+  type TestAuth,
+  type TrackedClient,
+} from "./helpers.js"
+
+/** The runtime's own registry, captured before any test stubs it. */
+const RealRegistry = (globalThis as { FinalizationRegistry?: unknown })
+  .FinalizationRegistry
+
+/** Node's `gc()`, present when the worker runs with `--expose-gc`. */
+const collectGarbage = (globalThis as { gc?: () => void }).gc
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+  vi.unstubAllEnvs()
+  vi.restoreAllMocks()
+  vi.resetModules()
+})
+
+/**
+ * A factory that builds each client over an auth of its own, and the clients
+ * that a committed tree used.
+ */
+function setup(bindings: Awaited<ReturnType<typeof bindingsWith>>) {
+  const { useAuth, useClient } = bindings
+  const auths: TestAuth[] = []
+  const tracked = trackedFactory(() => {
+    const auth = testAuth({ identity: 5, signedIn: false })
+    auths.push(auth)
+    return clientWithAuth(() => auth)
+  })
+  /** The auth of a client the factory built. */
+  const authOf = (client: Client): TestAuth =>
+    auths[tracked.made.indexOf(tracked.trackOf(client))] as TestAuth
+  /**
+   * The clients a committed `Probe` was given views of: an effect runs only
+   * on commit.
+   */
+  const committed = new Set<Client>()
+
+  function Probe() {
+    const client = useClient()
+    const { status } = useAuth()
+    useEffect(() => {
+      committed.add(clientOf(client))
+    }, [client])
+    return <p data-testid="status">{status}</p>
+  }
+  return { ...tracked, authOf, committed, Probe }
+}
+
+/**
+ * A child that suspends until {@link open} is called, as a lazy route or a
+ * pending `use(promise)` does. Rendered below the provider and inside a
+ * boundary above it, it throws the provider's first render away.
+ */
+function suspendUntilOpened() {
+  let opened = false
+  let resolve: () => void = () => {}
+  const gate = new Promise<void>((done) => {
+    resolve = done
+  })
+  function Gate(): ReactNode {
+    if (!opened) throw gate
+    return null
+  }
+  const open = async (): Promise<void> => {
+    opened = true
+    await act(async () => {
+      resolve()
+      await gate
+    })
+    await act(macrotask)
+  }
+  return { Gate, open }
+}
+
+/**
+ * A factory that creates one client on its first call and returns that same
+ * client on every later call, as `() => (client ??= createClient(...))` does.
+ * The provider that makes the first call owns the client; every later one
+ * borrows it.
+ */
+function lazilySharedFactory() {
+  const auth = testAuth({ identity: 7, signedIn: false })
+  let made: TrackedClient | undefined
+  const factory = vi.fn(
+    (): Client => (made ??= withDisposeSpy(clientWithAuth(() => auth))).client
+  )
+  /** The one client the factory created. */
+  const shared = (): TrackedClient => {
+    if (made === undefined) throw new Error("the factory was never called")
+    return made
+  }
+  return { factory, auth, shared }
+}
+
+describe("a client the provider owns, and the registry that backs its disposal", () => {
+  it("is registered while it renders and unregistered once committed, so a collection never disposes it", async () => {
+    const registry = fakeFinalizationRegistry()
+    const bindings = await bindingsWith(registry.Registry)
+    const { ReactorProvider, useClient } = bindings
+    const { factory, made, trackOf, authOf, committed, Probe } = setup(bindings)
+    const standingWhileRendering: boolean[] = []
+    function Witness() {
+      const client = clientOf(useClient())
+      standingWhileRendering.push(
+        registry.live.some((entry) => entry.held === client)
+      )
+      return null
+    }
+
+    const view = render(
+      <ReactorProvider client={factory}>
+        <Witness />
+        <Probe />
+      </ReactorProvider>
+    )
+    await act(macrotask)
+
+    expect(made).toHaveLength(1)
+    const [client] = [...committed] as [Client]
+    expect(client).toBe(made[0]?.client)
+    // Registered before the commit: a render React dropped there would leave
+    // a registration behind.
+    expect(standingWhileRendering[0]).toBe(true)
+    // Unregistered by the commit: the provider's unmount owns it now.
+    expect(registry.registered).toEqual([client])
+    expect(registry.unregistered).toContain(client)
+    expect(registry.live).toEqual([])
+
+    registry.collectAll()
+    expect(trackOf(client).dispose).not.toHaveBeenCalled()
+    await act(() => authOf(client).signIn())
+    expect(view.getByTestId("status").textContent).toBe("signed-in")
+
+    view.unmount()
+    await act(macrotask)
+    expect(trackOf(client).dispose).toHaveBeenCalledTimes(1)
+  })
+
+  it("disposes, with its auth, each client of a first render that a Suspense boundary above the provider threw away", async () => {
+    const registry = fakeFinalizationRegistry()
+    const bindings = await bindingsWith(registry.Registry)
+    const { ReactorProvider } = bindings
+    const { factory, made, trackOf, authOf, committed, Probe } = setup(bindings)
+    const { Gate, open } = suspendUntilOpened()
+
+    const view = render(
+      <Suspense fallback={<p>loading</p>}>
+        <ReactorProvider client={factory}>
+          <Probe />
+          <Gate />
+        </ReactorProvider>
+      </Suspense>
+    )
+    await act(macrotask)
+    expect(view.container.textContent).toBe("loading")
+    expect(committed.size).toBe(0)
+    await open()
+
+    expect(committed.size).toBe(1)
+    const [used] = [...committed] as [Client]
+    const dropped = made.filter((entry) => entry.client !== used)
+    expect(dropped.length).toBeGreaterThan(0)
+    for (const entry of dropped) {
+      // The leak: the thrown-away render built the client's auth and
+      // subscribed to it, and no effect of it ever runs.
+      expect(authOf(entry.client).listenerCount).toBe(1)
+      expect(entry.dispose).not.toHaveBeenCalled()
+    }
+    expect(registry.live.map((entry) => entry.held)).toEqual(
+      dropped.map((entry) => entry.client)
+    )
+
+    registry.collectAll()
+    registry.collectAll()
+
+    for (const entry of dropped) {
+      expect(entry.dispose).toHaveBeenCalledTimes(1)
+      expect(authOf(entry.client).disposed).toBe(true)
+      expect(authOf(entry.client).listenerCount).toBe(0)
+    }
+    // The client the tree runs on is untouched, and still hears its auth.
+    expect(trackOf(used).dispose).not.toHaveBeenCalled()
+    expect(authOf(used).disposed).toBe(false)
+    await act(() => authOf(used).signIn())
+    expect(view.getByTestId("status").textContent).toBe("signed-in")
+  })
+
+  it("disposes the clients of a thrown-away render whose nested provider was handed their view", async () => {
+    // The pattern the README describes: an inner provider given the outer
+    // one's useClient(). It holds the client the view was made over, which
+    // is the outer provider's to hold: it stays registered until a provider
+    // that renders it commits.
+    const registry = fakeFinalizationRegistry()
+    const bindings = await bindingsWith(registry.Registry)
+    const { ReactorProvider, useClient } = bindings
+    const { factory, made, trackOf, authOf, committed, Probe } = setup(bindings)
+    const { Gate, open } = suspendUntilOpened()
+    function Nested({ children }: { children: ReactNode }) {
+      const outer = useClient()
+      return <ReactorProvider client={() => outer}>{children}</ReactorProvider>
+    }
+
+    const view = render(
+      <Suspense fallback={<p>loading</p>}>
+        <ReactorProvider client={factory}>
+          <Nested>
+            <Probe />
+            <Gate />
+          </Nested>
+        </ReactorProvider>
+      </Suspense>
+    )
+    await act(macrotask)
+    expect(committed.size).toBe(0)
+    await open()
+
+    expect(committed.size).toBe(1)
+    const [used] = [...committed] as [Client]
+    const dropped = made.filter((entry) => entry.client !== used)
+    expect(dropped.length).toBeGreaterThan(0)
+    for (const entry of dropped) {
+      // What the registry is there to release: an auth listening to the
+      // window, built by a render whose effects never run.
+      expect(authOf(entry.client).listenerCount).toBe(1)
+      expect(entry.dispose).not.toHaveBeenCalled()
+    }
+    expect(registry.live.map((entry) => entry.held)).toEqual(
+      dropped.map((entry) => entry.client)
+    )
+
+    registry.collectAll()
+    registry.collectAll()
+
+    for (const entry of dropped) {
+      expect(entry.dispose).toHaveBeenCalledTimes(1)
+      expect(authOf(entry.client).listenerCount).toBe(0)
+    }
+    expect(trackOf(used).dispose).not.toHaveBeenCalled()
+    await act(() => authOf(used).signIn())
+    expect(view.getByTestId("status").textContent).toBe("signed-in")
+  })
+
+  it("disposes the client of the initializer call that StrictMode drops, and only that one", async () => {
+    const registry = fakeFinalizationRegistry()
+    const bindings = await bindingsWith(registry.Registry)
+    const { ReactorProvider } = bindings
+    const { factory, made, trackOf, committed, Probe } = setup(bindings)
+
+    const view = render(
+      <StrictMode>
+        <ReactorProvider client={factory}>
+          <Probe />
+        </ReactorProvider>
+      </StrictMode>
+    )
+    await act(macrotask)
+
+    expect(committed.size).toBe(1)
+    const [used] = [...committed] as [Client]
+    const dropped = made.filter((entry) => entry.client !== used)
+    // StrictMode builds two clients in development and keeps one.
+    expect(dropped).toHaveLength(1)
+    expect(registry.live.map((entry) => entry.held)).toEqual([
+      dropped[0]?.client,
+    ])
+
+    registry.collectAll()
+    expect(dropped[0]?.dispose).toHaveBeenCalledTimes(1)
+    expect(trackOf(used).dispose).not.toHaveBeenCalled()
+
+    view.unmount()
+    await act(macrotask)
+    expect(trackOf(used).dispose).toHaveBeenCalledTimes(1)
+  })
+})
+
+describe("a client the app created before the provider's factory ran", () => {
+  it("is never registered, even when renders are thrown away", async () => {
+    const registry = fakeFinalizationRegistry()
+    const { ReactorProvider, useAuth } = await bindingsWith(registry.Registry)
+    const auth = testAuth({ identity: 6, signedIn: false })
+    const { client, dispose } = withDisposeSpy(clientWithAuth(() => auth))
+    const { Gate, open } = suspendUntilOpened()
+    function Status() {
+      return <p data-testid="status">{useAuth().status}</p>
+    }
+
+    const view = render(
+      <StrictMode>
+        <Suspense fallback={<p>loading</p>}>
+          <ReactorProvider client={() => client}>
+            <Status />
+            <Gate />
+          </ReactorProvider>
+        </Suspense>
+      </StrictMode>
+    )
+    await act(macrotask)
+    await open()
+    registry.collectAll()
+
+    expect(registry.registered).toEqual([])
+    expect(dispose).not.toHaveBeenCalled()
+    await act(() => client.signIn())
+    expect(view.getByTestId("status").textContent).toBe("signed-in")
+
+    view.unmount()
+    await act(macrotask)
+    registry.collectAll()
+    expect(dispose).not.toHaveBeenCalled()
+  })
+})
+
+describe("a shared client that the factory creates on its first call", () => {
+  beforeEach(() => {
+    // Each of these trees warns about the pattern in development; the tests
+    // of that warning are below.
+    vi.spyOn(console, "warn").mockImplementation(() => {})
+  })
+
+  it("keeps running once mounted, though the render that created it was thrown away", async () => {
+    const registry = fakeFinalizationRegistry()
+    const { ReactorProvider, useAuth } = await bindingsWith(registry.Registry)
+    const { factory, auth, shared } = lazilySharedFactory()
+    const { Gate, open } = suspendUntilOpened()
+    function Status() {
+      return <p data-testid="status">{useAuth().status}</p>
+    }
+
+    const view = render(
+      <Suspense fallback={<p>loading</p>}>
+        <ReactorProvider client={factory}>
+          <Status />
+          <Gate />
+        </ReactorProvider>
+      </Suspense>
+    )
+    await act(macrotask)
+    await open()
+    const { client, dispose } = shared()
+
+    // The render that created it owned it, so it registered it, and React
+    // threw that render away; a later one got it back and mounted.
+    expect(registry.registered).toHaveLength(1)
+    expect(registry.registered[0]).toBe(client)
+    expect(factory.mock.calls.length).toBeGreaterThan(1)
+    expect(view.getByTestId("status").textContent).toBe("anonymous")
+
+    // The tree runs on it, so no collection may dispose it.
+    expect(registry.live).toEqual([])
+    registry.collectAll()
+    expect(dispose).not.toHaveBeenCalled()
+    await act(() => auth.signIn())
+    expect(view.getByTestId("status").textContent).toBe("signed-in")
+    expect(client.authState().status).toBe("signed-in")
+
+    // The provider that mounted it borrowed it, so its unmount leaves it too.
+    view.unmount()
+    await act(macrotask)
+    registry.collectAll()
+    expect(dispose).not.toHaveBeenCalled()
+  })
+
+  it("is let go by the registry as soon as a later render gets it back, before anything commits", async () => {
+    const registry = fakeFinalizationRegistry()
+    const { ReactorProvider, useAuth } = await bindingsWith(registry.Registry)
+    const { factory, auth, shared } = lazilySharedFactory()
+    const first = suspendUntilOpened()
+    const second = suspendUntilOpened()
+    function Status() {
+      return <p data-testid="status">{useAuth().status}</p>
+    }
+
+    const view = render(
+      <Suspense fallback={<p>loading</p>}>
+        <ReactorProvider client={factory}>
+          <Status />
+          <first.Gate />
+          <second.Gate />
+        </ReactorProvider>
+      </Suspense>
+    )
+    await act(macrotask)
+    await first.open()
+    const { client, dispose } = shared()
+
+    // The retry got the client back from the factory and suspended again, so
+    // nothing has committed yet: no effect can have let go of it.
+    expect(view.container.textContent).toBe("loading")
+    expect(factory.mock.calls.length).toBeGreaterThan(1)
+    expect(registry.registered).toHaveLength(1)
+    expect(registry.registered[0]).toBe(client)
+    // A collection while the fallback still shows leaves it for the tree.
+    expect(registry.live).toEqual([])
+    registry.collectAll()
+    expect(dispose).not.toHaveBeenCalled()
+
+    await second.open()
+    expect(view.getByTestId("status").textContent).toBe("anonymous")
+    await act(() => auth.signIn())
+    expect(view.getByTestId("status").textContent).toBe("signed-in")
+    view.unmount()
+    await act(macrotask)
+  })
+
+  it("keeps running once mounted under StrictMode, which calls the factory twice and keeps one result", async () => {
+    // React 19 keeps the first call's result, the client's owner; React 18
+    // keeps the second, which borrowed it, and drops the owner that
+    // registered it.
+    const registry = fakeFinalizationRegistry()
+    const { ReactorProvider, useAuth } = await bindingsWith(registry.Registry)
+    const { factory, auth, shared } = lazilySharedFactory()
+    function Status() {
+      return <p data-testid="status">{useAuth().status}</p>
+    }
+
+    const view = render(
+      <StrictMode>
+        <ReactorProvider client={factory}>
+          <Status />
+        </ReactorProvider>
+      </StrictMode>
+    )
+    await act(macrotask)
+    const { client, dispose } = shared()
+
+    expect(factory.mock.calls.length).toBeGreaterThan(1)
+    expect(registry.registered).toHaveLength(1)
+    expect(registry.registered[0]).toBe(client)
+    expect(registry.live).toEqual([])
+    registry.collectAll()
+    expect(dispose).not.toHaveBeenCalled()
+    await act(() => auth.signIn())
+    expect(view.getByTestId("status").textContent).toBe("signed-in")
+    view.unmount()
+    await act(macrotask)
+  })
+})
+
+describe("the development warning about a factory that shares a client lazily", () => {
+  /** Matches the warning, which names the pattern and the fix. */
+  const WARNING =
+    /earlier factory call created \(client \?\?= createClient\(\.\.\.\)\)\..*create a shared client eagerly/s
+
+  /**
+   * A spy on `console.warn` that also records how many trees had committed
+   * when each warning came, so a test can tell it came before any did.
+   */
+  function warnings(committed: () => number) {
+    const committedAt: number[] = []
+    const warn = vi
+      .spyOn(console, "warn")
+      .mockImplementation(() => void committedAt.push(committed()))
+    return { warn, committedAt }
+  }
+
+  it("warns once, before anything commits, when a render gets back the client of a render React threw away", async () => {
+    const { ReactorProvider, useAuth } = await bindingsWith(RealRegistry)
+    const { factory, auth, shared } = lazilySharedFactory()
+    const first = suspendUntilOpened()
+    const second = suspendUntilOpened()
+    let commits = 0
+    const { warn, committedAt } = warnings(() => commits)
+    function Status() {
+      useEffect(() => {
+        commits++
+      }, [])
+      return <p data-testid="status">{useAuth().status}</p>
+    }
+
+    const view = render(
+      <Suspense fallback={<p>loading</p>}>
+        <ReactorProvider client={factory}>
+          <Status />
+          <first.Gate />
+          <second.Gate />
+        </ReactorProvider>
+      </Suspense>
+    )
+    await act(macrotask)
+    await first.open()
+    await second.open()
+
+    expect(factory.mock.calls.length).toBeGreaterThan(2)
+    expect(warn).toHaveBeenCalledTimes(1)
+    expect(String(warn.mock.calls[0]?.[0])).toMatch(WARNING)
+    expect(committedAt).toEqual([0])
+    // The warning changes nothing: the tree runs on the shared client.
+    expect(view.getByTestId("status").textContent).toBe("anonymous")
+    await act(() => auth.signIn())
+    expect(view.getByTestId("status").textContent).toBe("signed-in")
+    expect(shared().dispose).not.toHaveBeenCalled()
+    view.unmount()
+    await act(macrotask)
+  })
+
+  it("warns on the first render under StrictMode, which calls the factory twice", async () => {
+    const { ReactorProvider, useAuth } = await bindingsWith(RealRegistry)
+    const { factory } = lazilySharedFactory()
+    let commits = 0
+    const { warn, committedAt } = warnings(() => commits)
+    function Status() {
+      useEffect(() => {
+        commits++
+      }, [])
+      return <p data-testid="status">{useAuth().status}</p>
+    }
+
+    const view = render(
+      <StrictMode>
+        <ReactorProvider client={factory}>
+          <Status />
+        </ReactorProvider>
+      </StrictMode>
+    )
+    await act(macrotask)
+
+    expect(warn).toHaveBeenCalledTimes(1)
+    expect(String(warn.mock.calls[0]?.[0])).toMatch(WARNING)
+    expect(committedAt).toEqual([0])
+    view.unmount()
+    await act(macrotask)
+  })
+
+  it("says nothing in production", async () => {
+    vi.stubEnv("NODE_ENV", "production")
+    const { ReactorProvider, useAuth } = await bindingsWith(RealRegistry)
+    const { factory, auth } = lazilySharedFactory()
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {})
+    const { Gate, open } = suspendUntilOpened()
+    function Status() {
+      return <p data-testid="status">{useAuth().status}</p>
+    }
+
+    const view = render(
+      <StrictMode>
+        <Suspense fallback={<p>loading</p>}>
+          <ReactorProvider client={factory}>
+            <Status />
+            <Gate />
+          </ReactorProvider>
+        </Suspense>
+      </StrictMode>
+    )
+    await act(macrotask)
+    await open()
+
+    expect(factory.mock.calls.length).toBeGreaterThan(1)
+    expect(warn).not.toHaveBeenCalled()
+    await act(() => auth.signIn())
+    expect(view.getByTestId("status").textContent).toBe("signed-in")
+    view.unmount()
+    await act(macrotask)
+  })
+
+  it("says nothing about a client the factory creates on each call, or one the app created before the provider rendered", async () => {
+    const bindings = await bindingsWith(RealRegistry)
+    const { ReactorProvider, useAuth } = bindings
+    const fresh = setup(bindings)
+    const borrowed = withDisposeSpy(
+      clientWithAuth(() => testAuth({ identity: 9, signedIn: false }))
+    )
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {})
+    const { Gate, open } = suspendUntilOpened()
+    function Status() {
+      return <p data-testid="borrowed">{useAuth().status}</p>
+    }
+
+    const view = render(
+      <StrictMode>
+        <Suspense fallback={<p>loading</p>}>
+          <ReactorProvider client={fresh.factory}>
+            <fresh.Probe />
+          </ReactorProvider>
+          <ReactorProvider client={() => borrowed.client}>
+            <Status />
+            <Gate />
+          </ReactorProvider>
+        </Suspense>
+      </StrictMode>
+    )
+    await act(macrotask)
+    await open()
+    view.unmount()
+    await act(macrotask)
+    render(
+      <ReactorProvider client={() => borrowed.client}>
+        <Status />
+      </ReactorProvider>
+    )
+    await act(macrotask)
+
+    // Thrown-away renders built and dropped clients, and the borrowed client
+    // went to several renders: none of it is the pattern.
+    expect(fresh.made.length).toBeGreaterThan(1)
+    expect(warn).not.toHaveBeenCalled()
+  })
+
+  it.each([false, true])(
+    "says nothing about a nested provider handed the view of the outer one's client (StrictMode: %s)",
+    async (strict) => {
+      const bindings = await bindingsWith(RealRegistry)
+      const { ReactorProvider, useClient } = bindings
+      const { factory, made, committed, Probe } = setup(bindings)
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {})
+      function Nested({ children }: { children: ReactNode }) {
+        const outer = useClient()
+        return (
+          <ReactorProvider client={() => outer}>{children}</ReactorProvider>
+        )
+      }
+      const tree = (
+        <ReactorProvider client={factory}>
+          <Nested>
+            <Probe />
+          </Nested>
+        </ReactorProvider>
+      )
+
+      const view = render(strict ? <StrictMode>{tree}</StrictMode> : tree)
+      await act(macrotask)
+
+      // Only the outer provider's factory creates a client (StrictMode calls
+      // it twice), and both providers hold the one it keeps.
+      expect(made).toHaveLength(strict ? 2 : 1)
+      expect(committed.size).toBe(1)
+      expect(made.map((entry) => entry.client)).toContain([...committed][0])
+      expect(warn).not.toHaveBeenCalled()
+      view.unmount()
+      await act(macrotask)
+    }
+  )
+})
+
+describe("a runtime without FinalizationRegistry", () => {
+  it("still mounts, follows the auth and disposes a committed client once", async () => {
+    const bindings = await bindingsWith(undefined)
+    expect(
+      (globalThis as { FinalizationRegistry?: unknown }).FinalizationRegistry
+    ).toBeUndefined()
+    const { ReactorProvider } = bindings
+    const { factory, trackOf, authOf, committed, Probe } = setup(bindings)
+    const { Gate, open } = suspendUntilOpened()
+
+    const view = render(
+      <StrictMode>
+        <Suspense fallback={<p>loading</p>}>
+          <ReactorProvider client={factory}>
+            <Probe />
+            <Gate />
+          </ReactorProvider>
+        </Suspense>
+      </StrictMode>
+    )
+    await act(macrotask)
+    await open()
+
+    const [used] = [...committed] as [Client]
+    expect(view.getByTestId("status").textContent).toBe("anonymous")
+    await act(() => authOf(used).signIn())
+    expect(view.getByTestId("status").textContent).toBe("signed-in")
+
+    view.unmount()
+    await act(macrotask)
+    expect(trackOf(used).dispose).toHaveBeenCalledTimes(1)
+  })
+})
+
+describe("a real garbage collection", () => {
+  it.skipIf(
+    typeof collectGarbage !== "function" || typeof RealRegistry !== "function"
+  )(
+    "disposes the clients of a thrown-away first render once their state is collected",
+    async () => {
+      const gc = collectGarbage as () => void
+      const bindings = await bindingsWith(RealRegistry)
+      const { ReactorProvider } = bindings
+      const { factory, made, trackOf, authOf, committed, Probe } =
+        setup(bindings)
+      const { Gate, open } = suspendUntilOpened()
+
+      const view = render(
+        <Suspense fallback={<p>loading</p>}>
+          <ReactorProvider client={factory}>
+            <Probe />
+            <Gate />
+          </ReactorProvider>
+        </Suspense>
+      )
+      await act(macrotask)
+      await open()
+
+      const [used] = [...committed] as [Client]
+      const dropped = made.filter((entry) => entry.client !== used)
+      expect(dropped.length).toBeGreaterThan(0)
+      // A registry runs its cleanups in a task after the collection that
+      // found the targets unreachable; a few rounds absorb a collection that
+      // ran before React let go of the last of them.
+      for (
+        let round = 0;
+        round < 20 &&
+        dropped.some((entry) => entry.dispose.mock.calls.length === 0);
+        round++
+      ) {
+        gc()
+        await macrotask()
+      }
+
+      for (const entry of dropped) {
+        expect(entry.dispose).toHaveBeenCalledTimes(1)
+        expect(authOf(entry.client).listenerCount).toBe(0)
+      }
+      expect(trackOf(used).dispose).not.toHaveBeenCalled()
+      expect(authOf(used).listenerCount).toBe(1)
+      view.unmount()
+      await act(macrotask)
+      expect(trackOf(used).dispose).toHaveBeenCalledTimes(1)
+    }
+  )
+
+  it.skipIf(
+    typeof collectGarbage !== "function" || typeof RealRegistry !== "function"
+  )(
+    "leaves a shared client created in a thrown-away render to the tree that mounted it",
+    async () => {
+      vi.spyOn(console, "warn").mockImplementation(() => {})
+      const gc = collectGarbage as () => void
+      const bindings = await bindingsWith(RealRegistry)
+      const { ReactorProvider, useAuth } = bindings
+      const { factory, auth, shared } = lazilySharedFactory()
+      // A provider beside it whose factory builds a client per render: once
+      // the clients of its dropped renders are disposed, the registry has run
+      // the cleanups of the render that dropped them both.
+      const fresh = setup(bindings)
+      const { Gate, open } = suspendUntilOpened()
+      function Status() {
+        return <p data-testid="shared">{useAuth().status}</p>
+      }
+
+      const view = render(
+        <Suspense fallback={<p>loading</p>}>
+          <ReactorProvider client={factory}>
+            <Status />
+            <Gate />
+          </ReactorProvider>
+          <ReactorProvider client={fresh.factory}>
+            <fresh.Probe />
+          </ReactorProvider>
+        </Suspense>
+      )
+      await act(macrotask)
+      await open()
+
+      const [used] = [...fresh.committed] as [Client]
+      const dropped = fresh.made.filter((entry) => entry.client !== used)
+      expect(dropped.length).toBeGreaterThan(0)
+      for (
+        let round = 0;
+        round < 20 &&
+        dropped.some((entry) => entry.dispose.mock.calls.length === 0);
+        round++
+      ) {
+        gc()
+        await macrotask()
+      }
+      for (const entry of dropped) {
+        expect(entry.dispose).toHaveBeenCalledTimes(1)
+      }
+
+      const { client, dispose } = shared()
+      expect(dispose).not.toHaveBeenCalled()
+      await act(() => auth.signIn())
+      expect(view.getByTestId("shared").textContent).toBe("signed-in")
+      expect(client.authState().status).toBe("signed-in")
+      view.unmount()
+      await act(macrotask)
+    }
+  )
+})