video7: Test rendered components with snapshots. Use enzyme-to-json for readability.

package.json

@@ -8,6 +8,7 @@
   "devDependencies": {
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-to-json": "^3.3.3",
     "react-scripts": "1.1.1"
   },
   "jest": {

src/App.test.js

@@ -3,6 +3,7 @@ import React from "react";
 import { App, appName, titleName } from "./App";
 import { configure, shallow, mount } from "enzyme";
 import Adapter from "enzyme-adapter-react-16";
+import toJson from 'enzyme-to-json';
 
 // Configure Enzyme for the React version we are using.
 // Could be in a test setup file. Required for React 16, 15, 0.14, 0.13.
@@ -40,4 +41,9 @@ describe("<App />>", () => {
     expect(w.find(appName).length).toBe(1);
     expect(w.find(titleName).length).toBe(1);
   });
+
+  it("matches the snapshot", () => {
+    const tree = shallow(<App />);
+    expect(toJson(tree)).toMatchSnapshot();
+  });
 });

src/__snapshots__/App.test.js.snap

@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<App />> matches the snapshot 1`] = `
+<div
+  className="App"
+>
+  <header
+    className="App-header"
+  >
+    <img
+      alt="logo"
+      className="App-logo"
+      src="logo.svg"
+    />
+    <h1
+      className="App-title"
+    >
+      Welcome to React
+    </h1>
+  </header>
+  <heading
+    text="Some title"
+  />
+  <p
+    className="App-intro"
+  >
+    To get started, edit 
+    <code>
+      src/App.js
+    </code>
+     and save to reload.
+  </p>
+  <ul
+    className="tyler"
+  >
+    <li>
+      First
+    </li>
+    <li>
+      Second
+    </li>
+    <li>
+      Third
+    </li>
+  </ul>
+</div>
+`;

yarn.lock

@@ -2234,6 +2234,12 @@ enzyme-adapter-utils@^1.3.0:
     object.assign "^4.0.4"
     prop-types "^15.6.0"
 
+enzyme-to-json@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-3.3.3.tgz#ede45938fb309cd87ebd4386f60c754525515a07"
+  dependencies:
+    lodash "^4.17.4"
+
 enzyme@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.3.0.tgz#0971abd167f2d4bf3f5bd508229e1c4b6dc50479"