@describe-me/vitest 0.3.0 → 0.5.0-next.0

package/README.md

@@ -19,10 +19,13 @@ 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/react`, records a frame after every `fireEvent` and 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.
+  component is unmounted only after the closing frame. The setup file sets
+  React's `IS_REACT_ACT_ENVIRONMENT` where Testing Library would, so act
+  warnings match a run without describe-me. It also works without user-event
+  installed.
 
 ```ts
 import { describeMe } from '@describe-me/vitest/plugin'
@@ -44,9 +47,17 @@ export default defineConfig({
 
 Pass `describeMe({ environment: 'browser' | 'dom' })` to override the detection.
 
-The pieces can also be wired by hand, in which case tests import `render` from
-the adapter themselves (`@describe-me/react` in browser mode,
-`@describe-me/react/testing-library` in jsdom):
+A test that records no frame before the closing one (no recording `render`,
+no interaction, no `step()`) costs no snapshot and is left out of the
+manifest. `describeMe({ include, exclude })` chooses which test files are
+recorded, with picomatch globs relative to the Vitest root. `exclude` wins.
+Tests in other files still run, but record nothing. The reporter takes the
+same two options, but on its own it only filters the manifest: without the
+plugin the setup file does not know them.
+
+The pieces can also be wired by hand. Tests then import from the adapter
+themselves: `render` from `@describe-me/react` in browser mode, and `render`,
+`fireEvent` and `cleanup` from `@describe-me/react/testing-library` in jsdom:
 
 ```ts
 import DescribeMeReporter from '@describe-me/vitest/reporter'

package/dist/adapter-package-root.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The directory of the adapter package the project resolves, e.g.
+ * `/repo/node_modules/@describe-me/react/`, with posix separators and a
+ * trailing slash the way Vite ids look, or null when it cannot be resolved.
+ * It is the real path, so a workspace link points at its source directory.
+ */
+export declare function adapterPackageRoot(root: string, packageName: string): string | null;

package/dist/adapter-package-root.js

@@ -0,0 +1,40 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import { dirname, join, sep } from 'node:path';
+/** The `name` in a directory's package.json, if it has a readable one. */
+function packageNameIn(directory) {
+    const manifest = join(directory, 'package.json');
+    if (!existsSync(manifest)) {
+        return undefined;
+    }
+    try {
+        return JSON.parse(readFileSync(manifest, 'utf8')).name;
+    }
+    catch {
+        return undefined;
+    }
+}
+/**
+ * The directory of the adapter package the project resolves, e.g.
+ * `/repo/node_modules/@describe-me/react/`, with posix separators and a
+ * trailing slash the way Vite ids look, or null when it cannot be resolved.
+ * It is the real path, so a workspace link points at its source directory.
+ */
+export function adapterPackageRoot(root, packageName) {
+    let entry;
+    // The package does not export `./package.json`, so resolve its entry and walk up.
+    try {
+        entry = createRequire(join(root, 'package.json')).resolve(packageName);
+    }
+    catch {
+        return null;
+    }
+    let directory = dirname(entry);
+    while (directory !== dirname(directory)) {
+        if (packageNameIn(directory) === packageName) {
+            return `${directory.split(sep).join('/')}/`;
+        }
+        directory = dirname(directory);
+    }
+    return null;
+}

package/dist/asset-store.d.ts

@@ -0,0 +1,51 @@
+/**
+ * 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 or style chunk. Both are content-addressed, so an
+     * entry never goes stale.
+     */
+    private readonly referencesByFile;
+    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 or style chunk 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(files: 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,233 @@
+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 or style chunk. Both are content-addressed, so an
+     * entry never goes stale.
+     */
+    referencesByFile = 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 or style chunk 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(files) {
+        const stored = readdirSync(this.dir);
+        if (stored.length === 0) {
+            return;
+        }
+        const keep = new Set();
+        for (const file of files) {
+            for (const name of this.referencesIn(file)) {
+                keep.add(name);
+            }
+        }
+        for (const file of stored) {
+            if (!keep.has(file)) {
+                rmSync(join(this.dir, file), { force: true });
+            }
+        }
+    }
+    referencesIn(file) {
+        const cached = this.referencesByFile.get(file);
+        if (cached) {
+            return cached;
+        }
+        const path = join(this.outDir, file);
+        if (!isFile(path)) {
+            return [];
+        }
+        const text = readFileSync(path, 'utf8');
+        const names = Array.from(text.matchAll(ASSET_REFERENCE), (match) => match[1]);
+        this.referencesByFile.set(file, 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/compile-globs.d.ts

@@ -0,0 +1,6 @@
+import type { CompiledGlob } from './runtime-options.js';
+/**
+ * Plain `{ source, flags }` pairs, because the globs travel to the test
+ * runtime as JSON. Invalid input fails here, before any test runs.
+ */
+export declare function compileGlobs(patterns: string | string[] | undefined): CompiledGlob[];

package/dist/compile-globs.js

@@ -0,0 +1,20 @@
+import { inspect } from 'node:util';
+import picomatch from 'picomatch';
+/**
+ * Plain `{ source, flags }` pairs, because the globs travel to the test
+ * runtime as JSON. Invalid input fails here, before any test runs.
+ */
+export function compileGlobs(patterns) {
+    if (patterns === undefined) {
+        return [];
+    }
+    const list = Array.isArray(patterns) ? patterns : [patterns];
+    return list.map((pattern) => {
+        // picomatch throws its own unprefixed TypeError for an empty string.
+        if (typeof pattern !== 'string' || pattern === '') {
+            throw new Error(`describe-me: include and exclude expect non-empty glob strings, got ${inspect(pattern)}`);
+        }
+        const regExp = picomatch.makeRe(pattern, { dot: true, windows: false });
+        return { source: regExp.source, flags: regExp.flags };
+    });
+}

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/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/file-filter.d.ts

@@ -0,0 +1,7 @@
+import type { RuntimeOptions } from './runtime-options.js';
+/**
+ * Takes a path relative to the root, with posix separators. Build it once and
+ * reuse the returned function, which memoizes per file name. The test runtime
+ * imports this file, so no Node imports.
+ */
+export declare function fileFilter(options: Pick<RuntimeOptions, 'include' | 'exclude'>): (fileName: string) => boolean;