Initial example test. Will iterate from here.

.eslintignore

@@ -1,5 +1,6 @@
 node_modules
 
+flow-typed
 shells/browser/chrome/build
 shells/browser/firefox/build
 shells/dev/build

.flowconfig

@@ -19,6 +19,7 @@ shells/dev/build/*
 [include]
 
 [libs]
+/flow-typed/
 ./flow.js
 
 [lints]

.gitignore

@@ -9,3 +9,4 @@ yarn-error.log
 yarn-error.log
 .vscode
 .idea
+.watchmanconfig

package.json

@@ -9,6 +9,18 @@
   "jest": {
     "modulePathIgnorePatterns": [
       "<rootDir>/shells"
+    ],
+    "modulePaths": [
+      "<rootDir>"
+    ],
+    "moduleNameMapper": {
+      "^src/(.*)$": "<rootDir>/src/$1"
+    },
+    "snapshotSerializers": [
+      "<rootDir>/src/__tests__/storeSerializer"
+    ],
+    "testMatch": [
+      "**/__tests__/*-test.js"
     ]
   },
   "scripts": {
@@ -26,6 +38,7 @@
     "prettier": "prettier --write '**/*.{js,json,css}'",
     "start": "cd ./shells/dev && opener ./index.html && webpack --config webpack.config.js --watch",
     "test": "jest",
+    "test-debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
     "test:chrome": "node ./shells/browser/chrome/test",
     "test:firefox": "node ./shells/browser/firefox/test",
     "test:standalone": "cd packages/react-devtools && yarn start",
@@ -52,7 +65,7 @@
     "adm-zip": "^0.4.7",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^9.0.0",
-    "babel-jest": "^23.6.0",
+    "babel-jest": "^24.7.1",
     "babel-loader": "^8.0.4",
     "child-process-promise": "^2.2.1",
     "chrome-launch": "^1.1.4",
@@ -86,7 +99,7 @@
     "gh-pages": "^1.0.0",
     "html2canvas": "^1.0.0-alpha.12",
     "immutable": "3.7.6",
-    "jest": "22.1.4",
+    "jest": "^24.7.1",
     "lerna": "^2.8.0",
     "lint-staged": "^7.0.5",
     "lodash.throttle": "^4.1.1",
@@ -99,10 +112,10 @@
     "opener": "^1.5.1",
     "prettier": "^1.16.1",
     "prop-types": "^15.6.2",
-    "react": "^16.8.4",
+    "react": "^16.8.6",
     "react-color": "^2.11.7",
-    "react-dom": "^16.8.4",
-    "react-is": "^16.8.4",
+    "react-dom": "^16.8.6",
+    "react-is": "^16.8.6",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.7.2",
     "scheduler": "^0.13",

src/__tests__/__snapshots__/sanity-test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`sanity should pass 1`] = `
+▾ <Grandparent>
+  ▾ <Parent>
+      <Child key="one">
+      <Child key="two">
+  ▾ <Parent>
+      <Child key="one">
+      <Child key="two">
+`;

src/__tests__/sanity-test.js

@@ -0,0 +1,41 @@
+// @flow
+
+import { setup } from './utils';
+
+describe('sanity', () => {
+  let React;
+  let ReactDOM;
+  let store;
+
+  beforeEach(() => {
+    store = setup();
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+  });
+
+  it('should pass', () => {
+    function Grandparent() {
+      return (
+        <React.Fragment>
+          <Parent />
+          <Parent />
+        </React.Fragment>
+      );
+    }
+
+    function Parent() {
+      return [<Child key="one" />, <Child key="two" />];
+    }
+
+    function Child() {
+      return <div>Hi!</div>;
+    }
+
+    ReactDOM.render(<Grandparent />, document.createElement('div'));
+
+    jest.runAllTimers(); // Flush Bridge operations
+
+    expect(store).toMatchSnapshot();
+  });
+});

src/__tests__/storeSerializer.js

@@ -0,0 +1,9 @@
+import Store from 'src/devtools/store';
+
+export function test(value) {
+  return value instanceof Store;
+}
+
+export function print(value, serialize, indent) {
+  return value.__toSnapshot();
+}

src/__tests__/utils.js

