From 2b1bf479d13a115693e17cf7a1ccd627509187ad Mon Sep 17 00:00:00 2001
From: Neo <nihgwu@live.com>
Date: Fri, 25 May 2018 04:30:38 +0800
Subject: [PATCH 1/3] make test in react-test-renderer painless

---
 source/Grid/Grid.js | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/source/Grid/Grid.js b/source/Grid/Grid.js
index c5524131d..5348d9ad7 100644
--- a/source/Grid/Grid.js
+++ b/source/Grid/Grid.js
@@ -622,13 +622,16 @@ class Grid extends React.PureComponent<Props, State> {
       });
     }
 
-    // setting the ref's scrollLeft and scrollTop.
-    // Somehow in MultiGrid the main grid doesn't trigger a update on mount.
-    if (this._scrollingContainer.scrollLeft !== this.state.scrollLeft) {
-      this._scrollingContainer.scrollLeft = this.state.scrollLeft;
-    }
-    if (this._scrollingContainer.scrollTop !== this.state.scrollTop) {
-      this._scrollingContainer.scrollTop = this.state.scrollTop;
+    // refs don't work in `react-test-renderer`
+    if (this._scrollingContainer) {
+      // setting the ref's scrollLeft and scrollTop.
+      // Somehow in MultiGrid the main grid doesn't trigger a update on mount.
+      if (this._scrollingContainer.scrollLeft !== this.state.scrollLeft) {
+        this._scrollingContainer.scrollLeft = this.state.scrollLeft;
+      }
+      if (this._scrollingContainer.scrollTop !== this.state.scrollTop) {
+        this._scrollingContainer.scrollTop = this.state.scrollTop;
+      }
     }
 
     // Don't update scroll offset if the size is 0; we don't render any cells in this case.

From 64bb387eeca39d30752e19b8661530da1a2da094 Mon Sep 17 00:00:00 2001
From: Neo <nihgwu@live.com>
Date: Fri, 25 May 2018 07:48:01 +0800
Subject: [PATCH 2/3] add test case

---
 package.json                                |   3 +-
 source/Grid/Grid.jest.js                    |   6 +
 source/Grid/__snapshots__/Grid.jest.js.snap | 323 ++++++++++++++++++++
 yarn.lock                                   |   8 +
 4 files changed, 339 insertions(+), 1 deletion(-)
 create mode 100644 source/Grid/__snapshots__/Grid.jest.js.snap

diff --git a/package.json b/package.json
index 225d181af..08df2bca2 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,7 @@
       "!source/TestUtils.js",
       "!**/*.example.js"
     ],
-    "testRegex": ".(jest|e2e|ssr).js",
+    "testRegex": ".(jest|e2e|ssr).js$",
     "verbose": true
   },
   "devDependencies": {
@@ -155,6 +155,7 @@
     "react-dom": "^16.2.0",
     "react-router": "^4.1.1",
     "react-router-dom": "^4.1.1",
+    "react-test-renderer": "^16.2.0",
     "rimraf": "^2.4.3",
     "rollup": "^0.57.1",
     "rollup-plugin-babel": "^3.0.3",
diff --git a/source/Grid/Grid.jest.js b/source/Grid/Grid.jest.js
index 83db6b2a4..5c5acc84d 100644
--- a/source/Grid/Grid.jest.js
+++ b/source/Grid/Grid.jest.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {findDOMNode} from 'react-dom';
 import {Simulate} from 'react-dom/test-utils';
+import TestRenderer from 'react-test-renderer';
 import {render} from '../TestUtils';
 import Grid, {DEFAULT_SCROLLING_RESET_TIME_INTERVAL} from './Grid';
 import {CellMeasurer, CellMeasurerCache} from '../CellMeasurer';
@@ -2612,4 +2613,9 @@ describe('Grid', () => {
       expect(onScrollbarPresenceChange).not.toHaveBeenCalled();
     });
   });
