video9: fully render components with mount()/unmount().

src/App.test.js

@@ -9,7 +9,7 @@ import toJson from "enzyme-to-json";
 // Could be in a test setup file. Required for React 16, 15, 0.14, 0.13.
 configure({ adapter: new Adapter() });
 
-describe("<App />>", () => {
+describe("<App /> shallow rendering", () => {
   const wrapper = shallow(<App />);
 
   it("should find its elements", () => {
@@ -48,6 +48,28 @@ describe("<App />>", () => {
   });
 });
 
+describe("<App /> mount rendering", () => {
+  it("h1 contains correct text", () => {
+    // Second parameter is optional.
+    const wrapper = mount(<App />, {
+      context: {},
+      attachTo: document.createElement("div"),
+    });
+
+    expect(wrapper.find("h1").text()).toBe("Welcome to React");
+    // Tests can affect each other if mounted components are not unmounted,
+    // since they will remain mounted in the same DOM.
+    // Unmount() can also be used to simulate an unmount/mount cycle in React.
+    wrapper.unmount();
+  });
+
+  it("matches the snapshot", () => {
+    const tree = mount(<App />);
+    expect(toJson(tree)).toMatchSnapshot();
+    tree.unmount();
+  });
+});
+
 describe("<Link>", () => {
   const expected = "www.google.com";
 

src/__snapshots__/App.test.js.snap

@@ -1,6 +1,58 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<App />> matches the snapshot 1`] = `
+exports[`<App /> mount rendering matches the snapshot 1`] = `
+<MasterControlProgram>
+  <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"
+    >
+      <div>
+        Some title
+      </div>
+    </heading>
+    <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>
+</MasterControlProgram>
+`;
+
+exports[`<App /> shallow rendering matches the snapshot 1`] = `
 <div
   className="App"
 >