@describe-me/vitest 0.2.0 → 0.4.0

package/README.md

@@ -13,35 +13,59 @@ pnpm add -D @describe-me/vitest @describe-me/react describe-me
 ## Usage
 
 One line in the Vitest config registers the setup file and the reporter, and
-redirects `vitest-browser-react` imports to the recording adapter:
+redirects the test library's `render` import to the recording adapter. The
+plugin detects where the tests run:
+
+- **Browser mode** (`test.browser.enabled`): redirects `vitest-browser-react`,
+  records a frame after every `Locator` action and keyboard-level `userEvent`.
+- **DOM environments** such as jsdom (anything else): redirects
+  `@testing-library/react`, records a frame after every
+  `@testing-library/user-event` call, turns on `test.css` so imported
+  stylesheets reach the snapshots, and sets `RTL_SKIP_AUTO_CLEANUP` so the
+  component is unmounted only after the closing frame.
 
 ```ts
 import { describeMe } from '@describe-me/vitest/plugin'
 
+// browser mode
 export default defineConfig({
   plugins: [react(), describeMe()],
   test: {
     browser: { enabled: true, provider: playwright(), instances: [{ browser: 'chromium' }] },
   },
 })
+
+// jsdom
+export default defineConfig({
+  plugins: [react(), describeMe()],
+  test: { environment: 'jsdom' },
+})
 ```
 
+Pass `describeMe({ environment: 'browser' | 'dom' })` to override the detection.
+
 The pieces can also be wired by hand, in which case tests import `render` from
-`@describe-me/react` themselves:
+the adapter themselves (`@describe-me/react` in browser mode,
+`@describe-me/react/testing-library` in jsdom):
 
 ```ts
 import DescribeMeReporter from '@describe-me/vitest/reporter'
 
 export default defineConfig({
   test: {
-    setupFiles: ['@describe-me/vitest/setup'],
+    // browser mode: '@describe-me/vitest/setup'
+    setupFiles: ['@describe-me/vitest/setup-dom'],
     reporters: ['default', new DescribeMeReporter()],
+    // jsdom only: keep imported CSS and leave unmounting to describe-me
+    css: true,
+    env: { RTL_SKIP_AUTO_CLEANUP: 'true' },
   },
 })
 ```
 
 `typescript` is an optional peer: without it the docs are still generated, only
