mziemer21 · September 12, 2016 08:05 · Aug 25, 2016
diff --git a/ReactPerfTester.js b/ReactPerfTester.js
@@ -0,0 +1,34 @@
+/* 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;
+  }
+}
No results found