Test how pretty-format compares to React renderer

output.txt

Input
    <App />

React DOM rendering
    <div></div>

Prettyprint rendering ReactElement
    <App />

Prettyprint rendering ReactTestComponent
    <div
  id={undefined}
/>


Input
    <div id={undefined} />

React DOM rendering
    <div></div>

Prettyprint rendering ReactElement
    <Viewport
  id={undefined}
/>

Prettyprint rendering ReactTestComponent
    <div
  id={undefined}
/>

test-prettyformat.js

import prettyFormat from 'pretty-format';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import renderer from 'react-test-renderer';

const {ReactElement, ReactTestComponent} = prettyFormat.plugins;

/**
 * Setup example
 *
 *    const Viewport = (props) => <div id={props.id} />
 *    const App = () => <Viewport />
 *    const app = <App />
 *    const viewport = <Viewport id={undefined} />
 */
const Viewport = props => React.createElement("div", { id: props.id });
const App = () => React.createElement(Viewport, null);
const app = React.createElement(App, null);
const viewport = React.createElement(Viewport, { id: undefined });

/**
 * Tests
 */
(function(){
  const input = '<App />';
  const markup = ReactDOMServer.renderToStaticMarkup(app);
  const pretty1 = prettyFormat(app, {plugins: [ReactElement]});
  const pretty2 = prettyFormat(renderer.create(app).toJSON(), {plugins: [ReactTestComponent]});

  console.log(`Input
    ${input}

  React DOM rendering
    ${markup}

  Prettyprint rendering ReactElement
    ${pretty1}

  Prettyprint rendering ReactTestComponent
    ${pretty2}`
  );
}());

(function(){
  const input = '<div id={undefined} />';
  const markup = ReactDOMServer.renderToStaticMarkup(viewport);
  const pretty1 = prettyFormat(viewport, {plugins: [ReactElement]});
  const pretty2 = prettyFormat(renderer.create(viewport).toJSON(), {plugins: [ReactTestComponent]});

  console.log(`Input
    ${input}

  React DOM rendering
    ${markup}

  Prettyprint rendering ReactElement
    ${pretty1}

  Prettyprint rendering ReactTestComponent
    ${pretty2}`
  );
}());