video12: tests React component lifecycle methods.

.eslintrc.js

@@ -18,6 +18,7 @@ module.exports = {
     "describe": false,
     "expect": false,
     "it": false,
+    "jest": false,
     "test": false,
   },
 

src/App.js

@@ -30,8 +30,17 @@ class App extends Component {
     input: "",
     mainColor: "blue",
     on: false,
+    lifeCycle: "",
   };
 
+  componentDidMount() {
+    this.setState({ lifeCycle: "componentDidMount" })
+  }
+
+  componentWillReceiveProps() {
+    this.setState({ lifeCycle: "componentWillReceiveProps" })
+  }
+
   render() {
     return (
       <div className="App">
@@ -53,6 +62,7 @@ class App extends Component {
         <button onClick={() => this.setState({ on: true })}>Click</button>
         <h2>{this.state.input}</h2>
         <input type="text" onChange={(e) => this.setState({ input: e.currentTarget.value })} />
+        <p className="lifeCycle">{this.state.lifeCycle}</p>
       </div>
     );
   }

src/App.test.js

@@ -14,7 +14,7 @@ describe("<App /> shallow rendering", () => {
 
   it("should find its elements", () => {
     // There is one <p> in <App />: only one shoud be present in shallow rendering.
-    expect(wrapper.find("p").length).toBe(2);
+    expect(wrapper.find("p").length).toBe(3);
     expect(wrapper.find("p.App-intro").exists()).toBe(true);
     expect(wrapper.find("ul").hasClass("tyler")).toBe(true);
     expect(wrapper.find("ul").children().length).toBe(3);
@@ -76,6 +76,29 @@ describe("<App /> shallow rendering", () => {
     input.simulate("change", { currentTarget: { value: expected } });
     expect(wrapper.find("h2").text()).toBe(expected);
   });
+
+  it("should call componentDidMount, update p tag text", () => {
+    jest.spyOn(App.prototype, "componentDidMount");
+    const w = shallow(<App />);
+
+    // Needs the method to be defined on the component for it to be invoked.
+    expect(App.prototype.componentDidMount.mock.calls.length).toBe(1);
+    expect(w.find(".lifeCycle").text()).toBe("componentDidMount");
+  });
+
+  it("should call componentWillReceiveProps", () => {
+    jest.spyOn(App.prototype, "componentWillReceiveProps");
+    const w = shallow(<App />);
+
+    expect(w.find(".lifeCycle").text()).toBe("componentDidMount");
+
+    // Needs the method to be defined on the component for it to be invoked.
+    expect(App.prototype.componentWillReceiveProps.mock.calls.length).toBe(0);
+
+    w.setProps({ hide: true });
+    expect(App.prototype.componentWillReceiveProps.mock.calls.length).toBe(1);
+    expect(w.find(".lifeCycle").text()).toBe("componentWillReceiveProps");
+  });
 });
 
 describe("<App /> mount rendering", () => {

src/__snapshots__/App.test.js.snap

@@ -68,6 +68,11 @@ exports[`<App /> mount rendering matches the snapshot 1`] = `
       onChange={[Function]}
       type="text"
     />
+    <p
+      className="lifeCycle"
+    >
+      componentDidMount
+    </p>
   </div>
 </MasterControlProgram>
 `;
@@ -135,5 +140,10 @@ exports[`<App /> shallow rendering matches the snapshot 1`] = `
     onChange={[Function]}
     type="text"
   />
+  <p
+    className="lifeCycle"
+  >
+    componentDidMount
+  </p>
 </div>
 `;