464 lines
		
	
	
		
			13 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
			
		
		
	
	
			464 lines
		
	
	
		
			13 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
| # pretty-format
 | |
| 
 | |
| > Stringify any JavaScript value.
 | |
| 
 | |
| - Supports all built-in JavaScript types
 | |
|   - primitive types: `Boolean`, `null`, `Number`, `String`, `Symbol`, `undefined`
 | |
|   - other non-collection types: `Date`, `Error`, `Function`, `RegExp`
 | |
|   - collection types:
 | |
|     - `arguments`, `Array`, `ArrayBuffer`, `DataView`, `Float32Array`, `Float64Array`, `Int8Array`, `Int16Array`, `Int32Array`, `Uint8Array`, `Uint8ClampedArray`, `Uint16Array`, `Uint32Array`,
 | |
|     - `Map`, `Set`, `WeakMap`, `WeakSet`
 | |
|     - `Object`
 | |
| - [Blazingly fast](https://gist.github.com/thejameskyle/2b04ffe4941aafa8f970de077843a8fd)
 | |
|   - similar performance to `JSON.stringify` in v8
 | |
|   - significantly faster than `util.format` in Node.js
 | |
| - Serialize application-specific data types with built-in or user-defined plugins
 | |
| 
 | |
| ## Installation
 | |
| 
 | |
| ```sh
 | |
| $ yarn add pretty-format
 | |
| ```
 | |
| 
 | |
| ## Usage
 | |
| 
 | |
| ```js
 | |
| const prettyFormat = require('pretty-format'); // CommonJS
 | |
| ```
 | |
| 
 | |
| ```js
 | |
| import prettyFormat from 'pretty-format'; // ES2015 modules
 | |
| ```
 | |
| 
 | |
| ```js
 | |
| const val = {object: {}};
 | |
| val.circularReference = val;
 | |
| val[Symbol('foo')] = 'foo';
 | |
| val.map = new Map([['prop', 'value']]);
 | |
| val.array = [-0, Infinity, NaN];
 | |
| 
 | |
| console.log(prettyFormat(val));
 | |
| /*
 | |
| Object {
 | |
|   "array": Array [
 | |
|     -0,
 | |
|     Infinity,
 | |
|     NaN,
 | |
|   ],
 | |
|   "circularReference": [Circular],
 | |
|   "map": Map {
 | |
|     "prop" => "value",
 | |
|   },
 | |
|   "object": Object {},
 | |
|   Symbol(foo): "foo",
 | |
| }
 | |
| */
 | |
| ```
 | |
| 
 | |
| ## Usage with options
 | |
| 
 | |
| ```js
 | |
| function onClick() {}
 | |
| 
 | |
| console.log(prettyFormat(onClick));
 | |
| /*
 | |
| [Function onClick]
 | |
| */
 | |
| 
 | |
| const options = {
 | |
|   printFunctionName: false,
 | |
| };
 | |
| console.log(prettyFormat(onClick, options));
 | |
| /*
 | |
| [Function]
 | |
| */
 | |
| ```
 | |
| 
 | |
| | key                 | type      | default    | description                                             |
 | |
| | :------------------ | :-------- | :--------- | :------------------------------------------------------ |
 | |
| | `callToJSON`        | `boolean` | `true`     | call `toJSON` method (if it exists) on objects          |
 | |
| | `escapeRegex`       | `boolean` | `false`    | escape special characters in regular expressions        |
 | |
| | `escapeString`      | `boolean` | `true`     | escape special characters in strings                    |
 | |
| | `highlight`         | `boolean` | `false`    | highlight syntax with colors in terminal (some plugins) |
 | |
| | `indent`            | `number`  | `2`        | spaces in each level of indentation                     |
 | |
| | `maxDepth`          | `number`  | `Infinity` | levels to print in arrays, objects, elements, and so on |
 | |
| | `min`               | `boolean` | `false`    | minimize added space: no indentation nor line breaks    |
 | |
| | `plugins`           | `array`   | `[]`       | plugins to serialize application-specific data types    |
 | |
| | `printFunctionName` | `boolean` | `true`     | include or omit the name of a function                  |
 | |
| | `theme`             | `object`  |            | colors to highlight syntax in terminal                  |
 | |
| 
 | |
| Property values of `theme` are from [ansi-styles colors](https://github.com/chalk/ansi-styles#colors)
 | |
| 
 | |
| ```js
 | |
| const DEFAULT_THEME = {
 | |
|   comment: 'gray',
 | |
|   content: 'reset',
 | |
|   prop: 'yellow',
 | |
|   tag: 'cyan',
 | |
|   value: 'green',
 | |
| };
 | |
| ```
 | |
| 
 | |
| ## Usage with plugins
 | |
| 
 | |
| The `pretty-format` package provides some built-in plugins, including:
 | |
| 
 | |
| - `ReactElement` for elements from `react`
 | |
| - `ReactTestComponent` for test objects from `react-test-renderer`
 | |
| 
 | |
| ```js
 | |
| // CommonJS
 | |
| const prettyFormat = require('pretty-format');
 | |
| const ReactElement = prettyFormat.plugins.ReactElement;
 | |
| const ReactTestComponent = prettyFormat.plugins.ReactTestComponent;
 | |
| 
 | |
| const React = require('react');
 | |
| const renderer = require('react-test-renderer');
 | |
| ```
 | |
| 
 | |
| ```js
 | |
| // ES2015 modules and destructuring assignment
 | |
| import prettyFormat from 'pretty-format';
 | |
| const {ReactElement, ReactTestComponent} = prettyFormat.plugins;
 | |
| 
 | |
| import React from 'react';
 | |
| import renderer from 'react-test-renderer';
 | |
| ```
 | |
| 
 | |
| ```js
 | |
| const onClick = () => {};
 | |
| const element = React.createElement('button', {onClick}, 'Hello World');
 | |
| 
 | |
| const formatted1 = prettyFormat(element, {
 | |
|   plugins: [ReactElement],
 | |
|   printFunctionName: false,
 | |
| });
 | |
| const formatted2 = prettyFormat(renderer.create(element).toJSON(), {
 | |
|   plugins: [ReactTestComponent],
 | |
|   printFunctionName: false,
 | |
| });
 | |
| /*
 | |
| <button
 | |
|   onClick=[Function]
 | |
| >
 | |
|   Hello World
 | |
| </button>
 | |
| */
 | |
| ```
 | |
| 
 | |
| ## Usage in Jest
 | |
| 
 | |
| For snapshot tests, Jest uses `pretty-format` with options that include some of its built-in plugins. For this purpose, plugins are also known as **snapshot serializers**.
 | |
| 
 | |
| To serialize application-specific data types, you can add modules to `devDependencies` of a project, and then:
 | |
| 
 | |
| In an **individual** test file, you can add a module as follows. It precedes any modules from Jest configuration.
 | |
| 
 | |
| ```js
 | |
| import serializer from 'my-serializer-module';
 | |
| expect.addSnapshotSerializer(serializer);
 | |
| 
 | |
| // tests which have `expect(value).toMatchSnapshot()` assertions
 | |
| ```
 | |
| 
 | |
| For **all** test files, you can specify modules in Jest configuration. They precede built-in plugins for React, HTML, and Immutable.js data types. For example, in a `package.json` file:
 | |
| 
 | |
| ```json
 | |
| {
 | |
|   "jest": {
 | |
|     "snapshotSerializers": ["my-serializer-module"]
 | |
|   }
 | |
| }
 | |
| ```
 | |
| 
 | |
| ## Writing plugins
 | |
| 
 | |
| A plugin is a JavaScript object.
 | |
| 
 | |
| If `options` has a `plugins` array: for the first plugin whose `test(val)` method returns a truthy value, then `prettyFormat(val, options)` returns the result from either:
 | |
| 
 | |
| - `serialize(val, …)` method of the **improved** interface (available in **version 21** or later)
 | |
| - `print(val, …)` method of the **original** interface (if plugin does not have `serialize` method)
 | |
| 
 | |
| ### test
 | |
| 
 | |
| Write `test` so it can receive `val` argument of any type. To serialize **objects** which have certain properties, then a guarded expression like `val != null && …` or more concise `val && …` prevents the following errors:
 | |
| 
 | |
| - `TypeError: Cannot read property 'whatever' of null`
 | |
| - `TypeError: Cannot read property 'whatever' of undefined`
 | |
| 
 | |
| For example, `test` method of built-in `ReactElement` plugin:
 | |
| 
 | |
| ```js
 | |
| const elementSymbol = Symbol.for('react.element');
 | |
| const test = val => val && val.$$typeof === elementSymbol;
 | |
| ```
 | |
| 
 | |
| Pay attention to efficiency in `test` because `pretty-format` calls it often.
 | |
| 
 | |
| ### serialize
 | |
| 
 | |
| The **improved** interface is available in **version 21** or later.
 | |
| 
 | |
| Write `serialize` to return a string, given the arguments:
 | |
| 
 | |
| - `val` which “passed the test”
 | |
| - unchanging `config` object: derived from `options`
 | |
| - current `indentation` string: concatenate to `indent` from `config`
 | |
| - current `depth` number: compare to `maxDepth` from `config`
 | |
| - current `refs` array: find circular references in objects
 | |
| - `printer` callback function: serialize children
 | |
| 
 | |
| ### config
 | |
| 
 | |
| | key                 | type      | description                                             |
 | |
| | :------------------ | :-------- | :------------------------------------------------------ |
 | |
| | `callToJSON`        | `boolean` | call `toJSON` method (if it exists) on objects          |
 | |
| | `colors`            | `Object`  | escape codes for colors to highlight syntax             |
 | |
| | `escapeRegex`       | `boolean` | escape special characters in regular expressions        |
 | |
| | `escapeString`      | `boolean` | escape special characters in strings                    |
 | |
| | `indent`            | `string`  | spaces in each level of indentation                     |
 | |
| | `maxDepth`          | `number`  | levels to print in arrays, objects, elements, and so on |
 | |
| | `min`               | `boolean` | minimize added space: no indentation nor line breaks    |
 | |
| | `plugins`           | `array`   | plugins to serialize application-specific data types    |
 | |
| | `printFunctionName` | `boolean` | include or omit the name of a function                  |
 | |
| | `spacingInner`      | `strong`  | spacing to separate items in a list                     |
 | |
| | `spacingOuter`      | `strong`  | spacing to enclose a list of items                      |
 | |
| 
 | |
| Each property of `colors` in `config` corresponds to a property of `theme` in `options`:
 | |
| 
 | |
| - the key is the same (for example, `tag`)
 | |
| - the value in `colors` is a object with `open` and `close` properties whose values are escape codes from [ansi-styles](https://github.com/chalk/ansi-styles) for the color value in `theme` (for example, `'cyan'`)
 | |
| 
 | |
| Some properties in `config` are derived from `min` in `options`:
 | |
| 
 | |
| - `spacingInner` and `spacingOuter` are **newline** if `min` is `false`
 | |
| - `spacingInner` is **space** and `spacingOuter` is **empty string** if `min` is `true`
 | |
| 
 | |
| ### Example of serialize and test
 | |
| 
 | |
| This plugin is a pattern you can apply to serialize composite data types. Of course, `pretty-format` does not need a plugin to serialize arrays :)
 | |
| 
 | |
| ```js
 | |
| // We reused more code when we factored out a function for child items
 | |
| // that is independent of depth, name, and enclosing punctuation (see below).
 | |
| const SEPARATOR = ',';
 | |
| function serializeItems(items, config, indentation, depth, refs, printer) {
 | |
|   if (items.length === 0) {
 | |
|     return '';
 | |
|   }
 | |
|   const indentationItems = indentation + config.indent;
 | |
|   return (
 | |
|     config.spacingOuter +
 | |
|     items
 | |
|       .map(
 | |
|         item =>
 | |
|           indentationItems +
 | |
|           printer(item, config, indentationItems, depth, refs), // callback
 | |
|       )
 | |
|       .join(SEPARATOR + config.spacingInner) +
 | |
|     (config.min ? '' : SEPARATOR) + // following the last item
 | |
|     config.spacingOuter +
 | |
|     indentation
 | |
|   );
 | |
| }
 | |
| 
 | |
| const plugin = {
 | |
|   test(val) {
 | |
|     return Array.isArray(val);
 | |
|   },
 | |
|   serialize(array, config, indentation, depth, refs, printer) {
 | |
|     const name = array.constructor.name;
 | |
|     return ++depth > config.maxDepth
 | |
|       ? '[' + name + ']'
 | |
|       : (config.min ? '' : name + ' ') +
 | |
|           '[' +
 | |
|           serializeItems(array, config, indentation, depth, refs, printer) +
 | |
|           ']';
 | |
|   },
 | |
| };
 | |
| ```
 | |
| 
 | |
| ```js
 | |
| const val = {
 | |
|   filter: 'completed',
 | |
|   items: [
 | |
|     {
 | |
|       text: 'Write test',
 | |
|       completed: true,
 | |
|     },
 | |
|     {
 | |
|       text: 'Write serialize',
 | |
|       completed: true,
 | |
|     },
 | |
|   ],
 | |
| };
 | |
| ```
 | |
| 
 | |
| ```js
 | |
| console.log(
 | |
|   prettyFormat(val, {
 | |
|     plugins: [plugin],
 | |
|   }),
 | |
| );
 | |
| /*
 | |
| Object {
 | |
|   "filter": "completed",
 | |
|   "items": Array [
 | |
|     Object {
 | |
|       "completed": true,
 | |
|       "text": "Write test",
 | |
|     },
 | |
|     Object {
 | |
|       "completed": true,
 | |
|       "text": "Write serialize",
 | |
|     },
 | |
|   ],
 | |
| }
 | |
| */
 | |
| ```
 | |
| 
 | |
| ```js
 | |
| console.log(
 | |
|   prettyFormat(val, {
 | |
|     indent: 4,
 | |
|     plugins: [plugin],
 | |
|   }),
 | |
| );
 | |
| /*
 | |
| Object {
 | |
|     "filter": "completed",
 | |
|     "items": Array [
 | |
|         Object {
 | |
|             "completed": true,
 | |
|             "text": "Write test",
 | |
|         },
 | |
|         Object {
 | |
|             "completed": true,
 | |
|             "text": "Write serialize",
 | |
|         },
 | |
|     ],
 | |
| }
 | |
| */
 | |
| ```
 | |
| 
 | |
| ```js
 | |
| console.log(
 | |
|   prettyFormat(val, {
 | |
|     maxDepth: 1,
 | |
|     plugins: [plugin],
 | |
|   }),
 | |
| );
 | |
| /*
 | |
| Object {
 | |
|   "filter": "completed",
 | |
|   "items": [Array],
 | |
| }
 | |
| */
 | |
| ```
 | |
| 
 | |
| ```js
 | |
| console.log(
 | |
|   prettyFormat(val, {
 | |
|     min: true,
 | |
|     plugins: [plugin],
 | |
|   }),
 | |
| );
 | |
| /*
 | |
| {"filter": "completed", "items": [{"completed": true, "text": "Write test"}, {"completed": true, "text": "Write serialize"}]}
 | |
| */
 | |
| ```
 | |
| 
 | |
| ### print
 | |
| 
 | |
| The **original** interface is adequate for plugins:
 | |
| 
 | |
| - that **do not** depend on options other than `highlight` or `min`
 | |
| - that **do not** depend on `depth` or `refs` in recursive traversal, and
 | |
| - if values either
 | |
|   - do **not** require indentation, or
 | |
|   - do **not** occur as children of JavaScript data structures (for example, array)
 | |
| 
 | |
| Write `print` to return a string, given the arguments:
 | |
| 
 | |
| - `val` which “passed the test”
 | |
| - current `printer(valChild)` callback function: serialize children
 | |
| - current `indenter(lines)` callback function: indent lines at the next level
 | |
| - unchanging `config` object: derived from `options`
 | |
| - unchanging `colors` object: derived from `options`
 | |
| 
 | |
| The 3 properties of `config` are `min` in `options` and:
 | |
| 
 | |
| - `spacing` and `edgeSpacing` are **newline** if `min` is `false`
 | |
| - `spacing` is **space** and `edgeSpacing` is **empty string** if `min` is `true`
 | |
| 
 | |
| Each property of `colors` corresponds to a property of `theme` in `options`:
 | |
| 
 | |
| - the key is the same (for example, `tag`)
 | |
| - the value in `colors` is a object with `open` and `close` properties whose values are escape codes from [ansi-styles](https://github.com/chalk/ansi-styles) for the color value in `theme` (for example, `'cyan'`)
 | |
| 
 | |
| ### Example of print and test
 | |
| 
 | |
| This plugin prints functions with the **number of named arguments** excluding rest argument.
 | |
| 
 | |
| ```js
 | |
| const plugin = {
 | |
|   print(val) {
 | |
|     return `[Function ${val.name || 'anonymous'} ${val.length}]`;
 | |
|   },
 | |
|   test(val) {
 | |
|     return typeof val === 'function';
 | |
|   },
 | |
| };
 | |
| ```
 | |
| 
 | |
| ```js
 | |
| const val = {
 | |
|   onClick(event) {},
 | |
|   render() {},
 | |
| };
 | |
| 
 | |
| prettyFormat(val, {
 | |
|   plugins: [plugin],
 | |
| });
 | |
| /*
 | |
| Object {
 | |
|   "onClick": [Function onClick 1],
 | |
|   "render": [Function render 0],
 | |
| }
 | |
| */
 | |
| 
 | |
| prettyFormat(val);
 | |
| /*
 | |
| Object {
 | |
|   "onClick": [Function onClick],
 | |
|   "render": [Function render],
 | |
| }
 | |
| */
 | |
| ```
 | |
| 
 | |
| This plugin **ignores** the `printFunctionName` option. That limitation of the original `print` interface is a reason to use the improved `serialize` interface, described above.
 | |
| 
 | |
| ```js
 | |
| prettyFormat(val, {
 | |
|   plugins: [pluginOld],
 | |
|   printFunctionName: false,
 | |
| });
 | |
| /*
 | |
| Object {
 | |
|   "onClick": [Function onClick 1],
 | |
|   "render": [Function render 0],
 | |
| }
 | |
| */
 | |
| 
 | |
| prettyFormat(val, {
 | |
|   printFunctionName: false,
 | |
| });
 | |
| /*
 | |
| Object {
 | |
|   "onClick": [Function],
 | |
|   "render": [Function],
 | |
| }
 | |
| */
 | |
| ```
 |