One more idea for the profiler

src/react/components/__tests__/client/Query.test.tsx

@@ -11,7 +11,7 @@ import { ApolloProvider } from "../../../context";
 import { itAsync, MockedProvider, mockSingleLink } from "../../../../testing";
 import { Query } from "../../Query";
 import { QueryResult } from "../../../types/types";
-import { profile } from "../../../../testing/internal";
+import { createTestProfiler } from "../../../../testing/internal";
 
 const allPeopleQuery: DocumentNode = gql`
   query people {
@@ -1498,7 +1498,7 @@ describe("Query component", () => {
       );
     }
 
-    const ProfiledContainer = profile<QueryResult>({
+    const ProfiledContainer = createTestProfiler<QueryResult>({
       Component: Container,
     });
 

src/react/hoc/__tests__/queries/lifecycle.test.tsx

@@ -10,7 +10,7 @@ import { mockSingleLink } from "../../../../testing";
 import { Query as QueryComponent } from "../../../components";
 import { graphql } from "../../graphql";
 import { ChildProps, DataValue } from "../../types";
-import { profile } from "../../../../testing/internal";
+import { createTestProfiler } from "../../../../testing/internal";
 
 describe("[queries] lifecycle", () => {
   // lifecycle
@@ -58,7 +58,7 @@ describe("[queries] lifecycle", () => {
       }
     );
 
-    const ProfiledApp = profile<DataValue<Data, Vars>, Vars>({
+    const ProfiledApp = createTestProfiler<DataValue<Data, Vars>, Vars>({
       Component: Container,
     });
 

src/react/hoc/__tests__/queries/loading.test.tsx

@@ -13,7 +13,7 @@ import { InMemoryCache as Cache } from "../../../../cache";
 import { itAsync, mockSingleLink } from "../../../../testing";
 import { graphql } from "../../graphql";
 import { ChildProps, DataValue } from "../../types";
-import { profile } from "../../../../testing/internal";
+import { createTestProfiler } from "../../../../testing/internal";
 
 describe("[queries] loading", () => {
   // networkStatus / loading
@@ -413,7 +413,7 @@ describe("[queries] loading", () => {
       }
     );
 
-    const ProfiledContainer = profile<
+    const ProfiledContainer = createTestProfiler<
       DataValue<{
         allPeople: {
           people: {

src/react/hooks/__tests__/useBackgroundQuery.test.tsx

@@ -53,7 +53,7 @@ import {
 import equal from "@wry/equality";
 import { RefetchWritePolicy } from "../../../core/watchQueryOptions";
 import { skipToken } from "../constants";
-import { profile, spyOnConsole } from "../../../testing/internal";
+import { createTestProfiler, spyOnConsole } from "../../../testing/internal";
 
 function renderIntegrationTest({
   client,
@@ -332,7 +332,7 @@ function renderVariablesIntegrationTest({
     );
   }
 
-  const ProfiledApp = profile<Renders, ComponentProps<typeof App>>({
+  const ProfiledApp = createTestProfiler<Renders, ComponentProps<typeof App>>({
     Component: App,
     snapshotDOM: true,
     onRender: ({ replaceSnapshot }) => replaceSnapshot(cloneDeep(renders)),
@@ -516,7 +516,7 @@ function renderPaginatedIntegrationTest({
     );
   }
 
-  const ProfiledApp = profile({
+  const ProfiledApp = createTestProfiler({
     Component: App,
     snapshotDOM: true,
     initialSnapshot: {
@@ -3895,7 +3895,7 @@ describe("useBackgroundQuery", () => {
         );
       }
 
-      const ProfiledApp = profile({ Component: App, snapshotDOM: true });
+      const ProfiledApp = createTestProfiler({ Component: App, snapshotDOM: true });
 
       render(<ProfiledApp />);
 
@@ -4193,7 +4193,7 @@ describe("useBackgroundQuery", () => {
         );
       }
 
-      const ProfiledApp = profile({ Component: App, snapshotDOM: true });
+      const ProfiledApp = createTestProfiler({ Component: App, snapshotDOM: true });
       render(<ProfiledApp />);
 
       {

src/react/hooks/__tests__/useFragment.test.tsx

@@ -29,7 +29,7 @@ import { concatPagination } from "../../../utilities";
 import assert from "assert";
 import { expectTypeOf } from "expect-type";
 import { SubscriptionObserver } from "zen-observable-ts";
-import { profile, spyOnConsole } from "../../../testing/internal";
+import { createTestProfiler, spyOnConsole } from "../../../testing/internal";
 
 describe("useFragment", () => {
   it("is importable and callable", () => {
@@ -1481,7 +1481,7 @@ describe("has the same timing as `useQuery`", () => {
       return complete ? JSON.stringify(fragmentData) : "loading";
     }
 
-    const ProfiledComponent = profile({
+    const ProfiledComponent = createTestProfiler({
       Component,
       initialSnapshot: {
         queryData: undefined as any,
@@ -1569,7 +1569,7 @@ describe("has the same timing as `useQuery`", () => {
       return <>{JSON.stringify({ item: data })}</>;
     }
 
-    const ProfiledParent = profile({
+    const ProfiledParent = createTestProfiler({
       Component: Parent,
       snapshotDOM: true,
       onRender() {
@@ -1664,7 +1664,7 @@ describe("has the same timing as `useQuery`", () => {
       return <>{JSON.stringify(data)}</>;
     }
 
-    const ProfiledParent = profile({
+    const ProfiledParent = createTestProfiler({
       Component: Parent,
       onRender() {
         const parent = screen.getByTestId("parent");

src/react/hooks/__tests__/useLoadableQuery.test.tsx

@@ -43,7 +43,12 @@ import { LoadableQueryHookFetchPolicy } from "../../types/types";
 import { QueryReference } from "../../../react";
 import { FetchMoreFunction, RefetchFunction } from "../useSuspenseQuery";
 import invariant, { InvariantError } from "ts-invariant";
-import { profile, profileHook, spyOnConsole } from "../../../testing/internal";
+import {
+  Profiler,
+  createTestProfiler,
+  spyOnConsole,
+  useTrackComponentRender,
+} from "../../../testing/internal";
 
 interface SimpleQueryData {
   greeting: string;
@@ -149,28 +154,34 @@ function usePaginatedQueryCase() {
   return { query, link, client };
 }
 
-function createDefaultProfiledComponents<TData = unknown>() {
-  const SuspenseFallback = profile({
-    Component: function SuspenseFallback() {
-      return <p>Loading</p>;
-    },
-  });
+function createDefaultProfiledComponents<
+  Snapshot extends {
+    result: UseReadQueryResult<any> | null;
+    error?: Error | null;
+  },
+  TData = Snapshot["result"] extends UseReadQueryResult<infer TData> | null
+    ? TData
+    : unknown,
+>(profiler: Profiler<Snapshot>) {
+  function SuspenseFallback() {
+    useTrackComponentRender();
+    return <p>Loading</p>;
+  }
 
-  const ReadQueryHook = profileHook<
-    UseReadQueryResult<TData>,
-    { queryRef: QueryReference<TData> }
-  >(({ queryRef }) => useReadQuery(queryRef), { displayName: "UseReadQuery" });
+  function ReadQueryHook({ queryRef }: { queryRef: QueryReference<TData> }) {
+    useTrackComponentRender();
+    profiler.mergeSnapshot({
+      result: useReadQuery(queryRef),
+    } as Partial<Snapshot>);
 
-  const ErrorFallback = profile<{ error: Error | null }, { error: Error }>({
-    Component: function Fallback({ error }) {
-      ErrorFallback.replaceSnapshot({ error });
+    return null;
+  }
 
-      return <div>Oops</div>;
-    },
-    initialSnapshot: {
-      error: null,
-    },
-  });
+  function ErrorFallback({ error }: { error: Error }) {
+    profiler.mergeSnapshot({ error } as Partial<Snapshot>);
+
+    return <div>Oops</div>;
+  }
 
   function ErrorBoundary({ children }: { children: React.ReactNode }) {
     return (
@@ -219,98 +230,120 @@ function renderWithClient(
 it("loads a query and suspends when the load query function is called", async () => {
   const { query, mocks } = useSimpleQueryCase();
 
+  const Profiler = createTestProfiler({
+    initialSnapshot: {
+      result: null as UseReadQueryResult<SimpleQueryData> | null,
+    },
+  });
+
   const { SuspenseFallback, ReadQueryHook } =
-    createDefaultProfiledComponents<SimpleQueryData>();
+    createDefaultProfiledComponents(Profiler);
 
-  const App = profile({
-    Component: () => {
-      const [loadQuery, queryRef] = useLoadableQuery(query);
+  function App() {
+    useTrackComponentRender();
+    const [loadQuery, queryRef] = useLoadableQuery(query);
 
-      return (
-        <>
-          <button onClick={() => loadQuery()}>Load query</button>
-          <Suspense fallback={<SuspenseFallback />}>
-            {queryRef && <ReadQueryHook queryRef={queryRef} />}
-          </Suspense>
-        </>
-      );
-    },
-  });
+    return (
+      <>
+        <button onClick={() => loadQuery()}>Load query</button>
+        <Suspense fallback={<SuspenseFallback />}>
+          {queryRef && <ReadQueryHook queryRef={queryRef} />}
+        </Suspense>
+      </>
+    );
+  }
 
-  const { user } = renderWithMocks(<App />, { mocks });
+  const { user } = renderWithMocks(
+    <Profiler>
+      <App />
+    </Profiler>,
+    { mocks }
+  );
 
-  expect(SuspenseFallback).not.toHaveRendered();
+  {
+    const { renderedComponents } = await Profiler.takeRender();
+
+    expect(renderedComponents).toStrictEqual([App]);
+  }
 
   await act(() => user.click(screen.getByText("Load query")));
 
-  expect(SuspenseFallback).toHaveRendered();
-  expect(ReadQueryHook).not.toHaveRendered();
-  expect(App).toHaveRenderedTimes(2);
+  {
+    const { renderedComponents } = await Profiler.takeRender();
 
-  const snapshot = await ReadQueryHook.takeSnapshot();
+    expect(renderedComponents).toStrictEqual([App, SuspenseFallback]);
+  }
 
-  expect(snapshot).toEqual({
-    data: { greeting: "Hello" },
-    error: undefined,
-    networkStatus: NetworkStatus.ready,
-  });
+  {
+    const { snapshot, renderedComponents } = await Profiler.takeRender();
+
+    expect(snapshot.result).toEqual({
+      data: { greeting: "Hello" },
+      error: undefined,
+      networkStatus: NetworkStatus.ready,
+    });
 
-  expect(SuspenseFallback).toHaveRenderedTimes(1);
-  expect(ReadQueryHook).toHaveRenderedTimes(1);
-  expect(App).toHaveRenderedTimes(3);
+    expect(renderedComponents).toStrictEqual([ReadQueryHook]);
+  }
 });
 
 it("loads a query with variables and suspends by passing variables to the loadQuery function", async () => {
   const { query, mocks } = useVariablesQueryCase();
 
-  const { SuspenseFallback, ReadQueryHook } =
-    createDefaultProfiledComponents<VariablesCaseData>();
-
-  const App = profile({
-    Component: function App() {
-      const [loadQuery, queryRef] = useLoadableQuery(query);
-
-      return (
-        <>
-          <button onClick={() => loadQuery({ id: "1" })}>Load query</button>
-          <Suspense fallback={<SuspenseFallback />}>
-            {queryRef && <ReadQueryHook queryRef={queryRef} />}
-          </Suspense>
-        </>
-      );
+  const Profiler = createTestProfiler({
+    initialSnapshot: {
+      result: null as UseReadQueryResult<VariablesCaseData> | null,
     },
   });
 
-  const { user } = renderWithMocks(<App />, { mocks });
+  const { SuspenseFallback, ReadQueryHook } =
+    createDefaultProfiledComponents(Profiler);
 
-  {
-    const { renderedComponents } = await App.takeRender();
-    expect(renderedComponents).toStrictEqual(["App"]);
+  function App() {
+    useTrackComponentRender();
+    const [loadQuery, queryRef] = useLoadableQuery(query);
+
+    return (
+      <>
+        <button onClick={() => loadQuery({ id: "1" })}>Load query</button>
+        <Suspense fallback={<SuspenseFallback />}>
+          {queryRef && <ReadQueryHook queryRef={queryRef} />}
+        </Suspense>
+      </>
+    );
   }
 
-  await act(() => user.click(screen.getByText("Load query")));
+  const { user } = renderWithMocks(
+    <Profiler>
+      <App />
+    </Profiler>,
+    { mocks }
+  );
 
   {
-    const { renderedComponents } = await App.takeRender();
-    expect(renderedComponents).toStrictEqual(["App", "SuspenseFallback"]);
+    const { renderedComponents } = await Profiler.takeRender();
+    expect(renderedComponents).toStrictEqual([App]);
   }
 
+  await act(() => user.click(screen.getByText("Load query")));
+
   {
-    const { renderedComponents } = await App.takeRender();
-    expect(renderedComponents).toStrictEqual(["UseReadQuery"]);
+    const { renderedComponents } = await Profiler.takeRender();
+    expect(renderedComponents).toStrictEqual([App, SuspenseFallback]);
   }
 
   {
-    const snapshot = await ReadQueryHook.takeSnapshot();
+    const { snapshot, renderedComponents } = await Profiler.takeRender();
 
-    expect(snapshot).toEqual({
+    expect(renderedComponents).toStrictEqual([ReadQueryHook]);
+    expect(snapshot.result).toEqual({
       data: { character: { id: "1", name: "Spider-Man" } },
       networkStatus: NetworkStatus.ready,
       error: undefined,
     });
   }
 
-  await expect(App).not.toRerender();
+  await expect(Profiler).not.toRerender();
 });
 
 it("changes variables on a query and resuspends when passing new variables to the loadQuery function", async () => {
@@ -319,7 +352,7 @@ it("changes variables on a query and resuspends when passing new variables to th
   const { SuspenseFallback, ReadQueryHook } =
     createDefaultProfiledComponents<VariablesCaseData>();
 
-  const App = profile({
+  const App = createTestProfiler({
     Component: () => {
       const [loadQuery, queryRef] = useLoadableQuery(query);
 
@@ -660,7 +693,7 @@ it("returns initial cache data followed by network data when the fetch policy is
     hello: string;
   }>();
 
-  const App = profile({
+  const App = createTestProfiler({
     Component: () => {
       const [loadQuery, queryRef] = useLoadableQuery(query, {
         fetchPolicy: "cache-and-network",