Skip to content

Instantly share code, notes, and snippets.

@saifelse
Created August 25, 2016 08:43
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save saifelse/c0c86680d62514235d57011f73d8f276 to your computer and use it in GitHub Desktop.
Save saifelse/c0c86680d62514235d57011f73d8f276 to your computer and use it in GitHub Desktop.
Example of how to use react-addons-perf in tests
/* eslint-disable no-console */
import Perf from 'react-addons-perf';
import sinon from 'sinon';
/**
* Counts the number of DOM operations that occurred while executing `fn`.
*
* Example usage:
# import React from 'react';
# import ReactDOM from 'react-dom';
# const node = document.createElement('div');
# const component = ReactDOM.render(<div><span>abc</span><span>def</span></div>, node);
# const opsCount = getDOMOpsCount(() => {
# ReactDOM.render(<div><span>ghi</span><span>jkl</span></div>, node);
# });
* console.log(opsCount); // 2
*
* @param {Function} fn function that renders a component into a DOM node with React
* @return {Number} number of DOM operations
*/
export function getDOMOpsCount(fn) {
const oldTable = console.table;
console.table = sinon.stub();
try {
Perf.start();
fn();
Perf.stop();
Perf.printDOM();
sinon.assert.calledOnce(console.table); // printDOM calls `console.table(results)`
return console.table.getCall(0).args[0].length;
} finally {
console.table = oldTable;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment