@vitest/pretty-format 4.1.11: plugins

Clean-room public code sample — generation instructions

Write a brand-new, minimal, self-contained code sample in this clean-room directory.
Do not copy, paraphrase, or reference any existing project source. Work only from this spec.

A csx.json manifest scaffold already exists. Do not recreate it from memory. Preserve its case.goal, packages and symbols; fill its empty case.contract with exact assertions and correct its environment, commands and verifierAdapter for the files you generate.

Goal: verify @vitest/pretty-format.plugins in pkg:npm/%40vitest/pretty-format@4.1.11
Kind: HOW

Use EXACTLY these public packages and versions:
  - pkg:npm/%40vitest/pretty-format@4.1.11
Demonstrate these symbols/APIs:
  - @vitest/pretty-format.plugins
Constraints:
  - executionContext: node
Required runtime conditions:
  - ecosystem: npm
  - language: javascript
  - moduleSystem: cjs
  - packageManager: npm@10.9.8
  - runtime: node@22.23.2

Rules:
  - One focused purpose; the smallest project that proves the goal.
  - Include a contract test (test/contract.*) that runs OFFLINE and exits 0 exactly when the goal behavior works.
  - Pin every dependency with a lockfile so resolution is reproducible.
  - No secrets, credentials, or tokens. No real URLs (only example.com or localhost). No absolute paths.
  - No personal names, emails, company names, or project identifiers of any kind.
  - No binaries and no generated output (node_modules, dist, target, venv, .git, .env).
  - Keep it under 200 files and 256KB packed.

{"case":{"caseId":"case:sha256:e67c018906caab40ecbdd7854413606a15f5adfba5a5645c776d6901f1028ed9","constraints":{"executionContext":"node"},"contract":["plugins exports built-in plugins object with AsymmetricMatcher, DOMCollection, DOMElement, Immutable, ReactElement, ReactTestComponent, and Error","plugins.AsymmetricMatcher matches and serializes jest asymmetric matcher objects via toAsymmetricMatcher","plugins.ReactElement matches and formats JSX-like React element representations","plugins.ReactTestComponent matches and formats React test renderer JSON objects","plugins.Error matches and serializes Error objects showing type and message properties","plugins.Immutable matches and formats Immutable iterable and record data structures using sentinel properties","plugins.DOMCollection matches and formats DOM collection structures like DOMStringMap","plugins.DOMElement matches and formats DOM elements into HTML markup representations","format supports custom plugins implementing test and serialize hooks","format evaluates plugins in array order giving earlier plugins precedence"],"goal":"verify @vitest/pretty-format.plugins in pkg:npm/%40vitest/pretty-format@4.1.11","kind":"HOW","packages":["pkg:npm/%40vitest/pretty-format@4.1.11"],"schemaVersion":1,"symbols":["@vitest/pretty-format.plugins"]},"contractCommand":["node","test/contract.mjs"],"environment":{"arch":"x64","distro":"ubuntu","ecosystem":"npm","executionContext":"node","language":"javascript","libc":"glibc","libcVersion":"2.39","moduleSystem":"cjs","os":"linux","osVersionBucket":"24","packageManager":"npm","packageManagerVersion":"10.9.8","runtime":"node","runtimeVersion":"22.23.2","schemaVersion":1},"license":"MIT-0","packages":["pkg:npm/%40vitest/pretty-format@4.1.11"],"schemaVersion":1,"subject":"pkg:npm/%40vitest/pretty-format@4.1.11","symbols":["@vitest/pretty-format.plugins"],"verifierAdapter":"node-typescript@1"}

import { format, plugins } from '@vitest/pretty-format';

export { format, plugins };

export function formatWithPlugins(value, customPlugins = []) {
  return format(value, { plugins: customPlugins });
}

export function formatAsymmetricMatcher(matcher) {
  return format(matcher, { plugins: [plugins.AsymmetricMatcher] });
}

export function formatReactElement(element) {
  return format(element, { plugins: [plugins.ReactElement] });
}

export function formatReactTestComponent(component) {
  return format(component, { plugins: [plugins.ReactTestComponent] });
}

export function formatError(error) {
  return format(error, { plugins: [plugins.Error] });
}

export function formatImmutable(collection) {
  return format(collection, { plugins: [plugins.Immutable] });
}

export function formatDOMCollection(collection) {
  return format(collection, { plugins: [plugins.DOMCollection] });
}

export function formatDOMElement(element) {
  return format(element, { plugins: [plugins.DOMElement] });
}

