How to use the pretty-format.plugins function in pretty-format

*
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
import prettyFormat from 'pretty-format'
import { isElement } from './isElement'

const { DOMElement, DOMCollection } = prettyFormat.plugins

function format (htmlElement, maxLength, options) {
  if (htmlElement.documentElement) {
    // eslint-disable-next-line no-param-reassign
    htmlElement = htmlElement.documentElement
  }

  const debugContent = prettyFormat(htmlElement, {
    plugins: [DOMElement, DOMCollection],
    printFunctionName: false,
    highlight: true,
    ...options,
  })
  return typeof maxLength !== 'undefined' && htmlElement.outerHTML.length > maxLength
    ? `${debugContent.slice(0, maxLength)}...`
    : debugContent

return (accOutputs || []).concat(outputs || []);
};

/**
 *
 * @param input
 * @param [generatorState]
 * @returns {function(*, *): {hasGeneratedInput: boolean, input: *, generatorState: *}}
 */
export function constGen(input, generatorState) {
  return function constGen(extS, genS) {
    return { hasGeneratedInput: true, input, generatorState };
  };
}

const { DOMElement, DOMCollection } = prettyFormat.plugins;

export function prettyDOM(htmlElement, maxLength, options) {
  if (htmlElement.documentElement) {
    htmlElement = htmlElement.documentElement;
  }

  const debugContent = prettyFormat(htmlElement, {
    plugins: [DOMElement, DOMCollection],
    printFunctionName: false,
    // highlight: true,
    ...options
  });
  return maxLength !== undefined && htmlElement.outerHTML.length > maxLength
    ? `${debugContent.slice(0, maxLength)}...`
    : debugContent;
}

const root = document.createElement('div')
  // not appending because we don't want to mess up the div they give us
  root.innerHTML = div.outerHTML
  const nodes = getNodes(root)
  const selectors = getSelectors(nodes)
  const {styles, allSelectors} = getStylesAndAllSelectors(
    selectors,
    getGlamorStyleSheet(),
  )
  return replaceSelectors(
    allSelectors,
    styles,
    prettyFormat(extract(root), {
      plugins: [
        prettyFormat.plugins.DOMElement,
        prettyFormat.plugins.DOMCollection,
      ],
    }),
  )
}

// @flow

'use strict';

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

const { ReactElement } = prettyFormat.plugins;
const reactElement = Symbol.for('react.element');

function getReactComponentSerializer() {
  let renderer;
  try {
    renderer = require('react-test-renderer'); // eslint-disable-line import/no-extraneous-dependencies
  } catch (error) {
    if (error.code === 'MODULE_NOT_FOUND') {
      throw new Error(
        `Failed to load optional module "react-test-renderer". ` +
          `If you need to compare React elements, please add "react-test-renderer" to your ` +
          `project's dependencies.\n` +
          `${error.message}`
      );
    }
    throw error;

function fromDOMNode(div, extract = r => r.children[0]) {
  const root = document.createElement('div')
  // not appending because we don't want to mess up the div they give us
  root.innerHTML = div.outerHTML
  const nodes = getNodes(root)
  const selectors = getSelectors(nodes)
  const {styles, allSelectors} = getStylesAndAllSelectors(
    selectors,
    getGlamorStyleSheet(),
  )
  return replaceSelectors(
    allSelectors,
    styles,
    prettyFormat(extract(root), {
      plugins: [
        prettyFormat.plugins.DOMElement,
        prettyFormat.plugins.DOMCollection,
      ],
    }),
  )
}

debug() {
        return prettyFormat(this, {
            escapeRegex: true,
            plugins: [{ test, print }, prettyFormat.plugins.DOMElement],
            printFunctionName: false,
        });
    }

import React from 'react';
import prettyFormat from 'pretty-format';

import { toJSON } from './to-json';

const { ReactTestComponent, ReactElement } = prettyFormat.plugins;

function prettyPrint(element, maxLength, options = {}) {
  let plugins = [ReactTestComponent, ReactElement];
  const { debug, ...rest } = options;

  const debugContent = prettyFormat(toJSON(element, debug), {
    plugins: plugins,
    printFunctionName: false,
    highlight: true,
    ...rest,
  });

  return maxLength !== undefined && debugContent && debugContent.toString().length > maxLength
    ? `${debugContent.slice(0, maxLength)}...`
    : debugContent;
}

.print(renderer.create(ui).toJSON(), val =>
      prettyFormat(val, {
        plugins: [prettyFormat.plugins.ReactTestComponent],
      })
    )

justifyContent: "center"
          }}
        >
          {el}
        
        <pre style="{{">          {prettyFormat(el, {
            plugins: [prettyFormat.plugins.ReactElement]
          })}
        </pre>
      
    );
  }
});