{"id":11582,"library":"pretty-format","title":"Pretty Format","description":"pretty-format is a robust utility for stringifying any JavaScript value, particularly useful for debugging and generating consistent output for snapshot testing. Maintained as a core package within the Jest testing framework, it is currently on version 30.3.0 and aligns its major releases with Jest itself, which aims for more frequent major updates going forward. Key differentiators include its extensibility through a powerful plugin system, allowing serialization of application-specific data types (often called snapshot serializers in the context of Jest). It can handle circular references, various built-in types, and offers extensive configuration options for output style, indentation, and color highlighting.","status":"active","version":"30.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/jestjs/jest","tags":["javascript","typescript"],"install":[{"cmd":"npm install pretty-format","lang":"bash","label":"npm"},{"cmd":"yarn add pretty-format","lang":"bash","label":"yarn"},{"cmd":"pnpm add pretty-format","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"While CommonJS `require` still works, ES Modules `import` is the recommended standard for modern Node.js environments (v18.14.0+), aligning with Jest 30's requirements. The `format` function is a named export.","wrong":"const format = require('pretty-format');","symbol":"format","correct":"import { format } from 'pretty-format';"},{"note":"The primary formatting function is a named export `format`. It's common practice to alias it to `prettyFormat` for clarity, as seen in Jest's own usage examples. There is no default export.","wrong":"import prettyFormat from 'pretty-format';","symbol":"prettyFormat","correct":"import { format as prettyFormat } from 'pretty-format';"},{"note":"Built-in plugins like `ReactElement` and `ReactTestComponent` are available for specialized formatting. They are typically imported directly from `pretty-format/build/plugins` when used outside of Jest's automatic configuration.","wrong":"import { plugins } from 'pretty-format/plugins';","symbol":"plugins","correct":"import { format, plugins } from 'pretty-format';\n// or specific plugins:\nimport { ReactElement, ReactTestComponent } from 'pretty-format/build/plugins';"}],"quickstart":{"code":"import { format, plugins } from 'pretty-format';\n\nconst { ReactElement, ReactTestComponent } = plugins;\n\nconst val = {\n  string: 'hello world',\n  number: 123.45,\n  boolean: true,\n  array: [-0, Infinity, NaN, null, undefined],\n  object: { key: 'value', nested: { id: 1 } },\n  circularReference: null,\n  map: new Map([['prop', 'value']]),\n  set: new Set([1, 2, 3]),\n  symbol: Symbol('description'),\n  func: function myFunc() {},\n  date: new Date('2023-01-01T12:00:00.000Z')\n};\n\nval.circularReference = val; // Create a circular reference\n\nconst options = {\n  indent: 2,\n  min: false,\n  callToJSON: true,\n  plugins: [ReactElement, ReactTestComponent]\n};\n\nconsole.log(format(val, options));\n\n// Example with a custom plugin (simple)\nconst customPlugin = {\n  test(value) {\n    return value instanceof Error;\n  },\n  serialize(value, config, indentation, depth, refs, printer) {\n    return `Custom Error: ${value.message}`;\n  },\n};\n\nconst error = new Error('Something went wrong');\nconsole.log(format(error, { plugins: [customPlugin] }));","lang":"typescript","description":"Demonstrates basic usage of `pretty-format` with a complex object, including circular references, various JavaScript types, and the use of built-in React plugins and a simple custom plugin."},"warnings":[{"fix":"Update existing snapshots (`jest --updateSnapshot`) after upgrading to Jest 30 or `pretty-format` v30 to reflect the new rendering behavior. Review the changes to ensure they are intended.","message":"The React plugin for `pretty-format` no longer renders empty string children (`''`) in React elements. If your snapshots previously captured these empty strings, they will now be omitted, leading to snapshot mismatches.","severity":"breaking","affected_versions":">=30.0.0"},{"fix":"Run Jest with `--updateSnapshot` to accept the new, corrected formatting for `ArrayBuffer` and `DataView` instances in your snapshots. Verify the updated output is as expected.","message":"The formatting of `ArrayBuffer` and `DataView` objects has been updated to be more correct and human-readable in version 30. This change will likely cause snapshot mismatches if your tests include these types.","severity":"breaking","affected_versions":">=30.0.0"},{"fix":"It is highly recommended to run `jest --updateSnapshot` after upgrading to Jest 30 to re-record any snapshots affected by these underlying formatting improvements. Always review snapshot diffs carefully.","message":"As part of the Jest 30 upgrade, `pretty-format` introduces general improvements to object printing. While specific changes beyond React empty strings and ArrayBuffer/DataView are not individually listed as 'breaking' for `pretty-format`, the overall improvements may alter snapshot output for various JavaScript values.","severity":"breaking","affected_versions":">=30.0.0"},{"fix":"Keep `test` methods simple, fast, and avoid expensive operations. Perform heavy logic only within the `serialize` or `print` methods once `test` has confirmed the plugin should handle the value.","message":"When developing custom plugins, ensure that the `test` method is highly performant as it is called frequently by `pretty-format` for all values. Inefficient `test` implementations can significantly degrade performance.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Review the snapshot differences and, if the changes are expected and correct, update your snapshots by running `jest --updateSnapshot`.","cause":"Upgrading `pretty-format` (especially with Jest 30) or its dependencies can alter the serialized output of various JavaScript values, leading to failing snapshot tests.","error":"Snapshot mismatch"},{"fix":"Ensure you are using the correct import syntax for your module system. For ESM, use `import { format } from 'pretty-format';`. For CommonJS, use `const { format } = require('pretty-format');`. Verify your bundler/TypeScript configuration is set up to correctly handle module interop.","cause":"This error typically occurs in a mixed CommonJS/ESM environment or when a bundler incorrectly handles named exports, treating `format` as a default export, or when trying to destructure a CommonJS `require` directly with an ESM import syntax.","error":"TypeError: (0 , pretty_format__WEBPACK_IMPORTED_MODULE_0__.format) is not a function"},{"fix":"Debug the `test` method to ensure it correctly identifies the target value. Check the `serialize` method for logic errors. Confirm the plugin is included in the `plugins` array passed to the `format` function. Ensure the `serialize` method uses `printer` for child values and `indenter` for new lines as expected.","cause":"The `test` method of a custom plugin might be returning `false` incorrectly, or the `serialize` method has a bug, or the plugin is not passed in the `options.plugins` array to `format`.","error":"Custom plugin not applied or applied incorrectly."}],"ecosystem":"npm"}