{
  "name": "sample-vitest-pretty-format-plugins",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-vitest-pretty-format-plugins",
      "version": "1.0.0",
      "dependencies": {
        "@vitest/pretty-format": "4.1.11"
      }
    },
    "node_modules/@vitest/pretty-format": {
      "version": "4.1.11",
      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.11.tgz",
      "integrity": "sha512-yiZzPbGTS9Sr/JpFl8zHrcIkAofNbFV6k21vIgQN/cY/oxZeXhJv5sc/MBJ5jFKWmWs+oJHw0UXLZjmf931+Vw==",
      "license": "MIT",
      "dependencies": {
        "tinyrainbow": "^3.1.0"
      },
      "funding": {
        "url": "https://opencollective.com/vitest"
      }
    },
    "node_modules/tinyrainbow": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.1.tgz",
      "integrity": "sha512-yau8yJdTt989Mm0Bd/236QnzEiPf2xLLTqUZRUJOo/3CB078LSwzei343DgtJVmfJKJE3TMINY1u42SQsP6mXw==",
      "license": "MIT",
      "engines": {
        "node": ">=14.0.0"
      }
    }
  }
}

{
  "name": "sample-vitest-pretty-format-plugins",
  "version": "1.0.0",
  "description": "Clean-room verification sample for @vitest/pretty-format plugins",
  "type": "module",
  "main": "index.mjs",
  "scripts": {
    "test": "node test/contract.mjs"
  },
  "dependencies": {
    "@vitest/pretty-format": "4.1.11"
  }
}

{
  "schemaVersion": 1,
  "goal": "verify @vitest/pretty-format.plugins in pkg:npm/%40vitest/pretty-format@4.1.11",
  "kind": "HOW",
  "packages": [
    "pkg:npm/%40vitest/pretty-format@4.1.11"
  ],
  "symbols": [
    "@vitest/pretty-format.plugins"
  ],
  "constraints": {
    "executionContext": "node"
  },
  "runtimeConditions": {
    "ecosystem": "npm",
    "language": "javascript",
    "moduleSystem": "cjs",
    "packageManager": "npm@10.9.8",
    "runtime": "node@22.23.2"
  }
}

import assert from 'node:assert/strict';
import { format, plugins } from '@vitest/pretty-format';
import {
  formatWithPlugins,
  formatAsymmetricMatcher,
  formatReactElement,
  formatReactTestComponent,
  formatError,
  formatImmutable,
  formatDOMCollection,
  formatDOMElement,
} from '../index.mjs';

// 1. plugins exports built-in plugins object with AsymmetricMatcher, DOMCollection, DOMElement, Immutable, ReactElement, ReactTestComponent, and Error
{
  assert.ok(plugins, 'plugins object must be exported');
  assert.equal(typeof plugins.AsymmetricMatcher, 'object');
  assert.equal(typeof plugins.DOMCollection, 'object');
  assert.equal(typeof plugins.DOMElement, 'object');
  assert.equal(typeof plugins.Immutable, 'object');
  assert.equal(typeof plugins.ReactElement, 'object');
  assert.equal(typeof plugins.ReactTestComponent, 'object');
  assert.equal(typeof plugins.Error, 'object');

  assert.equal(typeof plugins.AsymmetricMatcher.test, 'function');
  assert.equal(typeof plugins.AsymmetricMatcher.serialize, 'function');
  assert.equal(typeof plugins.ReactElement.test, 'function');
  assert.equal(typeof plugins.ReactElement.serialize, 'function');
  assert.equal(typeof plugins.Error.test, 'function');
  assert.equal(typeof plugins.Error.serialize, 'function');
}

// 2. plugins.AsymmetricMatcher matches and serializes jest asymmetric matcher objects via toAsymmetricMatcher
{
  const matcher = {
    $$typeof: Symbol.for('jest.asymmetricMatcher'),
    asymmetricMatch: () => true,
    toAsymmetricMatcher: () => 'StringMatching(/^test/)',
  };
  assert.equal(plugins.AsymmetricMatcher.test(matcher), true);
  assert.equal(plugins.AsymmetricMatcher.test({}), false);
  const result = formatAsymmetricMatcher(matcher);
  assert.equal(result, 'StringMatching(/^test/)');
}

