@describe-me/vitest 0.5.0-next.1 → 0.5.0-next.3

package/dist/font-usage.d.ts

@@ -0,0 +1,26 @@
+/** A `var()` in the place of a family. */
+export interface FontVarReference {
+    /** The custom property, such as `--font-body`. */
+    name: string;
+    /** The text after its first comma, when there is one. */
+    fallback?: string;
+}
+/** What a stylesheet or a `style` attribute says about fonts. */
+export interface FontUsage {
+    /** The first family of each `font-family` and `font` declaration, unless it is a `var()`. */
+    families: string[];
+    /** Each `var()` in the place of a first family. */
+    varRefs: FontVarReference[];
+    /** Every custom property definition, in source order. */
+    variables: Map<string, string[]>;
+    /** The families of `@font-face` rules. */
+    declared: string[];
+    /** `@import` targets as written. */
+    imports: string[];
+}
+/**
+ * The fonts that CSS text uses, defines as custom properties, declares with
+ * `@font-face` and imports. Reads a stylesheet or the bare text of a `style`
+ * attribute. Only `font-family`, `font` and custom properties count.
+ */
+export declare function fontUsage(css: string): FontUsage;

package/dist/font-usage.js

@@ -0,0 +1,163 @@
+import { cssReferences } from '@describe-me/core/css-references';
+import { fontFamilyList } from './font-family-list.js';
+import { fontShorthandFamilies } from './font-shorthand-families.js';
+const IMPORTANT = /!\s*important\s*$/i;
+function commentEnd(css, open) {
+    const close = css.indexOf('*/', open + 2);
+    return close === -1 ? css.length : close + 2;
+}
+function stringEnd(css, open) {
+    let index = open + 1;
+    while (index < css.length && css[index] !== css[open]) {
+        index += css[index] === '\\' ? 2 : 1;
+    }
+    return index + 1;
+}
+function piecesOf(css) {
+    const pieces = [];
+    let text = '';
+    let copied = 0;
+    let parens = 0;
+    let index = 0;
+    while (index < css.length) {
+        const char = css[index];
+        if (char === '/' && css[index + 1] === '*') {
+            text += `${css.slice(copied, index)} `;
+            index = commentEnd(css, index);
+            copied = index;
+        }
+        else if (char === '\\') {
+            index += 2;
+        }
+        else if (char === '"' || char === "'") {
+            index = stringEnd(css, index);
+        }
+        else if (char === '(') {
+            parens++;
+            index++;
+        }
+        else if (char === ')') {
+            parens = Math.max(0, parens - 1);
+            index++;
+        }
+        else if (parens === 0 && (char === '{' || char === '}' || char === ';')) {
+            pieces.push({ text: text + css.slice(copied, index), end: char });
+            text = '';
+            index++;
+            copied = index;
+        }
+        else {
+            index++;
+        }
+    }
+    pieces.push({ text: text + css.slice(copied), end: '' });
+    return pieces;
+}
+/** `var(--x)` or `var(--x, fallback)` as a whole, or null. */
+function varReference(text) {
+    if (text.slice(0, 4).toLowerCase() !== 'var(' || !text.endsWith(')')) {
+        return null;
+    }
+    const inner = text.slice(4, -1);
+    let depth = 0;
+    let comma = -1;
+    for (let i = 0; i < inner.length && comma === -1; i++) {
+        if (inner[i] === '(') {
+            depth++;
+        }
+        else if (inner[i] === ')') {
+            depth--;
+        }
+        else if (inner[i] === ',' && depth === 0) {
+            comma = i;
+        }
+        // A `)` that closes `var(` before the end: `var(--a) var(--b)` is no single reference.
+        if (depth < 0) {
+            return null;
+        }
+    }
+    const name = (comma === -1 ? inner : inner.slice(0, comma)).trim();
+    if (!name.startsWith('--')) {
+        return null;
+    }
+    const fallback = comma === -1 ? '' : inner.slice(comma + 1).trim();
+    return fallback === '' ? { name } : { name, fallback };
+}
+function addFamily(usage, family) {
+    if (family === undefined) {
+        return;
+    }
+    const reference = varReference(family);
+    if (reference) {
+        usage.varRefs.push(reference);
+    }
+    else {
+        usage.families.push(family);
+    }
+}
+function addFontShorthand(usage, value) {
+    const reference = varReference(value);
+    if (reference) {
+        usage.varRefs.push(reference);
+        return;
+    }
+    addFamily(usage, fontShorthandFamilies(value)?.[0]);
+}
+function addDeclaration(usage, text, inFontFace) {
+    const colon = text.indexOf(':');
+    if (colon === -1) {
+        return;
+    }
+    const property = text.slice(0, colon).trim();
+    const name = property.toLowerCase();
+    const value = text
+        .slice(colon + 1)
+        .trim()
+        .replace(IMPORTANT, '')
+        .trim();
+    if (inFontFace) {
+        if (name === 'font-family') {
+            usage.declared.push(...fontFamilyList(value).slice(0, 1));
+        }
+        return;
+    }
+    if (property.startsWith('--')) {
+        usage.variables.set(property, [...(usage.variables.get(property) ?? []), value]);
+    }
+    else if (name === 'font-family') {
+        addFamily(usage, fontFamilyList(value)[0]);
+    }
+    else if (name === 'font') {
+        addFontShorthand(usage, value);
+    }
+}
+/**
+ * The fonts that CSS text uses, defines as custom properties, declares with
+ * `@font-face` and imports. Reads a stylesheet or the bare text of a `style`
+ * attribute. Only `font-family`, `font` and custom properties count.
+ */
+export function fontUsage(css) {
+    const usage = {
+        families: [],
+        varRefs: [],
+        variables: new Map(),
+        declared: [],
+        imports: cssReferences(css)
+            .filter((reference) => reference.kind === 'import')
+            .map((reference) => reference.url),
+    };
+    // One entry per open block: whether it is, or sits inside, an `@font-face`.
+    const fontFace = [];
+    for (const piece of piecesOf(css)) {
+        const inFontFace = fontFace.at(-1) ?? false;
+        if (piece.end === '{') {
+            fontFace.push(inFontFace || piece.text.trim().toLowerCase() === '@font-face');
+            continue;
+        }
+        addDeclaration(usage, piece.text, inFontFace);
+        if (piece.end === '}') {
+            fontFace.pop();
+        }
+    }
+    return usage;
+}

