start organizing

Author: phryneas

package.json

@@ -10,7 +10,25 @@
   "exports": {
     ".": "./src/index.js"
   },
+  "dependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "jsdom": "^25.0.1"
+  },
+  "devDependencies": {
+    "@jest/globals": "^29.7.0",
+    "@tsconfig/recommended": "^1.0.7",
+    "@types/jsdom": "^21.1.7",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "expect": "^29.7.0",
+    "prettier": "^3.3.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.6.2"
+  },
   "peerDependencies": {
+    "@jest/globals": "*",
+    "expect": "*",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0"
   },

src/testing/matchers/ProfiledComponent.ts renamed to src/jest/ProfiledComponent.ts

@@ -1,11 +1,11 @@
 import type { MatcherFunction } from "expect";
-import { WaitForRenderTimeoutError } from "../internal/index.js";
+import { WaitForRenderTimeoutError } from "../profile/index.js";
 import type {
   NextRenderOptions,
   Profiler,
   ProfiledComponent,
   ProfiledHook,
-} from "../internal/index.js";
+} from "../profile/index.js";
 
 export const toRerender: MatcherFunction<[options?: NextRenderOptions]> =
   async function (actual, options) {

src/jest/index.d.ts

@@ -0,0 +1,28 @@
+import {
+  NextRenderOptions,
+  Profiler,
+  ProfiledComponent,
+  ProfiledHook,
+} from "../profile/index.js";
+
+interface ApolloCustomMatchers<R = void, T = {}> {
+  toRerender: T extends
+    | Profiler<any>
+    | ProfiledComponent<any, any>
+    | ProfiledHook<any, any>
+    ? (options?: NextRenderOptions) => Promise<R>
+    : { error: "matcher needs to be called on a ProfiledComponent instance" };
+
+  toRenderExactlyTimes: T extends
+    | Profiler<any>
+    | ProfiledComponent<any, any>
+    | ProfiledHook<any, any>
+    ? (count: number, options?: NextRenderOptions) => Promise<R>
+    : { error: "matcher needs to be called on a ProfiledComponent instance" };
+}
+
+declare global {
+  namespace jest {
+    interface Matchers<R = void, T = {}> extends ApolloCustomMatchers<R, T> {}
+  }
+}

src/jest/index.ts

@@ -0,0 +1,7 @@
+import { expect } from "@jest/globals";
+import { toRerender, toRenderExactlyTimes } from "./ProfiledComponent.js";
+
+expect.extend({
+  toRerender,
+  toRenderExactlyTimes,
+});

src/testing/internal/profile/Render.tsx renamed to src/profile/Render.tsx

@@ -30,12 +30,12 @@ export interface BaseRender {
 type Screen = typeof screen;
 /** @internal */
 export type SyncScreen = {
-  [K in keyof Screen]: K extends `find${string}` ?
-    {
-      /** @deprecated A snapshot is static, so avoid async queries! */
-      (...args: Parameters<Screen[K]>): ReturnType<Screen[K]>;
-    }
-  : Screen[K];
+  [K in keyof Screen]: K extends `find${string}`
+    ? {
+        /** @deprecated A snapshot is static, so avoid async queries! */
+        (...args: Parameters<Screen[K]>): ReturnType<Screen[K]>;
+      }
+    : Screen[K];
 };
 
 /** @internal */
@@ -102,7 +102,7 @@ export class RenderInstance<Snapshot> implements Render<Snapshot> {
 
     const virtualConsole = new VirtualConsole();
     const stackTrace = captureStackTrace("RenderInstance.get");
-    virtualConsole.on("jsdomError", (error) => {
+    virtualConsole.on("jsdomError", (error: any) => {
       throw applyStackTrace(error, stackTrace);
     });
 

src/testing/internal/profile/context.tsx renamed to src/profile/context.tsx

@@ -0,0 +1,15 @@
+import { withCleanup } from "./withCleanup.js";
+
+/**
+ * Temporarily disable act warnings.
+ *
+ * https://github.com/reactwg/react-18/discussions/102
+ */
+export function disableActWarnings() {
+  const prev = { prevActEnv: (globalThis as any).IS_REACT_ACT_ENVIRONMENT };
+  (globalThis as any).IS_REACT_ACT_ENVIRONMENT = false;
+
+  return withCleanup(prev, ({ prevActEnv }) => {
+    (globalThis as any).IS_REACT_ACT_ENVIRONMENT = prevActEnv;
+  });
+}

src/profile/disableActWarnings.ts

@@ -1,16 +1,11 @@
 import * as React from "react";
 
-import { TextEncoder, TextDecoder } from "util";
-
-global.TextEncoder ??= TextEncoder;
-// @ts-ignore
-global.TextDecoder ??= TextDecoder;
 import type { Render, BaseRender } from "./Render.js";
 import { RenderInstance } from "./Render.js";
 import { applyStackTrace, captureStackTrace } from "./traces.js";
 import type { ProfilerContextValue } from "./context.js";
 import { ProfilerContextProvider, useProfilerContext } from "./context.js";
-import { disableActWarnings } from "../disposables/index.js";
+import { disableActWarnings } from "./disableActWarnings.js";
 
 type ValidSnapshot = void | (object & { /* not a function */ call?: never });
 
@@ -163,10 +158,10 @@ export function createProfiler<Snapshot extends ValidSnapshot = void>({
         );
       }
       snapshotRef.current = snap(
-        typeof snapshotRef.current === "object" ?
-          // "cheap best effort" to prevent accidental mutation of the last snapshot
-          { ...snapshotRef.current! }
-        : snapshotRef.current!
+        typeof snapshotRef.current === "object"
+          ? // "cheap best effort" to prevent accidental mutation of the last snapshot
+            { ...snapshotRef.current! }
+          : snapshotRef.current!
       );
     } else {
       snapshotRef.current = snap;
@@ -176,9 +171,9 @@ export function createProfiler<Snapshot extends ValidSnapshot = void>({
   const mergeSnapshot: MergeSnapshot<Snapshot> = (partialSnapshot) => {
     replaceSnapshot((snapshot) => ({
       ...snapshot,
-      ...(typeof partialSnapshot === "function" ?
-        partialSnapshot(snapshot)
-      : partialSnapshot),
+      ...(typeof partialSnapshot === "function"
+        ? partialSnapshot(snapshot)
+        : partialSnapshot),
     }));
   };
 
@@ -225,8 +220,9 @@ export function createProfiler<Snapshot extends ValidSnapshot = void>({
       });
 
       const snapshot = snapshotRef.current as Snapshot;
-      const domSnapshot =
-        snapshotDOM ? window.document.body.innerHTML : undefined;
+      const domSnapshot = snapshotDOM
+        ? window.document.body.innerHTML
+        : undefined;
       const render = new RenderInstance(
         baseRender,
         snapshot,
@@ -370,21 +366,22 @@ export class WaitForRenderTimeoutError extends Error {
 type StringReplaceRenderWithSnapshot<T extends string> =
   T extends `${infer Pre}Render${infer Post}` ? `${Pre}Snapshot${Post}` : T;
 
-type ResultReplaceRenderWithSnapshot<T> =
-  T extends (...args: infer Args) => Render<infer Snapshot> ?
-    (...args: Args) => Snapshot
-  : T extends (...args: infer Args) => Promise<Render<infer Snapshot>> ?
-    (...args: Args) => Promise<Snapshot>
-  : T;
+type ResultReplaceRenderWithSnapshot<T> = T extends (
+  ...args: infer Args
+) => Render<infer Snapshot>
+  ? (...args: Args) => Snapshot
+  : T extends (...args: infer Args) => Promise<Render<infer Snapshot>>
+    ? (...args: Args) => Promise<Snapshot>
+    : T;
 
 type ProfiledHookFields<ReturnValue> =
-  ProfiledComponentFields<ReturnValue> extends infer PC ?
-    {
-      [K in keyof PC as StringReplaceRenderWithSnapshot<
-        K & string
-      >]: ResultReplaceRenderWithSnapshot<PC[K]>;
-    }
-  : never;
+  ProfiledComponentFields<ReturnValue> extends infer PC
+    ? {
+        [K in keyof PC as StringReplaceRenderWithSnapshot<
+          K & string
+        >]: ResultReplaceRenderWithSnapshot<PC[K]>;
+      }
+    : never;
 
 /** @internal */
 export interface ProfiledHook<Props, ReturnValue>

src/testing/internal/profile/index.ts renamed to src/profile/index.ts

@@ -11,16 +11,17 @@ export function captureStackTrace(callingFunction?: string | (() => {})) {
   }
 
   const callerName =
-    typeof callingFunction === "string" ? callingFunction
-    : callingFunction ? callingFunction.name
-    : undefined;
+    typeof callingFunction === "string"
+      ? callingFunction
+      : callingFunction
+        ? callingFunction.name
+        : undefined;
 
   if (callerName && stack.includes(callerName)) {
     const lines = stack.split("\n");
 
     stack = lines
       .slice(
-        // @ts-expect-error this is too old of a TS target, but node has it
         lines.findLastIndex((line: string) => line.includes(callerName)) + 1
       )
       .join("\n");

src/testing/internal/profile/profile.tsx renamed to src/profile/profile.tsx

@@ -0,0 +1,17 @@
+/** @internal */
+export function withCleanup<T extends object>(
+  item: T,
+  cleanup: (item: T) => void
+): T & Disposable {
+  return {
+    ...item,
+    [Symbol.dispose]() {
+      cleanup(item);
+      // if `item` already has a cleanup function, we also need to call the original cleanup function
+      // (e.g. if something is wrapped in `withCleanup` twice)
+      if (Symbol.dispose in item) {
+        (item as Disposable)[Symbol.dispose]();
+      }
+    },
+  };
+}