diff --git a/test/react-web/client/Query.js b/test/react-web/client/Query.test.js
similarity index 91%
rename from test/react-web/client/Query.js
rename to test/react-web/client/Query.test.js
index 59f3a3f3da..4dd7d3539e 100644
--- a/test/react-web/client/Query.js
+++ b/test/react-web/client/Query.test.js
@@ -26,10 +26,6 @@ const mocks = [
   },
 ];
 
-const options = {
-  query,
-};
-
 const catchAsyncError = (done, cb) => {
   try {
     cb();
@@ -38,17 +34,6 @@ const catchAsyncError = (done, cb) => {
   }
 };
 
-class ErrorBoundary extends React.Component {
-  componentDidCatch(error, errorInfo) {
-    console.log(error);
-    console.log(errorInfo);
-  }
-
-  render() {
-    return this.props.children;
-  }
-}
-
 describe('Query component', () => {
   it('calls the children prop', done => {
     const Component = () => (
@@ -352,17 +337,17 @@ describe('Query component', () => {
             if (count === 1) {
               // first data
               expect(variables).toEqual({ first: 1 });
-              expect(data).toEqual(data1);
+              expect(data).toMatchSnapshot('refetch prop: first render data');
             }
             if (count === 3) {
               // second data
               expect(variables).toEqual({ first: 1 });
-              expect(data).toEqual(data2);
+              expect(data).toMatchSnapshot('refetch prop: second render data');
             }
             if (count === 5) {
               // third data
               expect(variables).toEqual({ first: 2 });
-              expect(data).toEqual(data3);
+              expect(data).toMatchSnapshot('refetch prop: third render data');
             }
           });
 
@@ -376,11 +361,15 @@ describe('Query component', () => {
             result
               .refetch()
               .then(result1 => {
-                expect(result1.data).toEqual(data2);
+                expect(result1.data).toMatchSnapshot(
+                  'refetch prop: result refetch call 1',
+                );
                 return result.refetch({ first: 2 });
               })
               .then(result2 => {
-                expect(result2.data).toEqual(data3);
+                expect(result2.data).toMatchSnapshot(
+                  'refetch prop: result refetch call 2',
+                );
                 done();
               })
               .catch(done.fail);
@@ -440,21 +429,18 @@ describe('Query component', () => {
                 }),
               })
               .then(result => {
-                expect(result.data).toEqual(data2);
+                expect(result.data).toMatchSnapshot(
+                  'fetchMore render prop: result fetchMore call',
+                );
               })
               .catch(done.fail);
           } else if (count === 1) {
             catchAsyncError(done, () => {
               expect(data.variables).toEqual(variables);
+              expect(data.data).toMatchSnapshot(
+                'fetchMore render prop: render data',
+              );
 
-              expect(data.data).toEqual({
-                allPeople: {
-                  people: [
-                    ...data1.allPeople.people,
-                    ...data2.allPeople.people,
-                  ],
-                },
-              });
               done();
             });
           }
@@ -484,11 +470,11 @@ describe('Query component', () => {
             return null;
           }
           if (count === 0) {
-            expect(result.data).toEqual(data1);
+            expect(result.data).toMatchSnapshot();
           } else if (count === 1) {
-            expect(result.data).toEqual(data2);
+            expect(result.data).toMatchSnapshot();
           } else if (count === 2) {
-            expect(result.data).toEqual(data3);
+            expect(result.data).toMatchSnapshot();
           }
           count++;
           return null;
@@ -547,11 +533,11 @@ describe('Query component', () => {
           }
           catchAsyncError(done, () => {
             if (count === 0) {
-              expect(result.data).toEqual(data1);
+              expect(result.data).toMatchSnapshot();
             } else if (count === 1) {
-              expect(result.data).toEqual(data2);
+              expect(result.data).toMatchSnapshot();
             } else if (count === 2) {
-              expect(result.data).toEqual(data3);
+              expect(result.data).toMatchSnapshot();
             }
           });
 
@@ -607,9 +593,9 @@ describe('Query component', () => {
             return null;
           }
           if (count === 0) {
-            expect(result.data).toEqual(data1);
+            expect(result.data).toMatchSnapshot();
           } else if (count === 1) {
-            expect(result.data).toEqual(data2);
+            expect(result.data).toMatchSnapshot();
             result.stopPolling();
           }
           count++;
@@ -675,7 +661,9 @@ describe('Query component', () => {
           }
           if (isUpdated) {
             catchAsyncError(done, () => {
-              expect(result.data).toEqual(data2);
+              expect(result.data).toMatchSnapshot(
+                'updateQuery render prop: rendered data',
+              );
               done();
             });
 
@@ -685,7 +673,9 @@ describe('Query component', () => {
           setTimeout(() => {
             result.updateQuery((prev, { variables: variablesUpdate }) => {
               catchAsyncError(done, () => {
-                expect(prev).toEqual(data1);
+                expect(prev).toMatchSnapshot(
+                  'updateQuery render prop: result of the updateQuery call',
+                );
                 expect(variablesUpdate).toEqual({ first: 2 });
               });
 
@@ -760,11 +750,11 @@ describe('Query component', () => {
               catchAsyncError(done, () => {
                 if (count === 0) {
                   expect(result.variables).toEqual({ first: 1 });
-                  expect(result.data).toEqual(data1);
+                  expect(result.data).toMatchSnapshot();
                 }
                 if (count === 1) {
                   expect(result.variables).toEqual({ first: 2 });
-                  expect(result.data).toEqual(data2);
+                  expect(result.data).toMatchSnapshot();
                   done();
                 }
               });
@@ -818,14 +808,6 @@ describe('Query component', () => {
         query: query1,
       };
 
-      componentDidMount() {
-        setTimeout(() => {
-          this.setState({
-            query: query2,
-          });
-        }, 50);
-      }
-
       render() {
         const { query } = this.state;
 
@@ -837,10 +819,15 @@ describe('Query component', () => {
               }
               catchAsyncError(done, () => {
                 if (count === 0) {
-                  expect(result.data).toEqual(data1);
+                  expect(result.data).toMatchSnapshot();
+                  setTimeout(() => {
+                    this.setState({
+                      query: query2,
+                    });
+                  });
                 }
                 if (count === 1) {
-                  expect(result.data).toEqual(data2);
+                  expect(result.data).toMatchSnapshot();
                   done();
                 }
               });
@@ -952,7 +939,7 @@ describe('Query component', () => {
                 }
                 catchAsyncError(done, () => {
                   if (count === 0) {
-                    expect(result.data).toEqual(data1);
+                    expect(result.data).toMatchSnapshot();
                     setTimeout(() => {
                       this.setState({
                         client: client2,
@@ -960,7 +947,7 @@ describe('Query component', () => {
                     }, 0);
                   }
                   if (count === 1) {
-                    expect(result.data).toEqual(data2);
+                    expect(result.data).toMatchSnapshot();
                     done();
                   }
                   count++;
@@ -974,10 +961,6 @@ describe('Query component', () => {
       }
     }
 
-    const wrapper = mount(
-      <ErrorBoundary>
-        <Component />
-      </ErrorBoundary>,
-    );
+    const wrapper = mount(<Component />);
   });
 });
diff --git a/test/react-web/client/__snapshots__/Query.js.snap b/test/react-web/client/__snapshots__/Query.js.snap
deleted file mode 100644
index 931ffb77a8..0000000000
--- a/test/react-web/client/__snapshots__/Query.js.snap
+++ /dev/null
@@ -1,42 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`result in render prop 1`] = `
-Object {
-  "data": Object {
-    "allPeople": Object {
-      "people": Array [
-        Object {
-          "name": "Luke Skywalker",
-          Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1}).people.0",
-        },
-      ],
-      Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1})",
-    },
-    Symbol(id): "ROOT_QUERY",
-  },
-  "error": undefined,
-  "fetchMore": [Function],
-  "loading": false,
-  "networkStatus": 7,
-  "refetch": [Function],
-  "startPolling": [Function],
-  "stopPolling": [Function],
-  "updateQuery": [Function],
-  "variables": Object {},
-}
-`;
-
-exports[`result in render prop while loading 1`] = `
-Object {
-  "data": Object {},
-  "error": undefined,
-  "fetchMore": [Function],
-  "loading": true,
-  "networkStatus": 1,
-  "refetch": [Function],
-  "startPolling": [Function],
-  "stopPolling": [Function],
-  "updateQuery": [Function],
-  "variables": Object {},
-}
-`;
diff --git a/test/react-web/client/__snapshots__/Query.test.js.snap b/test/react-web/client/__snapshots__/Query.test.js.snap
new file mode 100644
index 0000000000..9af62394dc
--- /dev/null
+++ b/test/react-web/client/__snapshots__/Query.test.js.snap
@@ -0,0 +1,393 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Query component provides startPolling in the render prop 1`] = `
+Object {
+  "allPeople": Object {
+    "people": Array [
+      Object {
+        "name": "Luke Skywalker",
+        Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1}).people.0",
+      },
+    ],
+    Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1})",
+  },
+  Symbol(id): "ROOT_QUERY",
+}
+`;
+
+exports[`Query component provides startPolling in the render prop 2`] = `
+Object {
+  "allPeople": Object {
+    "people": Array [
+      Object {
+        "name": "Han Solo",
+        Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1}).people.0",
+      },
+    ],
+    Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1})",
+  },
+  Symbol(id): "ROOT_QUERY",
+}
+`;
+
+exports[`Query component provides startPolling in the render prop 3`] = `
+Object {
+  "allPeople": Object {
+    "people": Array [
+      Object {
+        "name": "Darth Vader",
+        Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1}).people.0",
+      },
+    ],
+    Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1})",
+  },
+  Symbol(id): "ROOT_QUERY",
+}
+`;
+
+exports[`Query component provides stopPolling in the render prop 1`] = `
+Object {
+  "allPeople": Object {
+    "people": Array [
+      Object {
+        "name": "Luke Skywalker",
+        Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1}).people.0",
+      },
+    ],
+    Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1})",
+  },
+  Symbol(id): "ROOT_QUERY",
+}
+`;
+
+exports[`Query component provides stopPolling in the render prop 2`] = `
+Object {
+  "allPeople": Object {
+    "people": Array [
+      Object {
+        "name": "Han Solo",
+        Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1}).people.0",
+      },
+    ],
+    Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1})",
+  },
+  Symbol(id): "ROOT_QUERY",
+}
+`;
+
+exports[`Query component sets polling interval using options 1`] = `
+Object {
+  "allPeople": Object {
+    "people": Array [
+      Object {
+        "name": "Luke Skywalker",
+        Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1}).people.0",
+      },
+    ],
+    Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1})",
+  },
+  Symbol(id): "ROOT_QUERY",
+}
+`;
+
+exports[`Query component sets polling interval using options 2`] = `
+Object {
+  "allPeople": Object {
+    "people": Array [
+      Object {
+        "name": "Han Solo",
+        Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1}).people.0",
+      },
+    ],
+    Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1})",
+  },
+  Symbol(id): "ROOT_QUERY",
+}
+`;
+
+exports[`Query component sets polling interval using options 3`] = `
+Object {
+  "allPeople": Object {
+    "people": Array [
+      Object {
+        "name": "Darth Vader",
+        Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1}).people.0",
+      },
+    ],
+    Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1})",
+  },
+  Symbol(id): "ROOT_QUERY",
+}
+`;
+
+exports[
+  `Query component should update if the client changes in the context 1`
+] = `
+Object {
+  "allPeople": Object {
+    "people": Array [
+      Object {
+        "name": "Luke Skywalker",
+        Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1}).people.0",
+      },
+    ],
+    Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1})",
+  },
+  Symbol(id): "ROOT_QUERY",
+}
+`;
+
+exports[
+  `Query component should update if the client changes in the context 2`
+] = `
+Object {
+  "allPeople": Object {
+    "people": Array [
+      Object {
+        "name": "Han Solo",
+        Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1}).people.0",
+      },
+    ],
+    Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1})",
+  },
+  Symbol(id): "ROOT_QUERY",
+}
+`;
+
+exports[`Query component should update if the options change 1`] = `
+Object {
+  "allPeople": Object {
+    "people": Array [
+      Object {
+        "name": "Luke Skywalker",
+        Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1}).people.0",
+      },
+    ],
+    Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1})",
+  },
+  Symbol(id): "ROOT_QUERY",
+}
+`;
+
+exports[`Query component should update if the options change 2`] = `
+Object {
+  "allPeople": Object {
+    "people": Array [
+      Object {
+        "name": "Han Solo",
+        Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":2}).people.0",
+      },
+    ],
+    Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":2})",
+  },
+  Symbol(id): "ROOT_QUERY",
+}
+`;
+
+exports[`Query component should update if the query changes 1`] = `
+Object {
+  "allPeople": Object {
+    "people": Array [
+      Object {
+        "name": "Luke Skywalker",
+        Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1}).people.0",
+      },
+    ],
+    Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1})",
+  },
+  Symbol(id): "ROOT_QUERY",
+}
+`;
+
+exports[`Query component should update if the query changes 2`] = `
+Object {
+  "allPeople": Object {
+    "people": Array [
+      Object {
+        "id": "1",
+        "name": "Han Solo",
+        Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1}).people.0",
+      },
+    ],
+    Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1})",
+  },
+  Symbol(id): "ROOT_QUERY",
+}
+`;
+
+exports[`fetchMore render prop: render data 1`] = `
+Object {
+  "allPeople": Object {
+    "people": Array [
+      Object {
+        "name": "Luke Skywalker",
+        Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1}).people.0",
+      },
+      Object {
+        "name": "Han Solo",
+        Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1}).people.1",
+      },
+    ],
+    Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1})",
+  },
+  Symbol(id): "ROOT_QUERY",
+}
+`;
+
+exports[`fetchMore render prop: result fetchMore call 1`] = `
+Object {
+  "allPeople": Object {
+    "people": Array [
+      Object {
+        "name": "Han Solo",
+      },
+    ],
+  },
+}
+`;
+
+exports[`refetch prop: first render data 1`] = `
+Object {
+  "allPeople": Object {
+    "people": Array [
+      Object {
+        "name": "Luke Skywalker",
+        Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1}).people.0",
+      },
+    ],
+    Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1})",
+  },
+  Symbol(id): "ROOT_QUERY",
+}
+`;
+
+exports[`refetch prop: result refetch call 1 1`] = `
+Object {
+  "allPeople": Object {
+    "people": Array [
+      Object {
+        "name": "Han Solo",
+        Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1}).people.0",
+      },
+    ],
+    Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1})",
+  },
+  Symbol(id): "ROOT_QUERY",
+}
+`;
+
+exports[`refetch prop: result refetch call 2 1`] = `
+Object {
+  "allPeople": Object {
+    "people": Array [
+      Object {
+        "name": "Darth Vader",
+        Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":2}).people.0",
+      },
+    ],
+    Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":2})",
+  },
+  Symbol(id): "ROOT_QUERY",
+}
+`;
+
+exports[`refetch prop: second render data 1`] = `
+Object {
+  "allPeople": Object {
+    "people": Array [
+      Object {
+        "name": "Han Solo",
+        Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1}).people.0",
+      },
+    ],
+    Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1})",
+  },
+  Symbol(id): "ROOT_QUERY",
+}
+`;
+
+exports[`refetch prop: third render data 1`] = `
+Object {
+  "allPeople": Object {
+    "people": Array [
+      Object {
+        "name": "Darth Vader",
+        Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":2}).people.0",
+      },
+    ],
+    Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":2})",
+  },
+  Symbol(id): "ROOT_QUERY",
+}
+`;
+
+exports[`result in render prop 1`] = `
+Object {
+  "data": Object {
+    "allPeople": Object {
+      "people": Array [
+        Object {
+          "name": "Luke Skywalker",
+          Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1}).people.0",
+        },
+      ],
+      Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1})",
+    },
+    Symbol(id): "ROOT_QUERY",
+  },
+  "error": undefined,
+  "fetchMore": [Function],
+  "loading": false,
+  "networkStatus": 7,
+  "refetch": [Function],
+  "startPolling": [Function],
+  "stopPolling": [Function],
+  "updateQuery": [Function],
+  "variables": Object {},
+}
+`;
+
+exports[`result in render prop while loading 1`] = `
+Object {
+  "data": Object {},
+  "error": undefined,
+  "fetchMore": [Function],
+  "loading": true,
+  "networkStatus": 1,
+  "refetch": [Function],
+  "startPolling": [Function],
+  "stopPolling": [Function],
+  "updateQuery": [Function],
+  "variables": Object {},
+}
+`;
+
+exports[`updateQuery render prop: rendered data 1`] = `
+Object {
+  "allPeople": Object {
+    "people": Array [
+      Object {
+        "name": "Han Solo",
+        Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1}).people.0",
+      },
+    ],
+    Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1})",
+  },
+  Symbol(id): "ROOT_QUERY",
+}
+`;
+
+exports[`updateQuery render prop: result of the updateQuery call 1`] = `
+Object {
+  "allPeople": Object {
+    "people": Array [
+      Object {
+        "name": "Luke Skywalker",
+        Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1}).people.0",
+      },
+    ],
+    Symbol(id): "$ROOT_QUERY.allPeople({\\"first\\":1})",
+  },
+  Symbol(id): "ROOT_QUERY",
+}
+`;
diff --git a/test/test-utils/__snapshots__/test-utils.test.js.snap b/test/test-utils/__snapshots__/test-utils.test.js.snap
new file mode 100644
index 0000000000..51d9305a35
--- /dev/null
+++ b/test/test-utils/__snapshots__/test-utils.test.js.snap
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`allows for passing a custom client 1`] = `
+Object {
+  "__typename": "User",
+  "id": "user_id",
+  Symbol(id): "User:user_id",
+}
+`;
+
+exports[`mocks the data and adds the typename to the query 1`] = `
+Object {
+  "__typename": "User",
+  "id": "user_id",
+  Symbol(id): "User:user_id",
+}
+`;
+
+exports[`mocks the data without adding the typename 1`] = `
+Object {
+  "id": "user_id",
+  Symbol(id): "$ROOT_QUERY.user({\\"username\\":\\"mock_username\\"})",
+}
+`;
diff --git a/test/test-utils/test-utils.js b/test/test-utils/test-utils.test.js
similarity index 95%
rename from test/test-utils/test-utils.js
rename to test/test-utils/test-utils.test.js
index 5dc1d4e824..7ad26b3983 100644
--- a/test/test-utils/test-utils.js
+++ b/test/test-utils/test-utils.test.js
@@ -44,7 +44,7 @@ it('mocks the data and adds the typename to the query', done => {
   class Container extends Component {
     componentWillReceiveProps(nextProps) {
       try {
-        expect(nextProps.data.user).toEqual(user);
+        expect(nextProps.data.user).toMatchSnapshot();
         done();
       } catch (e) {
         done.fail(e);
@@ -116,7 +116,7 @@ it('mocks the data without adding the typename', done => {
   class Container extends Component {
     componentWillReceiveProps(nextProps) {
       try {
-        expect(nextProps.data.user).toEqual(userWithoutTypeName);
+        expect(nextProps.data.user).toMatchSnapshot();
         done();
       } catch (e) {
         done.fail(e);
@@ -163,7 +163,7 @@ it('allows for passing a custom client', done => {
   class Container extends Component {
     componentWillReceiveProps(nextProps) {
       try {
-        expect(nextProps.data.user).toEqual(user);
+        expect(nextProps.data.user).toMatchSnapshot();
         done();
       } catch (e) {
         done.fail(e);