|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456 |
- # pretty-format
-
- Stringify any JavaScript value.
-
- - Serialize built-in JavaScript types.
- - Serialize application-specific data types with built-in or user-defined plugins.
-
- ## Installation
-
- ```sh
- $ yarn add pretty-format
- ```
-
- ## Usage
-
- ```js
- const {format: prettyFormat} = require('pretty-format'); // CommonJS
- ```
-
- ```js
- import {format as 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]
- */
- ```
-
- <!-- prettier-ignore -->
- | 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 |
- | `printBasicPrototype` | `boolean` | `false` | print the prototype for plain objects and arrays |
- | `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 React = require('react');
- const renderer = require('react-test-renderer');
- const {format: prettyFormat, plugins} = require('pretty-format');
-
- const {ReactElement, ReactTestComponent} = plugins;
- ```
-
- ```js
- // ES2015 modules and destructuring assignment
- import React from 'react';
- import renderer from 'react-test-renderer';
- import {plugins, format as prettyFormat} from 'pretty-format';
-
- const {ReactElement, ReactTestComponent} = plugins;
- ```
-
- ```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
-
- <!-- prettier-ignore -->
- | 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. Side note: `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],
- }
- */
- ```
|