@vitest/pretty-format

Vitest's fork of Jest's pretty-format, published as an ESM-only package.

This package powers several formatting paths in Vitest:

• snapshot serialization
• assertion diff rendering
• matcher and error messages
• browser prettyDOM output

Usage

import { format } from '@vitest/pretty-format'

const value = {
  user: 'Ada',
  items: [1, 2, 3],
}

console.log(format(value))
/*
-- output --
Object {
  "items": Array [
    1,
    2,
    3,
  ],
  "user": "Ada",
}
*/

Options

Important:

• plugins: [] means the package does not auto-enable its built-in plugins by default
• Vitest features opt into their own plugin stacks and option presets

Built-in Plugins

The package exports these built-in plugins:

• ReactTestComponent
• ReactElement
• DOMElement
• DOMCollection
• Immutable
• AsymmetricMatcher
• Error

You can use them directly with format(..., { plugins }):

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

console.log(
  format(document.body, {
    plugins: [plugins.DOMElement, plugins.DOMCollection],
  }),
)

Vitest Extensions

Besides the inherited pretty-format API surface, Vitest currently adds and documents these notable behaviors:

printShadowRoot

Controls whether DOM serialization includes shadow-root contents.

format(element, {
  printShadowRoot: false,
})

maxOutputLength

Approximate per-depth output budget used to prevent pathological expansion of large recursive structures.

This is a heuristic safety valve, not a hard cap on the final string length.

format(value, {
  maxOutputLength: 100_000,
})

How Vitest Uses It

Snapshots

Snapshots use @vitest/pretty-format with snapshot-specific defaults such as:

• printBasicPrototype: false
• escapeString: false
• escapeRegex: true
• printFunctionName: false
• maxOutputLength: 2 ** 27

Snapshots use a more generous safety cap than the package default. The default maxOutputLength is tuned for general-purpose formatting such as logs and error messages, while snapshot users may intentionally persist large serialized values to dedicated files. Users can still opt into a smaller cap through test.snapshotFormat.maxOutputLength.

Default snapshot plugin stack:

• ReactTestComponent
• ReactElement
• DOMElement
• DOMCollection
• Immutable
• AsymmetricMatcher
• MockSerializer

Snapshot formatting is configured through test.snapshotFormat, while serializer registration goes through expect.addSnapshotSerializer or snapshotSerializers.

Diffs

Assertion diffs use a different preset and plugin stack.

Default diff plugins:

• ReactTestComponent
• ReactElement
• DOMElement
• DOMCollection
• Immutable
• AsymmetricMatcher
• Error

Vitest stringify

Matcher and error messages commonly go through Vitest's internal stringify utility, which uses:

• ReactTestComponent
• ReactElement
• DOMElement
• DOMCollection
• Immutable
• AsymmetricMatcher

stringify also adds wrapper-level behavior on top of @vitest/pretty-format:

• maxLength: if the formatted output grows too large, stringify retries with a smaller maxDepth to keep the result bounded
• filterNode: swaps the default DOM plugin for a filtered variant so selected nodes are omitted from the output
• fallback on formatter errors: if formatting throws, stringify retries with callToJSON: false

Browser prettyDOM

Browser prettyDOM builds on Vitest's stringify path and enables browser-oriented defaults such as:

• highlight: true

It can also replace the default DOM plugin with a filtered variant when filterNode is configured.