pretty-format

What is pretty-format?

The pretty-format npm package is a JavaScript library that allows you to serialize any JavaScript value into a string with a human-readable format. It is particularly useful for snapshot testing, where you want to compare the expected and actual output of your test cases.

What are pretty-format's main functionalities?

Pretty-printing of basic JavaScript types

This feature allows you to convert basic JavaScript types like objects, arrays, strings, numbers, etc., into a nicely formatted string.

const prettyFormat = require('pretty-format');
const value = { foo: 'bar', baz: 42 };
console.log(prettyFormat(value));

Customizing output with plugins

pretty-format supports plugins that can be used to customize the output for specific types of values, such as React elements.

const prettyFormat = require('pretty-format');
const ReactElementPlugin = require('pretty-format/plugins/ReactElement');
const reactElement = <div>Hello World</div>;
console.log(prettyFormat(reactElement, { plugins: [ReactElementPlugin] }));

Minimizing diff output

By using pretty-format in combination with a diffing library like jest-diff, you can minimize the output of diffs to make them easier to read and understand.

const prettyFormat = require('pretty-format');
const diff = require('jest-diff');
const oldValue = { a: 'old', b: 'values' };
const newValue = { a: 'new', b: 'values' };
const difference = diff(prettyFormat(oldValue), prettyFormat(newValue));
console.log(difference);

Other packages similar to pretty-format

chalk

Chalk is a popular npm package for styling terminal strings. While it doesn't serialize objects, it can be used in conjunction with pretty-format to colorize the output, enhancing readability.

util

Util is a core Node.js module that provides a method called 'inspect' for printing objects in a readable format. It is similar to pretty-format but is built into Node.js and does not support plugins.

js-beautify

js-beautify is an npm package that can format HTML, CSS, and JavaScript code. It is more focused on formatting code rather than serializing arbitrary JavaScript values like pretty-format.

README

pretty-format

Stringify any JavaScript value.

• Supports all built-in JavaScript types
• Blazingly fast (similar performance to v8's JSON.stringify and significantly faster than Node's util.format)
• Plugin system for extending with custom types (i.e. ReactTestComponent)

Installation

$ npm install pretty-format

Usage

var prettyFormat = require('pretty-format');

var obj = { property: {} };
obj.circularReference = obj;
obj[Symbol('foo')] = 'foo';
obj.map = new Map();
obj.map.set('prop', 'value');
obj.array = [1, NaN, Infinity];

console.log(prettyFormat(obj));

Result:

Object {
  "property": Object {},
  "circularReference": [Circular],
  "map": Map {
    "prop" => "value"
  },
  "array": Array [
    1,
    NaN,
    Infinity
  ],
  Symbol(foo): "foo"
}

Type Support

Object, Array, ArrayBuffer, DataView, Float32Array, Float64Array, Int8Array, Int16Array, Int32Array, Uint8Array, Uint8ClampedArray, Uint16Array, Uint32Array, arguments, Boolean, Date, Error, Function, Infinity, Map, NaN, null, Number, RegExp, Set, String, Symbol, undefined, WeakMap, WeakSet

Plugins

Pretty format also supports adding plugins:

var fooPlugin = {
  test: function(val) {
    return val && val.hasOwnProperty('foo');
  },
  print: function(val, print, indent) {
    return 'Foo: ' + print(val.foo);
  }
};

var obj = { foo: { bar: {} } };

prettyFormat(obj, {
  plugins: [fooPlugin]
});
// Foo: Object {
//   "bar": Object {}
// }

ReactTestComponent plugin

var prettyFormat = require('pretty-format');
var reactPlugin = require('pretty-format/plugins/ReactTestComponent');

var React = require('react');
var renderer = require('react/lib/ReactTestRenderer');

var jsx = React.createElement('h1', null, 'Hello World');

prettyFormat(renderer.create(jsx).toJSON(), {
  plugins: [reactPlugin]
});
// <h1>
//   Hello World
// </h1>