// 3. plugins.ReactElement matches and formats JSX-like React element representations
{
  const element = {
    $$typeof: Symbol.for('react.element'),
    type: 'div',
    props: {
      className: 'alert-box',
      children: 'Notice',
    },
    key: null,
    ref: null,
  };
  assert.equal(plugins.ReactElement.test(element), true);
  assert.equal(plugins.ReactElement.test({}), false);
  const result = formatReactElement(element);
  assert.ok(result.includes('<div'));
  assert.ok(result.includes('className="alert-box"'));
  assert.ok(result.includes('Notice'));
}

// 4. plugins.ReactTestComponent matches and formats React test renderer JSON objects
{
  const testComponent = {
    $$typeof: Symbol.for('react.test.json'),
    type: 'button',
    props: { disabled: true },
    children: ['Click me'],
  };
  assert.equal(plugins.ReactTestComponent.test(testComponent), true);
  assert.equal(plugins.ReactTestComponent.test({}), false);
  const result = formatReactTestComponent(testComponent);
  assert.ok(result.includes('<button'));
  assert.ok(result.includes('disabled={true}'));
  assert.ok(result.includes('Click me'));
}

// 5. plugins.Error matches and serializes Error objects showing type and message properties
{
  const error = new TypeError('invalid argument type');
  assert.equal(plugins.Error.test(error), true);
  assert.equal(plugins.Error.test({ message: 'plain obj' }), false);
  const result = formatError(error);
  assert.ok(result.includes('TypeError {'));
  assert.ok(result.includes('"message": "invalid argument type"'));
}

// 6. plugins.Immutable matches and formats Immutable iterable and record data structures using sentinel properties
{
  const fakeImmutable = {
    '@@__IMMUTABLE_ITERABLE__@@': true,
    '@@__IMMUTABLE_LIST__@@': true,
    size: 2,
    values: function* () {
      yield 'itemA';
      yield 'itemB';
    },
    [Symbol.iterator]: function* () {
      yield 'itemA';
      yield 'itemB';
    },
  };
  assert.equal(plugins.Immutable.test(fakeImmutable), true);
  assert.equal(plugins.Immutable.test({ size: 2 }), false);
  const result = formatImmutable(fakeImmutable);
  assert.ok(result.includes('Immutable.List ['));
  assert.ok(result.includes('"itemA",'));
  assert.ok(result.includes('"itemB",'));
}

// 7. plugins.DOMCollection matches and formats DOM collection structures like DOMStringMap
{
  class DOMStringMap {
    constructor() {
      this.key = 'val';
    }
  }
  const domMap = new DOMStringMap();
  assert.equal(plugins.DOMCollection.test(domMap), true);
  assert.equal(plugins.DOMCollection.test({ key: 'val' }), false);
  const result = formatDOMCollection(domMap);
  assert.ok(result.includes('DOMStringMap {'));
  assert.ok(result.includes('"key": "val"'));
}

// 8. plugins.DOMElement matches and formats DOM elements into HTML markup representations
{
  class HTMLDivElement {
    constructor() {
      this.nodeType = 1;
      this.tagName = 'div';
      this.attributes = [];
      this.childNodes = [];
    }
  }
  const domElem = new HTMLDivElement();
  assert.equal(plugins.DOMElement.test(domElem), true);
  assert.equal(plugins.DOMElement.test({ nodeType: 1 }), false);
  const result = formatDOMElement(domElem);
  assert.equal(result, '<div />');
}

// 9. format supports custom plugins implementing test and serialize hooks
{
  const customPlugin = {
    test(val) {
      return Boolean(val && typeof val === 'object' && val.__kind === 'PriceTag');
    },
    serialize(val) {
      return `${val.currency}${val.amount.toFixed(2)}`;
    },
  };
  const price = { __kind: 'PriceTag', currency: '$', amount: 49.9 };
  const formatted = formatWithPlugins(price, [customPlugin]);
  assert.equal(formatted, '$49.90');
}

// 10. format evaluates plugins in array order giving earlier plugins precedence
{
  const firstPlugin = {
    test(val) {
      return Boolean(val && val.__priority);
    },
    serialize() {
      return 'FIRST_HANDLER';
    },
  };
  const secondPlugin = {
    test(val) {
      return Boolean(val && val.__priority);
    },
    serialize() {
      return 'SECOND_HANDLER';
    },
  };

  const target = { __priority: true };
  assert.equal(format(target, { plugins: [firstPlugin, secondPlugin] }), 'FIRST_HANDLER');
  assert.equal(format(target, { plugins: [secondPlugin, firstPlugin] }), 'SECOND_HANDLER');
}

console.log('All @vitest/pretty-format.plugins contract assertions passed.');