-the props tables are left out.
+the props tables are left out. `@testing-library/user-event` is an optional
+peer too, needed only in DOM environments.
 
 See the [root README](https://github.com/grzehub/describe-me#readme) for the
 full picture.

package/dist/asset-store.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Content-addressed store for the project files snapshots point at (images,
+ * fonts, `url()` targets of stylesheets), living in `<outDir>/assets`.
+ *
+ * rrweb makes most URLs absolute against the test page, whose server is gone
+ * once the tests finish; a few stay root-relative, which the viewer would
+ * resolve against itself. `rewrite()` copies each file it finds in the project
+ * and swaps its URL for `ASSET_URL_PREFIX` plus the stored name, which the
+ * viewer resolves against its own data directory.
+ */
+export declare class AssetStore {
+    private readonly outDir;
+    private readonly dir;
+    private readonly root;
+    /** Stored name per URL pathname in this run, or null when it is not a project file. */
+    private readonly names;
+    private readonly notFound;
+    /** Asset names per snapshot file. Snapshots are content-addressed, so an entry never goes stale. */
+    private readonly referencesBySnapshot;
+    constructor(outDir: string, root: string);
+    /** Forget what the previous run found: files may have changed or appeared since. */
+    startRun(): void;
+    /**
+     * Replace every URL in a serialized snapshot that points at a project file
+     * with an asset URL. rrweb has made most of them absolute against `origin`:
+     * `src`, `href`, `srcset`, `xlink:href`, `style` attributes and, in a real
+     * browser, `url()` inside stylesheets. The two it leaves root-relative are
+     * handled on their own. A `#fragment` is kept, for SVG sprites.
+     */
+    rewrite(json: string, origin: string | undefined): string;
+    /** Root-relative paths that snapshots in this run pointed at but that do not exist. */
+    missing(): string[];
+    /**
+     * Drop the assets no kept snapshot refers to. Paths are relative to the
+     * output directory, as the manifest stores them. Every kept file is scanned,
+     * not only the ones written now: snapshots of modules that were not re-run
+     * were rewritten by an earlier run.
+     */
+    collectGarbage(snapshotFiles: Iterable<string>): void;
+    private referencesIn;
+    /** The asset URL for a root-relative URL path, or null when it is not a project file. */
+    private assetUrl;
+    /** The stored name for a URL pathname, copying the file on first sight in this run. */
+    private nameFor;
+    private copyIntoStore;
+    /** Where Vite serves a URL pathname from: `/@fs/`, the project root, or its `public/` folder. */
+    private fileFor;
+}

package/dist/asset-store.js

@@ -0,0 +1,230 @@
+import { createHash } from 'node:crypto';
+import { copyFileSync, existsSync, mkdirSync, readdirSync, readFileSync, rmSync, statSync, } from 'node:fs';
+import { extname, join, resolve, sep } from 'node:path';
+import { ASSET_URL_PREFIX } from '@describe-me/core/types';
+/** A URL path inside serialized JSON runs until a quote, whitespace, `)`, `\`, `<` or `>`. */
+const URL_PATH = String.raw `/[^"'\s)\\<>]*`;
+/** A root-relative path: one slash, not the two of a protocol-relative URL. */
+const ROOT_RELATIVE_PATH = String.raw `/(?!/)[^"'\s)\\<>]*`;
+/**
+ * `url(/…)` in CSS text, with the opening quote as it looks inside JSON (`\"`,
+ * `'` or none). rrweb makes stylesheet URLs absolute through the sheet's
+ * `ownerNode`, which jsdom does not implement, so in jsdom they stay as Vite
+ * wrote them.
+ */
+const CSS_ROOT_RELATIVE_URL = new RegExp(String.raw `url\((\\"|')?(${ROOT_RELATIVE_PATH})`, 'g');
+/** rrweb makes `src` and `href` absolute, but leaves a video's `poster` as authored. */
+const ROOT_RELATIVE_POSTER = new RegExp(`"poster":"(${ROOT_RELATIVE_PATH})`, 'g');
+/** A stored asset's name: a content hash and, when the file has one, its extension. */
+const ASSET_REFERENCE = new RegExp(`${escapeRegExp(ASSET_URL_PREFIX)}([0-9a-f]{16}(?:\\.[a-z0-9]+)?)`, 'g');
+/**
+ * Dev-server paths that are never project files: Vite's client and module ids,
+ * the pre-bundled dependencies, and the pages Vitest serves in browser mode.
+ */
+const SERVER_PREFIXES = [
+    '/@vite/',
+    '/@id/',
+    '/@react-refresh',
+    '/node_modules/.vite/',
+    '/__vitest__/',
+    '/__vitest_browser__/',
+    '/__vitest_test__/',
+];
+/** Scripts, not assets: they never run in the viewer, so their URLs are left as they are. */
+const MODULE_EXTENSIONS = new Set([
+    '.js',
+    '.mjs',
+    '.cjs',
+    '.jsx',
+    '.ts',
+    '.mts',
+    '.cts',
+    '.tsx',
+    '.vue',
+    '.svelte',
+]);
+function escapeRegExp(text) {
+    return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+function isFile(path) {
+    return existsSync(path) && statSync(path).isFile();
+}
+function decodePath(pathname) {
+    try {
+        return decodeURIComponent(pathname);
+    }
+    catch {
+        return pathname;
+    }
+}
+/** Split `/logo.svg?v=2#icon` into its pathname and its fragment; the query is dropped. */
+function splitUrlPath(urlPath) {
+    const hashAt = urlPath.indexOf('#');
+    const beforeHash = hashAt === -1 ? urlPath : urlPath.slice(0, hashAt);
+    const fragment = hashAt === -1 ? '' : urlPath.slice(hashAt);
+    const queryAt = beforeHash.indexOf('?');
+    const pathname = queryAt === -1 ? beforeHash : beforeHash.slice(0, queryAt);
+    return { pathname, fragment };
+}
+function isServerPath(pathname) {
+    if (SERVER_PREFIXES.some((prefix) => pathname.startsWith(prefix))) {
+        return true;
+    }
+    return MODULE_EXTENSIONS.has(extname(pathname).toLowerCase());
+}
+/** Vite serves files outside the root as `/@fs/<absolute path>`; a Windows path keeps its drive letter. */
+function fsPathFromUrl(pathname) {
+    const path = pathname.slice('/@fs/'.length);
+    return /^[A-Za-z]:/.test(path) ? path : `/${path}`;
+}
+/**
+ * Content-addressed store for the project files snapshots point at (images,
+ * fonts, `url()` targets of stylesheets), living in `<outDir>/assets`.
+ *
+ * rrweb makes most URLs absolute against the test page, whose server is gone
+ * once the tests finish; a few stay root-relative, which the viewer would
+ * resolve against itself. `rewrite()` copies each file it finds in the project
+ * and swaps its URL for `ASSET_URL_PREFIX` plus the stored name, which the
+ * viewer resolves against its own data directory.
+ */
+export class AssetStore {
+    outDir;
+    dir;
+    root;
+    /** Stored name per URL pathname in this run, or null when it is not a project file. */
+    names = new Map();
+    notFound = new Set();
+    /** Asset names per snapshot file. Snapshots are content-addressed, so an entry never goes stale. */
+    referencesBySnapshot = new Map();
+    constructor(outDir, root) {
+        this.outDir = outDir;
+        this.dir = join(outDir, 'assets');
+        this.root = resolve(root);
+        mkdirSync(this.dir, { recursive: true });
+    }
+    /** Forget what the previous run found: files may have changed or appeared since. */
+    startRun() {
+        this.names.clear();
+        this.notFound.clear();
+    }
+    /**
+     * Replace every URL in a serialized snapshot that points at a project file
+     * with an asset URL. rrweb has made most of them absolute against `origin`:
+     * `src`, `href`, `srcset`, `xlink:href`, `style` attributes and, in a real
+     * browser, `url()` inside stylesheets. The two it leaves root-relative are
+     * handled on their own. A `#fragment` is kept, for SVG sprites.
+     */
+    rewrite(json, origin) {
+        let rewritten = json;
+        // An opaque origin serializes as "null", which is not a URL prefix at all.
+        if (origin !== undefined && /^https?:\/\//.test(origin)) {
+            const onOrigin = new RegExp(`${escapeRegExp(origin)}(${URL_PATH})`, 'g');
+            rewritten = rewritten.replace(onOrigin, (url, urlPath) => {
+                return this.assetUrl(urlPath) ?? url;
+            });
+        }
+        rewritten = rewritten.replace(CSS_ROOT_RELATIVE_URL, (url, quote, urlPath) => {
+            const asset = this.assetUrl(urlPath);
+            return asset === null ? url : `url(${quote ?? ''}${asset}`;
+        });
+        return rewritten.replace(ROOT_RELATIVE_POSTER, (poster, urlPath) => {
+            const asset = this.assetUrl(urlPath);
+            return asset === null ? poster : `"poster":"${asset}`;
+        });
+    }
+    /** Root-relative paths that snapshots in this run pointed at but that do not exist. */
+    missing() {
+        return Array.from(this.notFound).sort();
+    }
+    /**
+     * Drop the assets no kept snapshot refers to. Paths are relative to the
+     * output directory, as the manifest stores them. Every kept file is scanned,
+     * not only the ones written now: snapshots of modules that were not re-run
+     * were rewritten by an earlier run.
+     */
+    collectGarbage(snapshotFiles) {
+        const stored = readdirSync(this.dir);
+        if (stored.length === 0) {
+            return;
+        }
+        const keep = new Set();
+        for (const snapshotFile of snapshotFiles) {
+            for (const name of this.referencesIn(snapshotFile)) {
+                keep.add(name);
+            }
+        }
+        for (const file of stored) {
+            if (!keep.has(file)) {
+                rmSync(join(this.dir, file), { force: true });
+            }
+        }
+    }
+    referencesIn(snapshotFile) {
+        const cached = this.referencesBySnapshot.get(snapshotFile);
+        if (cached) {
+            return cached;
+        }
+        const path = join(this.outDir, snapshotFile);
+        if (!isFile(path)) {
+            return [];
+        }
+        const json = readFileSync(path, 'utf8');
+        const names = Array.from(json.matchAll(ASSET_REFERENCE), (match) => match[1]);
+        this.referencesBySnapshot.set(snapshotFile, names);
+        return names;
+    }
+    /** The asset URL for a root-relative URL path, or null when it is not a project file. */
+    assetUrl(urlPath) {
+        const { pathname, fragment } = splitUrlPath(urlPath);
+        const name = this.nameFor(pathname);
+        if (name === null) {
+            return null;
+        }
+        return `${ASSET_URL_PREFIX}${name}${fragment}`;
+    }
+    /** The stored name for a URL pathname, copying the file on first sight in this run. */
+    nameFor(pathname) {
+        const known = this.names.get(pathname);
+        if (known !== undefined) {
+            return known;
+        }
+        const name = this.copyIntoStore(decodePath(pathname));
+        this.names.set(pathname, name);
+        return name;
+    }
+    copyIntoStore(pathname) {
+        if (isServerPath(pathname)) {
+            return null;
+        }
+        const file = this.fileFor(pathname);
+        // Page links such as `/`, `/#` or `/about` resolve to nothing and are not
+        // assets either. Only a path that names a file is worth reporting.
+        if (!file) {
+            if (extname(pathname) !== '') {
+                this.notFound.add(pathname);
+            }
+            return null;
+        }
+        const hash = createHash('sha1').update(readFileSync(file)).digest('hex').slice(0, 16);
+        const extension = extname(file).toLowerCase();
+        const name = /^\.[a-z0-9]+$/.test(extension) ? `${hash}${extension}` : hash;
+        const target = join(this.dir, name);
+        if (!existsSync(target)) {
+            copyFileSync(file, target);
+        }
+        return name;
+    }
+    /** Where Vite serves a URL pathname from: `/@fs/`, the project root, or its `public/` folder. */
+    fileFor(pathname) {
+        if (pathname.startsWith('/@fs/')) {
+            const path = fsPathFromUrl(pathname);
+            return isFile(path) ? path : undefined;
+        }
+        const candidates = [
+            resolve(this.root, `.${pathname}`),
+            resolve(this.root, 'public', `.${pathname}`),
+        ];
+        // A decoded `%2F..` must not reach outside the project.
+        return candidates.find((path) => path.startsWith(this.root + sep) && isFile(path));
+    }
+}

package/dist/collect-component-docs.d.ts

@@ -3,10 +3,15 @@ import type { ComponentDoc } from '@describe-me/core/types';
 export interface ComponentEntry {
     testFile: string;
     componentName: string;
+    /**
+     * The module that defines the component, relative to the root, when the
+     * plugin registered its exports. Otherwise the test's imports are searched.
+     */
+    componentFile?: string;
 }
 /**
- * Document every component the tests rendered: find its source file through the
- * test's imports, then read its props from TypeScript. One program covers all of
- * them; a component that cannot be found or read is left out of the result.
+ * Document every component the tests rendered: find its source file, then read
+ * its props from TypeScript. One program covers all of them; a component that
+ * cannot be found or read is left out of the result.
  */
 export declare function collectComponentDocs(root: string, entries: Iterable<ComponentEntry>): Record<string, ComponentDoc>;

package/dist/collect-component-docs.js

@@ -1,16 +1,16 @@
-import { relative, sep } from 'node:path';
+import { relative, resolve, sep } from 'node:path';
 import ts from 'typescript';
 import { extractProps } from './extract-props.js';
 import { loadCompilerOptions } from './load-compiler-options.js';
 import { resolveComponentFile } from './resolve-component-file.js';
 /**
- * Document every component the tests rendered: find its source file through the
- * test's imports, then read its props from TypeScript. One program covers all of
- * them; a component that cannot be found or read is left out of the result.
+ * Document every component the tests rendered: find its source file, then read
+ * its props from TypeScript. One program covers all of them; a component that
+ * cannot be found or read is left out of the result.
  */
 export function collectComponentDocs(root, entries) {
     const options = loadCompilerOptions(root);
-    const resolved = resolveAll(entries, options);
+    const resolved = resolveAll(root, Array.from(entries), options);
     if (resolved.size === 0) {
         return {};
     }
@@ -28,9 +28,13 @@ export function collectComponentDocs(root, entries) {
     }
     return docs;
 }
-/** One source file per component name; the same component is looked up once. */
-function resolveAll(entries, options) {
-    const resolved = new Map();
+/**
+ * One source file per component name. Files the plugin registered come first,
+ * because the test's imports are only a guess; among them the first one seen
+ * for a name wins. The remaining names are looked up through the imports.
+ */
+function resolveAll(root, entries, options) {
+    const resolved = registeredComponents(root, entries);
     for (const entry of entries) {
         if (resolved.has(entry.componentName)) {
             continue;
@@ -42,6 +46,31 @@ function resolveAll(entries, options) {
     }
     return resolved;
 }
+/**
+ * The components whose file the adapter reported. Docs are keyed by name, so
+ * two components exported under the same name from different files cannot
+ * both be documented: the first stays, and the clash is reported once.
+ */
+function registeredComponents(root, entries) {
+    const resolved = new Map();
+    const clashes = new Set();
+    for (const { componentName, componentFile } of entries) {
+        if (componentFile === undefined) {
+            continue;
+        }
+        const file = resolve(root, componentFile);
+        const known = resolved.get(componentName);
+        if (!known) {
+            resolved.set(componentName, { file, exportName: componentName });
+            continue;
+        }
+        if (known.file !== file && !clashes.has(componentName)) {
+            clashes.add(componentName);
+            console.warn(`[describe-me] two components are named ${componentName}: ${toPosix(relative(root, known.file))} and ${componentFile}. Only the first is documented.`);
+        }
+    }
+    return resolved;
+}
 /** The manifest is read in a browser, where paths are posix whatever wrote them. */
 function toPosix(path) {
     return path.split(sep).join('/');

package/dist/component-entries.js

@@ -5,7 +5,11 @@ export function componentEntries(modules, root) {
     for (const mod of modules) {
         for (const test of mod.tests) {
             if (test.component) {
-                entries.push({ testFile: resolve(root, mod.id), componentName: test.component.name });
+                entries.push({
+                    testFile: resolve(root, mod.id),
+                    componentName: test.component.name,
+                    componentFile: test.component.file,
+                });
             }
         }
     }

package/dist/element-label.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A readable target for a frame label, e.g. `button "show details"`.
+ * Testing Library hands interactions a real `Element` rather than a Vitest
+ * locator, so the label is read off the element instead of a selector string.
+ */
+export declare function elementLabel(target: unknown): string | undefined;

package/dist/element-label.js

@@ -0,0 +1,34 @@
+/** Attributes that name an element better than its text, in order of preference. */
+const NAME_ATTRIBUTES = ['aria-label', 'name', 'placeholder', 'title'];
+function roleOf(element) {
+    const explicit = element.getAttribute('role');
+    if (explicit) {
+        return explicit;
+    }
+    const tag = element.tagName.toLowerCase();
+    if (tag === 'input') {
+        return element.getAttribute('type') ?? 'input';
+    }
+    return tag;
+}
+function nameOf(element) {
+    for (const attribute of NAME_ATTRIBUTES) {
+        const value = element.getAttribute(attribute);
+        if (value) {
+            return value;
+        }
+    }
+    return (element.textContent ?? '').trim().slice(0, 40);
+}
+/**
+ * A readable target for a frame label, e.g. `button "show details"`.
+ * Testing Library hands interactions a real `Element` rather than a Vitest
+ * locator, so the label is read off the element instead of a selector string.
+ */
+export function elementLabel(target) {
+    if (typeof Element === 'undefined' || !(target instanceof Element)) {
+        return undefined;
+    }
+    const name = nameOf(target);
+    return name ? `${roleOf(target)} "${name}"` : roleOf(target);
+}

package/dist/extract-props.js

@@ -1,6 +1,8 @@
 import ts from 'typescript';
 /** Type names that mean "renderable children" once TypeScript has printed them. */
 const NODE_TYPE_NAMES = ['ReactNode', 'ReactElement', 'Element'];
+/** Calls that wrap a component function without changing its props. */
+const COMPONENT_WRAPPERS = ['forwardRef', 'memo'];
 /**
  * Read a component's props from its TypeScript type: one PropDoc per own prop,
  * with the literal choices and the default from the destructuring pattern.
@@ -33,23 +35,46 @@ export function extractProps(program, file, exportName) {
         .filter(isDeclaredInProject)
         .map((prop) => toPropDoc(checker, prop, declaration, defaults));
 }
-/** The exported symbol behind `exportName`, with `export { X } from` aliases followed. */
+/**
+ * The exported symbol behind `exportName`, with `export { X } from` aliases
+ * followed. A default export also answers to its local name, which is the name
+ * the plugin registers it under: `export default function Button` is `Button`.
+ */
 function exportedSymbol(checker, sourceFile, exportName) {
     const moduleSymbol = checker.getSymbolAtLocation(sourceFile);
     if (!moduleSymbol) {
         return undefined;
     }
-    const exported = checker.getExportsOfModule(moduleSymbol).find((sym) => sym.name === exportName);
-    if (exported && exported.flags & ts.SymbolFlags.Alias) {
-        return checker.getAliasedSymbol(exported);
+    const exports = checker.getExportsOfModule(moduleSymbol);
+    const exported = exports.find((sym) => sym.name === exportName) ??
+        exports.find((sym) => {
+            return sym.name === 'default' && localNameOf(followAlias(checker, sym)) === exportName;
+        });
+    return exported && followAlias(checker, exported);
+}
+function followAlias(checker, symbol) {
+    if (symbol.flags & ts.SymbolFlags.Alias) {
+        return checker.getAliasedSymbol(symbol);
     }
-    return exported;
+    return symbol;
+}
+/** The name a symbol is declared under, which differs from its export name for `default`. */
+function localNameOf(symbol) {
+    const declaration = symbol.declarations?.[0];
+    const name = declaration && ts.getNameOfDeclaration(declaration);
+    return name && ts.isIdentifier(name) ? name.text : undefined;
 }
-/** The first call signature of the export, or null when it is not callable (not a component). */
+/**
+ * The call signature props are read from, or null when the export is not
+ * callable (not a component). A plain signature beats a generic one:
+ * styled-components 6 puts a generic `as`-aware signature first, whose props
+ * TypeScript cannot list until `as` is known, and inherits a plain one.
+ */
 function componentSignature(checker, component, declaration) {
     const type = checker.getTypeOfSymbolAtLocation(component, declaration);
-    const [signature] = type.getCallSignatures();
-    return signature ?? null;
+    const signatures = type.getCallSignatures();
+    const plain = signatures.find((signature) => !signature.typeParameters?.length);
+    return plain ?? signatures[0] ?? null;
 }
 /**
  * Drop props inherited from a library type. `Omit<ButtonHTMLAttributes<…>, …>`
@@ -61,14 +86,12 @@ function isDeclaredInProject(prop) {
     });
 }
 function toPropDoc(checker, prop, location, defaults) {
-    // An optional prop carries `| undefined`, which says nothing the `required`
-    // flag does not already say and makes every printed type noisier.
-    const type = checker.getNonNullableType(checker.getTypeOfSymbolAtLocation(prop, location));
+    const type = propType(checker, prop, location);
     const description = ts.displayPartsToString(prop.getDocumentationComment(checker));
     const shape = classify(checker, type);
     return {
         name: prop.name,
-        type: declaredTypeText(prop) ??
+        type: declaredTypeNode(prop)?.getText() ??
             checker.typeToString(type, undefined, ts.TypeFormatFlags.NoTruncation),
         required: !(prop.flags & ts.SymbolFlags.Optional),
         defaultValue: defaults.get(prop.name),
@@ -77,15 +100,42 @@ function toPropDoc(checker, prop, location, defaults) {
         description: description || undefined,
     };
 }
+/**
+ * The type a prop is classified by. An optional prop carries `| undefined`,
+ * which says nothing the `required` flag does not already say and makes every
+ * printed type noisier, so it is dropped.
+ *
+ * A generic component (`<T extends ElementType>(props: Props<T>)`) leaves prop
+ * types that still depend on `T`, such as `Props<T>['variant']`, which cannot
+ * be classified. The type the prop was declared with (`'primary' | …`) usually
+ * does not depend on `T`, and is used instead. One that does, such as
+ * `component?: T`, stays generic and is classified as `other`.
+ */
+function propType(checker, prop, location) {
+    const atLocation = checker.getNonNullableType(checker.getTypeOfSymbolAtLocation(prop, location));
+    const node = declaredTypeNode(prop);
+    if (!isGeneric(atLocation) || !node) {
+        return atLocation;
+    }
+    const declared = checker.getTypeFromTypeNode(node);
+    return isGeneric(declared) ? atLocation : checker.getNonNullableType(declared);
+}
+/** Whether a type still depends on a type parameter: `T`, `Props<T>['size']`, `T & {}`. */
+function isGeneric(type) {
+    if (type.flags & ts.TypeFlags.Instantiable) {
+        return true;
+    }
+    return type.isUnionOrIntersection() && type.types.some(isGeneric);
+}
 /**
  * The type as the author wrote it (`ReactNode`), when the prop has an
  * annotation. The checker would otherwise print the expanded alias, which for
  * ReactNode is a union longer than the table column.
  */
-function declaredTypeText(prop) {
+function declaredTypeNode(prop) {
     for (const declaration of prop.declarations ?? []) {
         if (ts.isPropertySignature(declaration) && declaration.type) {
-            return declaration.type.getText();
+            return declaration.type;
         }
     }
     return undefined;
@@ -160,9 +210,31 @@ function functionOf(declaration) {
     }
     return undefined;
 }
+/**
+ * The function an expression evaluates to, seen through the wrappers a
+ * component is commonly written with: `forwardRef(fn)`, `React.memo(fn)`,
+ * `memo(forwardRef<A, B>(fn))`, and `as` / `satisfies` / parentheses.
+ */
 function asFunction(expression) {
     if (ts.isArrowFunction(expression) || ts.isFunctionExpression(expression)) {
         return expression;
     }
-    return undefined;
+    if (ts.isParenthesizedExpression(expression) ||
+        ts.isAsExpression(expression) ||
+        ts.isSatisfiesExpression(expression) ||
+        ts.isTypeAssertionExpression(expression) ||
+        ts.isNonNullExpression(expression)) {
+        return asFunction(expression.expression);
+    }
+    const [wrapped] = isComponentWrapperCall(expression) ? expression.arguments : [];
+    return wrapped ? asFunction(wrapped) : undefined;
+}
+/** `forwardRef(…)` or `memo(…)`, called bare or on a namespace such as `React`. */
+function isComponentWrapperCall(expression) {
+    if (!ts.isCallExpression(expression)) {
+        return false;
+    }
+    const callee = expression.expression;
+    const name = ts.isPropertyAccessExpression(callee) ? callee.name : callee;
+    return ts.isIdentifier(name) && COMPONENT_WRAPPERS.includes(name.text);
 }

package/dist/patch-testing-library-user-event.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Wrap Testing Library's userEvent in place so each call records a frame.
+ * It comes in two shapes, the direct API (`userEvent.click(el)`) and an
+ * instance from `userEvent.setup()`, and the first delegates to the second,
+ * so both are patched and `recordAction`'s depth guard keeps one gesture to
+ * one frame. Safe to call more than once.
+ */
+export declare function patchTestingLibraryUserEvent(): void;