@@ -0,0 +1,40 @@
+// @flow
+
+import Agent from 'src/backend/agent';
+import { initBackend } from 'src/backend';
+import Bridge from 'src/bridge';
+import Store from 'src/devtools/store';
+import { installHook } from 'src/hook';
+
+export function setup(): Store {
+  installHook(global);
+
+  jest.useFakeTimers();
+
+  // TODO Replace this with a polyfill?
+  global.localStorage = {
+    getItem: jest.fn(),
+    setItem: jest.fn(),
+    clear: jest.fn(),
+  };
+
+  const listeners = [];
+  const bridge = new Bridge(
+    {
+      listen(callback) {
+        listeners.push(callback);
+      },
+      send(event: string, payload: any, transferable?: Array<any>) {
+        listeners.forEach(callback => callback({ event, payload }));
+      },
+    },
+    { batchDuration: 0 }
+  );
+
+  const agent = new Agent();
+  agent.addBridge(bridge);
+
+  initBackend(global.__REACT_DEVTOOLS_GLOBAL_HOOK__, agent, global);
+
+  return new Store(bridge);
+}

src/bridge.js

@@ -6,19 +6,31 @@ import type { Wall } from './types';
 
 const BATCH_DURATION = 100;
 
+type Config = {|
+  batchDuration?: number,
+|};
+
 type Message = {|
   event: string,
   payload: any,
 |};
 
 export default class Bridge extends EventEmitter {
+  _batchDuration: number = BATCH_DURATION;
   _messageQueue: Array<any> = [];
   _timeoutID: TimeoutID | null = null;
   _wall: Wall;
 
-  constructor(wall: Wall) {
+  constructor(wall: Wall, config?: Config) {
     super();
 
+    if (config != null) {
+      const { batchDuration } = config;
+      if (batchDuration !== undefined) {
+        this._batchDuration = batchDuration;
+      }
+    }
+
     this._wall = wall;
 
     wall.listen((message: Message) => {
@@ -32,10 +44,9 @@ export default class Bridge extends EventEmitter {
     // - if there hasn't been a message recently, we set a timer for 0 ms in
     //   the future, allowing all messages created in the same tick to be sent
     //   together
-    // - if there *has* been a message flushed in the last BATCH_DURATION ms
+    // - if there *has* been a message flushed in the last X ms
     //   (or we're waiting for our setTimeout-0 to fire), then _timeoutID will
     //   be set, and we'll simply add to the queue and wait for that
-
     this._messageQueue.push(event, payload, transferable);
     if (!this._timeoutID) {
       this._timeoutID = setTimeout(this._flush, 0);
@@ -56,10 +67,10 @@ export default class Bridge extends EventEmitter {
       }
       this._messageQueue.length = 0;
 
-      // Check again for queued messages in BATCH_DURATION ms. This will keep
+      // Check again for queued messages in X ms. This will keep
       // flushing in a loop as long as messages continue to be added. Once no
       // more are, the timer expires.
-      this._timeoutID = setTimeout(this._flush, BATCH_DURATION);
+      this._timeoutID = setTimeout(this._flush, this._batchDuration);
     }
   };
 }

src/devtools/store.js

@@ -836,39 +836,30 @@ export default class Store extends EventEmitter {
     this._bridge.removeListener('shutdown', this.onBridgeShutdown);
   };
 
-  // DEBUG
-  __printTree = () => {
-    if (__DEBUG__) {
-      console.group('__printTree()');
-      this._roots.forEach((rootID: number) => {
-        const printElement = (id: number) => {
-          const element = ((this._idToElement.get(id): any): Element);
-          console.log(
-            `${'•'.repeat(element.depth)}${element.id}:${element.displayName ||
-              ''} ${element.key ? `key:"${element.key}"` : ''} (${
-              element.weight
-            })`
-          );
-          element.children.forEach(printElement);
-        };
-        const root = ((this._idToElement.get(rootID): any): Element);
-        console.group(`${rootID}:root (${root.weight})`);
-        root.children.forEach(printElement);
-        console.groupEnd();
-      });
-      console.group(`List of ${this.numElements} elements`);
-      for (let i = 0; i < this.numElements; i++) {
-        //if (i === 4) { debugger }
-        const element = this.getElementAtIndex(i);
-        if (element != null) {
-          console.log(
-            `${'•'.repeat(element.depth)}${i}: ${element.displayName ||
-              'Unknown'}`
-          );
-        }
+  // Jest snapshot testing
+  __toSnapshot = () => {
+    const snapshot = [];
+
+    // TODO Include root (ids) in the snapshot?
+    for (let i = 0; i < this._weightAcrossRoots; i++) {
+      const element = ((this.getElementAtIndex(i): any): Element);
+
+      let prefix = ' ';
+      if (element.children.length > 0) {
+        prefix = element.isCollapsed ? '▸' : '▾';
       }
-      console.groupEnd();
-      console.groupEnd();
+
+      let key = '';
+      if (element.key !== null) {
+        key = ` key="${element.key}"`;
+      }
+
+      snapshot.push(
+        `${'  '.repeat(element.depth)}${prefix} <${element.displayName ||
+          'null'}${key}>`
+      );
     }
+
+    return snapshot.join('\n');
   };
 }