video11: test new component state with setState().

src/App.js

@@ -28,6 +28,7 @@ Title.propTypes = {
 class App extends Component {
   state = {
     input: "",
+    mainColor: "blue",
     on: false,
   };
 
@@ -37,6 +38,7 @@ class App extends Component {
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
           <h1 className="App-title">Welcome to React</h1>
+          <h3 className={this.state.mainColor}>Everyone is welcome!</h3>
         </header>
         <Title text="Some title" />
         <p className="App-intro">

src/App.test.js

@@ -56,6 +56,17 @@ describe("<App /> shallow rendering", () => {
     expect(wrapper.find(".button-state").text()).toBe("Yes!");
   });
 
+  it("should update className with new State", () => {
+    expect(wrapper.find(".blue").length).toBe(1);
+    expect(wrapper.find(".red").length).toBe(0);
+
+    // Invoking setState() on the wrapper invokes in on the underlying component,
+    // and causes a rerender.
+    wrapper.setState({ mainColor: "red" });
+    expect(wrapper.find(".blue").length).toBe(0);
+    expect(wrapper.find(".red").length).toBe(1);
+  });
+
   it("should change title text on input change", () => {
     const input = wrapper.find("input");
     const expected = "Tyler";

src/__snapshots__/App.test.js.snap

@@ -18,6 +18,11 @@ exports[`<App /> mount rendering matches the snapshot 1`] = `
       >
         Welcome to React
       </h1>
+      <h3
+        className="blue"
+      >
+        Everyone is welcome!
+      </h3>
     </header>
     <heading
       text="Some title"
@@ -84,6 +89,11 @@ exports[`<App /> shallow rendering matches the snapshot 1`] = `
     >
       Welcome to React
     </h1>
+    <h3
+      className="blue"
+    >
+      Everyone is welcome!
+    </h3>
   </header>
   <heading
     text="Some title"