package/dist/head-stylesheets.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The CSS of preview head HTML: the body of each `<style>` and the `href` of
+ * each `<link rel="stylesheet">`. Comments and scripts are skipped.
+ */
+export declare function headStylesheets(html: string): {
+    styles: string[];
+    links: string[];
+};

package/dist/head-stylesheets.js

@@ -0,0 +1,51 @@
+// The same patterns as RAW_TEXT, START_TAG and ATTRIBUTE in rewrite-head-references.ts.
+const RAW_TEXT = /<!--[\s\S]*?--!?>|<script\b[\s\S]*?<\/script\b[^>]*>|(<style\b[^>]*>)([\s\S]*?)(<\/style\b[^>]*>)/gi;
+const START_TAG = /(<[a-z][^\s/>]*)((?:[^>"']|"[^"]*"|'[^']*')*>)/gi;
+const ATTRIBUTE = /([^\s"'<>/=]+)(?:(\s*=\s*)("[^"]*"|'[^']*'|[^\s"'=<>`]+))?/g;
+/** The attributes of a start tag by lowercase name, unquoted and with `&amp;` decoded. */
+function attributesOf(text) {
+    const attributes = new Map();
+    for (const [, name, , value] of text.matchAll(ATTRIBUTE)) {
+        if (value === undefined) {
+            continue;
+        }
+        const quoted = value.startsWith('"') || value.startsWith("'");
+        const unquoted = quoted ? value.slice(1, -1) : value;
+        attributes.set(name.toLowerCase(), unquoted.replaceAll('&amp;', '&'));
+    }
+    return attributes;
+}
+function stylesheetLinksIn(html) {
+    const links = [];
+    for (const [, name, text] of html.matchAll(START_TAG)) {
+        if (name.slice(1).toLowerCase() !== 'link') {
+            continue;
+        }
+        const attributes = attributesOf(text);
+        const rel = (attributes.get('rel') ?? '').toLowerCase().split(/\s+/);
+        const href = attributes.get('href');
+        if (rel.includes('stylesheet') && href !== undefined) {
+            links.push(href);
+        }
+    }
+    return links;
+}
+/**
+ * The CSS of preview head HTML: the body of each `<style>` and the `href` of
+ * each `<link rel="stylesheet">`. Comments and scripts are skipped.
+ */
+export function headStylesheets(html) {
+    const styles = [];
+    const links = [];
+    let scanned = 0;
+    for (const match of html.matchAll(RAW_TEXT)) {
+        const [text, styleStart, css] = match;
+        links.push(...stylesheetLinksIn(html.slice(scanned, match.index)));
+        if (styleStart !== undefined) {
+            styles.push(css);
+        }
+        scanned = match.index + text.length;
+    }
+    links.push(...stylesheetLinksIn(html.slice(scanned)));
+    return { styles, links };
+}

package/dist/plugin.d.ts

@@ -1,4 +1,5 @@
 import type { ViteUserConfig } from 'vitest/config';
+import type { RenderFrameMode } from '@describe-me/core/types';
 /** Where the tests run: Vitest browser mode, or a simulated DOM such as jsdom. */
 export type DescribeMeEnvironment = 'browser' | 'dom';
 export interface DescribeMeOptions {
@@ -41,6 +42,12 @@ export interface DescribeMeOptions {
      * Project files it links are copied into the output directory. Default: none.
      */
     previewHead?: string;
+    /**
+     * When the render frame is taken: `'eager'` right after mount, `'lazy'`
+     * before the next interaction, `{ pending }` once nothing matches the
+     * selector. Default: `'eager'`.
+     */
+    renderFrame?: RenderFrameMode;
 }
 type VitePlugin = NonNullable<ViteUserConfig['plugins']>[number];
 /**

package/dist/plugin.js

@@ -5,6 +5,7 @@ import { registerExports } from './register-exports.js';
 import DescribeMeReporter from './reporter.js';
 import { RUNTIME_OPTIONS_KEY } from './runtime-options.js';
 import { styledComponentsBrowserBuild } from './styled-components-browser-build.js';
+import { validateRenderFrame } from './validate-render-frame.js';
 /** For each framework and environment: the render module tests import, and our adapter that wraps it. */
 const RENDER_MODULES = {
     react: {
@@ -101,11 +102,12 @@ export function describeMe(options = {}) {
             }
             const environment = options.environment ?? detectEnvironment(userConfig);
             renderModule = RENDER_MODULES[framework][environment];
-            // Compiled here, so invalid globs fail before any test runs. Vite
+            // Checked here, so invalid options fail before any test runs. Vite
             // deep-merges `provide`, so the user's own keys survive.
             const runtimeOptions = {
                 include: compileGlobs(options.include),
                 exclude: compileGlobs(options.exclude),
+                renderFrame: validateRenderFrame(options.renderFrame),
             };
             const provide = { [RUNTIME_OPTIONS_KEY]: runtimeOptions };
             const reporter = new DescribeMeReporter({

package/dist/print-diagnostics.d.ts

@@ -1,7 +1,8 @@
 import type { Manifest } from '@describe-me/core/types';
 /**
  * Warn, one line per kind, about what the manifest could not document. Prints
- * nothing when everything is named, documented and loadable. The viewer shows
- * the same list in its header.
+ * nothing when everything is named, documented and loadable, every font is
+ * loaded and no stylesheet comes from a remote host. The viewer shows the same
+ * list in its header.
  */
 export declare function printDiagnostics(manifest: Manifest): void;

package/dist/print-diagnostics.js

@@ -14,11 +14,12 @@ function plural(count, one, many) {
 }
 /**
  * Warn, one line per kind, about what the manifest could not document. Prints
- * nothing when everything is named, documented and loadable. The viewer shows
- * the same list in its header.
+ * nothing when everything is named, documented and loadable, every font is
+ * loaded and no stylesheet comes from a remote host. The viewer shows the same
+ * list in its header.
  */
 export function printDiagnostics(manifest) {
-    const { anonymous, undocumented, assetsMissing } = manifestDiagnostics(manifest);
+    const { anonymous, undocumented, assetsMissing, fontsMissing, remoteStylesheets } = manifestDiagnostics(manifest);
     if (anonymous.length > 0) {
         console.warn(`describe-me: ${plural(anonymous.length, 'test renders', 'tests render')} an anonymous component; export it from a project module or give it a displayName`);
     }
@@ -28,4 +29,13 @@ export function printDiagnostics(manifest) {
     if (assetsMissing.length > 0) {
         console.warn(`describe-me: ${plural(assetsMissing.length, 'asset was', 'assets were')} not found in the project and will not load in the viewer: ${listed(assetsMissing)}`);
     }
+    if (fontsMissing.length > 0) {
+        const families = fontsMissing.map((font) => `${font.family} (${plural(font.tests, 'test', 'tests')})`);
+        const pronoun = fontsMissing.length === 1 ? 'it' : 'them';
+        console.warn(`describe-me: ${plural(fontsMissing.length, 'font family is', 'font families are')} used but never loaded: ${listed(families)} — add ${pronoun} to previewHead`);
+    }
+    if (remoteStylesheets.length > 0) {
+        const hosts = remoteStylesheets.map((stylesheet) => `${stylesheet.host} (${plural(stylesheet.frames, 'frame', 'frames')})`);
+        console.warn(`describe-me: frames load stylesheets from ${plural(remoteStylesheets.length, 'remote host', 'remote hosts')}, which the viewer fetches from the network: ${listed(hosts)}`);
+    }
 }

package/dist/read-runtime-options.js

@@ -2,5 +2,9 @@ import { inject } from 'vitest';
 import { RUNTIME_OPTIONS_KEY } from './runtime-options.js';
 /** Without the plugin nothing is provided, so a hand-wired setup keeps recording every test. */
 export function readRuntimeOptions() {
-    return inject(RUNTIME_OPTIONS_KEY) ?? { include: [], exclude: [] };
+    return (inject(RUNTIME_OPTIONS_KEY) ?? {
+        include: [],
+        exclude: [],
+        renderFrame: 'eager',
+    });
 }

package/dist/record-action.js

@@ -1,22 +1,32 @@
 import { recorder } from '@describe-me/core';
 /**
- * Nesting depth of interactions currently in flight. `userEvent.click(el)`
- * delegates to `locator.click()`, and `copy()` delegates to `keyboard()`, so
- * without this guard one gesture would produce two frames.
+ * Nesting depth of the interactions in flight, and the test they started in.
+ * `userEvent.click(el)` delegates to `locator.click()`, and `copy()` delegates
+ * to `keyboard()`, so without this guard one gesture would produce two
+ * frames. Keyed to the recorder's generation, so an interaction that an ended
+ * test left running cannot swallow the next test's frame.
  */
-let depth = 0;
+const nesting = { generation: -1, depth: 0 };
 /** Run one user interaction and record a frame for it, but only for the outermost call. */
 export async function recordAction(label, run) {
-    depth++;
+    const generation = recorder.generation;
+    if (generation !== nesting.generation) {
+        nesting.generation = generation;
+        nesting.depth = 0;
+    }
+    recorder.beforeInteraction();
+    nesting.depth++;
     let result;
     try {
         result = await run();
     }
     finally {
-        depth--;
+        if (generation === nesting.generation) {
+            nesting.depth--;
+        }
     }
-    if (depth === 0) {
-        await recorder.capture('action', label);
+    if (generation === nesting.generation && nesting.depth === 0) {
+        await recorder.capture('action', label, undefined, { generation });
     }
     return result;
 }

package/dist/register-recording-hooks.d.ts

@@ -1,9 +1,10 @@
 import type { RuntimeOptions } from './runtime-options.js';
 /**
  * The per-test lifecycle shared by every environment: begin a recording, take
- * the closing frame, hand the frames to the reporter via task.meta, and only
- * then let adapters unmount. Teardown runs for unrecorded tests too, because
- * Testing Library's auto-cleanup is off in jsdom. Concurrent tests would share
- * the one recorder, so they are not recorded.
+ * a deferred render frame or else the closing frame, hand the frames to the
+ * reporter via task.meta, and only then let adapters unmount. Teardown runs
+ * for unrecorded tests too, because Testing Library's auto-cleanup is off in
+ * jsdom. Concurrent tests would share the one recorder, so they are not
+ * recorded.
  */
 export declare function registerRecordingHooks(options: RuntimeOptions): void;

package/dist/register-recording-hooks.js

@@ -3,14 +3,16 @@ import { META_KEY, recorder } from '@describe-me/core';
 import { fileFilter } from './file-filter.js';
 /**
  * The per-test lifecycle shared by every environment: begin a recording, take
- * the closing frame, hand the frames to the reporter via task.meta, and only
- * then let adapters unmount. Teardown runs for unrecorded tests too, because
- * Testing Library's auto-cleanup is off in jsdom. Concurrent tests would share
- * the one recorder, so they are not recorded.
+ * a deferred render frame or else the closing frame, hand the frames to the
+ * reporter via task.meta, and only then let adapters unmount. Teardown runs
+ * for unrecorded tests too, because Testing Library's auto-cleanup is off in
+ * jsdom. Concurrent tests would share the one recorder, so they are not
+ * recorded.
  */
 export function registerRecordingHooks(options) {
     const isRecordedFile = fileFilter(options);
     let warnedConcurrent = false;
+    recorder.configure({ renderFrame: options.renderFrame });
     beforeEach((context) => {
         if (context.task.concurrent) {
             if (!warnedConcurrent) {
@@ -26,7 +28,11 @@ export function registerRecordingHooks(options) {
     afterEach(async (context) => {
         try {
             if (recorder.isActive) {
-                await recorder.capture('end', 'end of test');
+                const tookRender = await recorder.flush();
+                // A render frame taken this late already shows how the test ended.
+                if (!tookRender) {
+                    await recorder.capture('end', 'end of test');
+                }
                 const record = recorder.end();
                 if (record.frames.length > 0) {
                     ;

package/dist/reporter.d.ts

@@ -28,6 +28,7 @@ export default class DescribeMeReporter implements Reporter {
     private snapshots;
     private assets;
     private styles;
+    private fonts;
     private modules;
     constructor(options?: DescribeMeReporterOptions);
     onInit(vitest: Vitest): void;
@@ -39,12 +40,20 @@ export default class DescribeMeReporter implements Reporter {
      * are dropped, and so are the empty tests that 0.4 still wrote.
      */
     private seedFromPreviousRun;
+    /**
+     * Tests written before 0.5 carry Vitest's id. They get their stable id, and
+     * the old one moves to `vitestId`. Occurrences are counted over the module's
+     * full list, as the run that wrote it saw them.
+     */
+    private withStableIds;
     /**
      * A test skipped in this run keeps its previous entry, so a filtered run does
      * not erase documentation.
      */
     onTestModuleEnd(module: TestModule): void;
     onTestRunEnd(): Promise<void>;
+    /** A diagnostic must never break the manifest, so a failing audit writes empty lists. */
+    private auditFonts;
     /** Module ids use the platform's separators. Globs expect posix ones. */
     private isRecordedModule;
     /** Decided before any snapshot is written, so a dropped test writes no file. */

package/dist/reporter.js

@@ -10,11 +10,16 @@ import { collectComponentDocsSafely } from './collect-component-docs-safely.js';
 import { compileGlobs } from './compile-globs.js';
 import { componentEntries } from './component-entries.js';
 import { fileFilter } from './file-filter.js';
+import { FontAudit } from './font-audit.js';
 import { isRecordedTest } from './is-recorded-test.js';
 import { printDiagnostics } from './print-diagnostics.js';
 import { SnapshotStore } from './snapshot-store.js';
+import { stableTestIds } from './stable-test-ids.js';
 import { StyleStore } from './style-store.js';
 import { testPath } from './test-path.js';
+function toPosix(moduleId) {
+    return moduleId.split(sep).join('/');
+}
 function recordOf(tc) {
     return tc.meta()[META_KEY];
 }
@@ -27,6 +32,7 @@ export default class DescribeMeReporter {
     snapshots;
     assets;
     styles;
+    fonts;
     modules = new Map();
     constructor(options = {}) {
         this.outDirOption = options.outDir ?? '.describe-me';
@@ -43,6 +49,7 @@ export default class DescribeMeReporter {
         this.snapshots = new SnapshotStore(this.outDir);
         this.assets = new AssetStore(this.outDir, this.root);
         this.styles = new StyleStore(this.outDir);
+        this.fonts = new FontAudit(this.outDir);
         this.seedFromPreviousRun();
         if (this.previewHead !== undefined && /<script\b/i.test(this.previewHead)) {
             console.warn('describe-me: previewHead contains a <script>, which the viewer never runs.');
@@ -65,7 +72,7 @@ export default class DescribeMeReporter {
         try {
             const previous = JSON.parse(readFileSync(file, 'utf8'));
             for (const mod of previous.modules ?? []) {
-                const tests = mod.tests.filter((test) => isRecordedTest(test));
+                const tests = this.withStableIds(mod).filter((test) => isRecordedTest(test));
                 if (tests.length > 0 &&
                     this.isRecordedModule(mod.id) &&
                     existsSync(resolve(this.root, mod.id))) {
@@ -77,6 +84,20 @@ export default class DescribeMeReporter {
             // corrupt or incompatible manifest: start fresh
         }
     }
+    /**
+     * Tests written before 0.5 carry Vitest's id. They get their stable id, and
+     * the old one moves to `vitestId`. Occurrences are counted over the module's
+     * full list, as the run that wrote it saw them.
+     */
+    withStableIds(mod) {
+        const ids = stableTestIds(toPosix(mod.id), mod.tests);
+        return mod.tests.map((test, i) => {
+            if (test.vitestId !== undefined) {
+                return test;
+            }
+            return { ...test, id: ids[i], vitestId: test.id };
+        });
+    }
     /**
      * A test skipped in this run keeps its previous entry, so a filtered run does
      * not erase documentation.
@@ -89,8 +110,12 @@ export default class DescribeMeReporter {
         }
         const previous = this.modules.get(id);
         const tests = [];
-        for (const tc of module.children.allTests()) {
-            const test = this.manifestTestOf(tc, previous);
+        // Over every test, skipped ones included, so an id does not depend on
+        // which tests recorded frames or on `-t` and `.only`.
+        const cases = Array.from(module.children.allTests());
+        const stableIds = stableTestIds(toPosix(id), cases.map((tc) => ({ path: testPath(tc), name: tc.name })));
+        for (const [i, tc] of cases.entries()) {
+            const test = this.manifestTestOf(tc, stableIds[i], previous);
             if (test) {
                 tests.push(test);
             }
@@ -124,25 +149,40 @@ export default class DescribeMeReporter {
         this.snapshots.collectGarbage(snapshotFiles);
         const styleFiles = this.styles.collectGarbage(snapshotFiles);
         this.assets.collectGarbage([...snapshotFiles, ...styleFiles], head === undefined ? [] : [head]);
+        this.auditFonts(manifest);
         writeFileSync(join(this.outDir, 'manifest.json'), JSON.stringify(manifest, null, 2));
         printDiagnostics(manifest);
     }
+    /** A diagnostic must never break the manifest, so a failing audit writes empty lists. */
+    auditFonts(manifest) {
+        try {
+            const { fontsMissing, remoteStylesheets } = this.fonts.audit(manifest);
+            manifest.fontsMissing = fontsMissing;
+            manifest.remoteStylesheets = remoteStylesheets;
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            console.warn(`describe-me: the font audit failed: ${message}`);
+            manifest.fontsMissing = [];
+            manifest.remoteStylesheets = [];
+        }
+    }
     /** Module ids use the platform's separators. Globs expect posix ones. */
     isRecordedModule(id) {
-        return this.isRecordedFile(id.split(sep).join('/'));
+        return this.isRecordedFile(toPosix(id));
     }
     /** Decided before any snapshot is written, so a dropped test writes no file. */
-    manifestTestOf(tc, previous) {
+    manifestTestOf(tc, stableId, previous) {
         const record = recordOf(tc);
         if (record && isRecordedTest(record)) {
-            return this.toManifestTest(tc, record);
+            return this.toManifestTest(tc, stableId, record);
         }
         if (tc.result().state !== 'skipped') {
             return undefined;
         }
-        return previous?.tests.find((test) => test.id === tc.id && test.fullName === tc.fullName && isRecordedTest(test));
+        return previous?.tests.find((test) => test.id === stableId && isRecordedTest(test));
     }
-    toManifestTest(tc, record) {
+    toManifestTest(tc, stableId, record) {
         const result = tc.result();
         const frames = record.frames.map((frame) => ({
             id: frame.id,
@@ -153,7 +193,8 @@ export default class DescribeMeReporter {
             snapshot: this.writeSnapshot(frame.snapshot, record.origin),
         }));
         return {
-            id: tc.id,
+            id: stableId,
+            vitestId: tc.id,
             name: tc.name,
             path: testPath(tc),
             fullName: tc.fullName,

package/dist/runtime-options.d.ts

@@ -2,8 +2,9 @@
  * Travels from the plugin to the setup files through Vitest's `provide` /
  * `inject`. Keep it plain JSON: the browser receives it serialized, so a
  * RegExp would not survive. The test runtime imports this file, so it imports
- * nothing itself.
+ * only types.
  */
+import type { RenderFrameMode } from '@describe-me/core/types';
 export interface CompiledGlob {
     source: string;
     flags: string;
@@ -13,6 +14,7 @@ export interface RuntimeOptions {
     include: CompiledGlob[];
     /** Wins over `include`. */
     exclude: CompiledGlob[];
+    renderFrame: RenderFrameMode;
 }
 export declare const RUNTIME_OPTIONS_KEY: "describe-me";
 declare module 'vitest' {

package/dist/runtime-options.js

@@ -2,6 +2,6 @@
  * Travels from the plugin to the setup files through Vitest's `provide` /
  * `inject`. Keep it plain JSON: the browser receives it serialized, so a
  * RegExp would not survive. The test runtime imports this file, so it imports
- * nothing itself.
+ * only types.
  */
 export const RUNTIME_OPTIONS_KEY = 'describe-me';

package/dist/setup-dom.js

@@ -3,8 +3,9 @@
  * `setupFiles: ['@describe-me/vitest/setup-dom']`. Patches Testing Library's
  * userEvent, when it is installed, so every interaction records a frame, sets
  * React's act flag where Testing Library would, and registers the recording
- * hooks. Which test files are recorded (`include` / `exclude`) comes from the
- * plugin. Never imports `vitest/browser`, which only exists in browser mode.
+ * hooks. Which test files are recorded (`include` / `exclude`) and when the
+ * render frame is taken (`renderFrame`) come from the plugin. Never imports
+ * `vitest/browser`, which only exists in browser mode.
  */
 import { mirrorReactActEnvironment } from './mirror-react-act-environment.js';
 import { patchTestingLibraryUserEvent } from './patch-testing-library-user-event.js';

package/dist/setup.js

@@ -2,7 +2,8 @@
  * Vitest setup file for browser mode: `setupFiles: ['@describe-me/vitest/setup']`.
  * Patches Vitest's locators and userEvent so every interaction records a
  * frame, and registers the recording hooks. Which test files are recorded
- * (`include` / `exclude`) comes from the plugin. For jsdom use `./setup-dom`.
+ * (`include` / `exclude`) and when the render frame is taken (`renderFrame`)
+ * come from the plugin. For jsdom use `./setup-dom`.
  */
 import { patchLocators } from './patch-locators.js';
 import { patchUserEvent } from './patch-user-event.js';