+
+  it('should not complain when using react-test-renderer', () => {
+    const tree = TestRenderer.create(getMarkup()).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/source/Grid/__snapshots__/Grid.jest.js.snap b/source/Grid/__snapshots__/Grid.jest.js.snap
new file mode 100644
index 000000000..71cab8af2
--- /dev/null
+++ b/source/Grid/__snapshots__/Grid.jest.js.snap
@@ -0,0 +1,323 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Grid should not complain when using react-test-renderer 1`] = `
+<div
+  aria-label="grid"
+  aria-readonly={true}
+  className="ReactVirtualized__Grid"
+  id={undefined}
+  onScroll={[Function]}
+  role="grid"
+  style={
+    Object {
+      "WebkitOverflowScrolling": "touch",
+      "boxSizing": "border-box",
+      "direction": "ltr",
+      "height": 100,
+      "overflowX": "auto",
+      "overflowY": "auto",
+      "position": "relative",
+      "width": 200,
+      "willChange": "transform",
+    }
+  }
+  tabIndex={0}
+>
+  <div
+    className="ReactVirtualized__Grid__innerScrollContainer"
+    role="rowgroup"
+    style={
+      Object {
+        "height": 2000,
+        "maxHeight": 2000,
+        "maxWidth": 2500,
+        "overflow": "hidden",
+        "pointerEvents": "",
+        "position": "relative",
+        "width": 2500,
+      }
+    }
+  >
+    <div
+      className="gridItem"
+      style={
+        Object {
+          "height": 20,
+          "left": 0,
+          "position": "absolute",
+          "top": 0,
+          "width": 50,
+        }
+      }
+    >
+      row:0, column:0
+    </div>
+    <div
+      className="gridItem"
+      style={
+        Object {
+          "height": 20,
+          "left": 50,
+          "position": "absolute",
+          "top": 0,
+          "width": 50,
+        }
+      }
+    >
+      row:0, column:1
+    </div>
+    <div
+      className="gridItem"
+      style={
+        Object {
+          "height": 20,
+          "left": 100,
+          "position": "absolute",
+          "top": 0,
+          "width": 50,
+        }
+      }
+    >
+      row:0, column:2
+    </div>
+    <div
+      className="gridItem"
+      style={
+        Object {
+          "height": 20,
+          "left": 150,
+          "position": "absolute",
+          "top": 0,
+          "width": 50,
+        }
+      }
+    >
+      row:0, column:3
+    </div>
+    <div
+      className="gridItem"
+      style={
+        Object {
+          "height": 20,
+          "left": 0,
+          "position": "absolute",
+          "top": 20,
+          "width": 50,
+        }
+      }
+    >
+      row:1, column:0
+    </div>
+    <div
+      className="gridItem"
+      style={
+        Object {
+          "height": 20,
+          "left": 50,
+          "position": "absolute",
+          "top": 20,
+          "width": 50,
+        }
+      }
+    >
+      row:1, column:1
+    </div>
+    <div
+      className="gridItem"
+      style={
+        Object {
+          "height": 20,
+          "left": 100,
+          "position": "absolute",
+          "top": 20,
+          "width": 50,
+        }
+      }
+    >
+      row:1, column:2
+    </div>
+    <div
+      className="gridItem"
+      style={
+        Object {
+          "height": 20,
+          "left": 150,
+          "position": "absolute",
+          "top": 20,
+          "width": 50,
+        }
+      }
+    >
+      row:1, column:3
+    </div>
+    <div
+      className="gridItem"
+      style={
+        Object {
+          "height": 20,
+          "left": 0,
+          "position": "absolute",
+          "top": 40,
+          "width": 50,
+        }
+      }
+    >
+      row:2, column:0
+    </div>
+    <div
+      className="gridItem"
+      style={
+        Object {
+          "height": 20,
+          "left": 50,
+          "position": "absolute",
+          "top": 40,
+          "width": 50,
+        }
+      }
+    >
+      row:2, column:1
+    </div>
+    <div
+      className="gridItem"
+      style={
+        Object {
+          "height": 20,
+          "left": 100,
+          "position": "absolute",
+          "top": 40,
+          "width": 50,
+        }
+      }
+    >
+      row:2, column:2
+    </div>
+    <div
+      className="gridItem"
+      style={
+        Object {
+          "height": 20,
+          "left": 150,
+          "position": "absolute",
+          "top": 40,
+          "width": 50,
+        }
+      }
+    >
+      row:2, column:3
+    </div>
+    <div
+      className="gridItem"
+      style={
+        Object {
+          "height": 20,
+          "left": 0,
+          "position": "absolute",
+          "top": 60,
+          "width": 50,
+        }
+      }
+    >
+      row:3, column:0
+    </div>
+    <div
+      className="gridItem"
+      style={
+        Object {
+          "height": 20,
+          "left": 50,
+          "position": "absolute",
+          "top": 60,
+          "width": 50,
+        }
+      }
+    >
+      row:3, column:1
+    </div>
+    <div
+      className="gridItem"
+      style={
+        Object {
+          "height": 20,
+          "left": 100,
+          "position": "absolute",
+          "top": 60,
+          "width": 50,
+        }
+      }
+    >
+      row:3, column:2
+    </div>
+    <div
+      className="gridItem"
+      style={
+        Object {
+          "height": 20,
+          "left": 150,
+          "position": "absolute",
+          "top": 60,
+          "width": 50,
+        }
+      }
+    >
+      row:3, column:3
+    </div>
+    <div
+      className="gridItem"
+      style={
+        Object {
+          "height": 20,
+          "left": 0,
+          "position": "absolute",
+          "top": 80,
+          "width": 50,
+        }
+      }
+    >
+      row:4, column:0
+    </div>
+    <div
+      className="gridItem"
+      style={
+        Object {
+          "height": 20,
+          "left": 50,
+          "position": "absolute",
+          "top": 80,
+          "width": 50,
+        }
+      }
+    >
+      row:4, column:1
+    </div>
+    <div
+      className="gridItem"
+      style={
+        Object {
+          "height": 20,
+          "left": 100,
+          "position": "absolute",
+          "top": 80,
+          "width": 50,
+        }
+      }
+    >
+      row:4, column:2
+    </div>
+    <div
+      className="gridItem"
+      style={
+        Object {
+          "height": 20,
+          "left": 150,
+          "position": "absolute",
+          "top": 80,
+          "width": 50,
+        }
+      }
+    >
+      row:4, column:3
+    </div>
+  </div>
+</div>
+`;
diff --git a/yarn.lock b/yarn.lock
index d27103878..0583d676c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6510,6 +6510,14 @@ react-router@^4.1.1:
     prop-types "^15.5.4"
     warning "^3.0.0"
 
+react-test-renderer@^16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.2.0.tgz#bddf259a6b8fcd8555f012afc8eacc238872a211"
+  dependencies:
+    fbjs "^0.8.16"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+
 react@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"

From a9a21cc77b7b4a062fde0e3b79db963f976dfee9 Mon Sep 17 00:00:00 2001
From: Wei-Wei Wu <wuxx1045@umn.edu>
Date: Fri, 1 Jun 2018 02:12:53 -0700
Subject: [PATCH 3/3] no snapshots. testing instance to exist

---
 source/Grid/Grid.jest.js                    |   4 +-
 source/Grid/__snapshots__/Grid.jest.js.snap | 323 --------------------
 2 files changed, 2 insertions(+), 325 deletions(-)
 delete mode 100644 source/Grid/__snapshots__/Grid.jest.js.snap

diff --git a/source/Grid/Grid.jest.js b/source/Grid/Grid.jest.js
index 5c5acc84d..5f6c48197 100644
--- a/source/Grid/Grid.jest.js
+++ b/source/Grid/Grid.jest.js
@@ -2615,7 +2615,7 @@ describe('Grid', () => {
   });
 
   it('should not complain when using react-test-renderer', () => {
-    const tree = TestRenderer.create(getMarkup()).toJSON();
-    expect(tree).toMatchSnapshot();
+    const instance = TestRenderer.create(getMarkup()).getInstance();
+    expect(instance).toBeTruthy();
   });
 });
diff --git a/source/Grid/__snapshots__/Grid.jest.js.snap b/source/Grid/__snapshots__/Grid.jest.js.snap
deleted file mode 100644
index 71cab8af2..000000000
--- a/source/Grid/__snapshots__/Grid.jest.js.snap
+++ /dev/null
@@ -1,323 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Grid should not complain when using react-test-renderer 1`] = `
-<div
-  aria-label="grid"
-  aria-readonly={true}
-  className="ReactVirtualized__Grid"
-  id={undefined}
-  onScroll={[Function]}
-  role="grid"
-  style={
-    Object {
-      "WebkitOverflowScrolling": "touch",
-      "boxSizing": "border-box",
-      "direction": "ltr",
-      "height": 100,
-      "overflowX": "auto",
-      "overflowY": "auto",
-      "position": "relative",
-      "width": 200,
-      "willChange": "transform",
-    }
-  }
-  tabIndex={0}
->
-  <div
-    className="ReactVirtualized__Grid__innerScrollContainer"
-    role="rowgroup"
-    style={
-      Object {
-        "height": 2000,
-        "maxHeight": 2000,
-        "maxWidth": 2500,
-        "overflow": "hidden",
-        "pointerEvents": "",
-        "position": "relative",
-        "width": 2500,
-      }
-    }
-  >
-    <div
-      className="gridItem"
-      style={
-        Object {
-          "height": 20,
-          "left": 0,
-          "position": "absolute",
-          "top": 0,
-          "width": 50,
-        }
-      }
-    >
-      row:0, column:0
-    </div>
-    <div
-      className="gridItem"
-      style={
-        Object {
-          "height": 20,
-          "left": 50,
-          "position": "absolute",
-          "top": 0,
-          "width": 50,
-        }
-      }
-    >
-      row:0, column:1
-    </div>
-    <div
-      className="gridItem"
-      style={
-        Object {
-          "height": 20,
-          "left": 100,
-          "position": "absolute",
-          "top": 0,
-          "width": 50,
-        }
-      }
-    >
-      row:0, column:2
-    </div>
-    <div
-      className="gridItem"
-      style={
-        Object {
-          "height": 20,
-          "left": 150,
-          "position": "absolute",
-          "top": 0,
-          "width": 50,
-        }
-      }
-    >
-      row:0, column:3
-    </div>
-    <div
-      className="gridItem"
-      style={
-        Object {
-          "height": 20,
-          "left": 0,
-          "position": "absolute",
-          "top": 20,
-          "width": 50,
-        }
-      }
-    >
-      row:1, column:0
-    </div>
-    <div
-      className="gridItem"
-      style={
-        Object {
-          "height": 20,
-          "left": 50,
-          "position": "absolute",
-          "top": 20,
-          "width": 50,
-        }
-      }
-    >
-      row:1, column:1
-    </div>
-    <div
-      className="gridItem"
-      style={
-        Object {
-          "height": 20,
-          "left": 100,
-          "position": "absolute",
-          "top": 20,
-          "width": 50,
-        }
-      }
-    >
-      row:1, column:2
-    </div>
-    <div
-      className="gridItem"
-      style={
-        Object {
-          "height": 20,
-          "left": 150,
-          "position": "absolute",
-          "top": 20,
-          "width": 50,
-        }
-      }
-    >
-      row:1, column:3
-    </div>
-    <div
-      className="gridItem"
-      style={
-        Object {
-          "height": 20,
-          "left": 0,
-          "position": "absolute",
-          "top": 40,
-          "width": 50,
-        }
-      }
-    >
-      row:2, column:0
-    </div>
-    <div
-      className="gridItem"
-      style={
-        Object {
-          "height": 20,
-          "left": 50,
-          "position": "absolute",
-          "top": 40,
-          "width": 50,
-        }
-      }
-    >
-      row:2, column:1
-    </div>
-    <div
-      className="gridItem"
-      style={
-        Object {
-          "height": 20,
-          "left": 100,
-          "position": "absolute",
-          "top": 40,
-          "width": 50,
-        }
-      }
-    >
-      row:2, column:2
-    </div>
-    <div
-      className="gridItem"
-      style={
-        Object {
-          "height": 20,
-          "left": 150,
-          "position": "absolute",
-          "top": 40,
-          "width": 50,
-        }
-      }
-    >
-      row:2, column:3
-    </div>
-    <div
-      className="gridItem"
-      style={
-        Object {
-          "height": 20,
-          "left": 0,
-          "position": "absolute",
-          "top": 60,
-          "width": 50,
-        }
-      }
-    >
-      row:3, column:0
-    </div>
-    <div
-      className="gridItem"
-      style={
-        Object {
-          "height": 20,
-          "left": 50,
-          "position": "absolute",
-          "top": 60,
-          "width": 50,
-        }
-      }
-    >
-      row:3, column:1
-    </div>
-    <div
-      className="gridItem"
-      style={
-        Object {
-          "height": 20,
-          "left": 100,
-          "position": "absolute",
-          "top": 60,
-          "width": 50,
-        }
-      }
-    >
-      row:3, column:2
-    </div>
-    <div
-      className="gridItem"
-      style={
-        Object {
-          "height": 20,
-          "left": 150,
-          "position": "absolute",
-          "top": 60,
-          "width": 50,
-        }
-      }
-    >
-      row:3, column:3
-    </div>
-    <div
-      className="gridItem"
-      style={
-        Object {
-          "height": 20,
-          "left": 0,
-          "position": "absolute",
-          "top": 80,
-          "width": 50,
-        }
-      }
-    >
-      row:4, column:0
-    </div>
-    <div
-      className="gridItem"
-      style={
-        Object {
-          "height": 20,
-          "left": 50,
-          "position": "absolute",
-          "top": 80,
-          "width": 50,
-        }
-      }
-    >
-      row:4, column:1
-    </div>
-    <div
-      className="gridItem"
-      style={
-        Object {
-          "height": 20,
-          "left": 100,
-          "position": "absolute",
-          "top": 80,
-          "width": 50,
-        }
-      }
-    >
-      row:4, column:2
-    </div>
-    <div
-      className="gridItem"
-      style={
-        Object {
-          "height": 20,
-          "left": 150,
-          "position": "absolute",
-          "top": 80,
-          "width": 50,
-        }
-      }
-    >
-      row:4, column:3
-    </div>
-  </div>
-</div>
-`;