Add a new useLoadableQuery hook (#11300)

Author: jerelmiller

src/testing/internal/profile/Render.tsx

@@ -62,6 +62,8 @@ export interface Render<Snapshot> extends BaseRender {
    * ```
    */
   withinDOM: () => SyncScreen;
+
+  renderedComponents: Array<string | React.ComponentType>;
 }
 
 /** @internal */
@@ -77,7 +79,8 @@ export class RenderInstance<Snapshot> implements Render<Snapshot> {
   constructor(
     baseRender: BaseRender,
     public snapshot: Snapshot,
-    private stringifiedDOM: string | undefined
+    private stringifiedDOM: string | undefined,
+    public renderedComponents: Array<string | React.ComponentType>
   ) {
     this.id = baseRender.id;
     this.phase = baseRender.phase;

src/testing/internal/profile/context.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+
+export interface ProfilerContextValue {
+  renderedComponents: Array<React.ComponentType | string>;
+}
+
+const ProfilerContext = React.createContext<ProfilerContextValue | undefined>(
+  undefined
+);
+
+export function ProfilerContextProvider({
+  children,
+  value,
+}: {
+  children: React.ReactNode;
+  value: ProfilerContextValue;
+}) {
+  const parentContext = useProfilerContext();
+
+  if (parentContext) {
+    throw new Error("Profilers should not be nested in the same tree");
+  }
+
+  return (
+    <ProfilerContext.Provider value={value}>
+      {children}
+    </ProfilerContext.Provider>
+  );
+}
+
+export function useProfilerContext() {
+  return React.useContext(ProfilerContext);
+}

src/testing/internal/profile/index.ts

@@ -1,8 +1,15 @@
 export type {
   NextRenderOptions,
+  Profiler,
   ProfiledComponent,
   ProfiledHook,
 } from "./profile.js";
-export { profile, profileHook, WaitForRenderTimeoutError } from "./profile.js";
+export {
+  createProfiler,
+  profile,
+  profileHook,
+  useTrackRenders,
+  WaitForRenderTimeoutError,
+} from "./profile.js";
 
 export type { SyncScreen } from "./Render.js";