Skip to content

Instantly share code, notes, and snippets.

@brunotavares
Last active May 10, 2018 22:44
Show Gist options
  • Save brunotavares/63ff12e7b7b12782c8152127c0916fde to your computer and use it in GitHub Desktop.
Save brunotavares/63ff12e7b7b12782c8152127c0916fde to your computer and use it in GitHub Desktop.
Test how pretty-format compares to React renderer
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}
/>
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}`
);
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment